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