关于vue3:某些特殊情况下非响应式数据改变也能被页面响应

非响应式变量扭转时页面是无奈从新渲染的，如果在响应式数据扭转的时候，扭转了非响应式的变量，此时页面会同时从新渲染新数据。然而只限于数组和对象的扭转，一般字符串不渲染。

数组

• 数组的push/pop或者是间接[index]赋值的形式都是会触发的

template代码

<div>
  <button @click="push">Push</button>
  <ul>
    <li v-for="item in list1" :key="item">{{ item }}</li>
  </ul>
  <ul>
    <li v-for="item in list2" :key="item">{{ item }}</li>
  </ul>
</div>

ts代码

setup(){
 const list1 = ref<string[]>(["aaa", "bbb", "ccc"]);
  const list2 = ["AAA", "BBB", "CCC"];

  function push() {
    list1.value.push("ddd");
    list2.push("DDD");
  }
  
  return { list1, list2, push }
}

点击Push，页面同时渲染了list1和list2

对象

• 对象的属性批改/新增也是会触发页面渲染的

template代码

<button @click="modify">modify</button>
<div>{{ obj1 }}</div>
<div>{{ obj2 }}</div>

ts代码

setup(){
  const obj1 = reactive({
    key: "obj1 key",
  });
  const obj2 = {
    key: "obj2 key",
  };
  
  function modify() {
    obj1.key = "modify obj1 key";
    obj2.key = "modify obj2 key";
  }

  return { obj1, obj2, modify };
}

点击批改obj1和obj2的key后，页面都渲染了

字符串

• 批改一般字符串后，页面没有渲染
• 数字/Boolean和字符串的成果一样

template代码

<button @click="modify">modify</button>
<div>value1 ====== {{ value1 }}</div>
<div>value2 ====== {{ value2 }}</div>

js代码

setup() {
  const value1 = ref("应用ref申明的value1");
  let value2 = "一般字符串value2";

  function modify() {
    value1.value = "批改value1";
    value2 = "批改value2";
  }

  return { value1, value2, modify };
},

点击批改后页面只有ref申明的变量从新渲染了，一般申明的变量并没有从新渲染