关于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申明的变量从新渲染了，一般申明的变量并没有从新渲染