vue3中对象或数组重新赋值不再是响应式?

为什么vue2对数组或对象进行赋值还是响应式,而vue3重新赋值后不再是响应式

<div>{{ obj1 }}</div>
<div>{{ obj2 }}</div>
<button @click="changeObj">修改</button>

let obj1 = ref({ name: "工具人" });
let obj2 = reactive({ name: "工具人" });
function changeObj() {
  //   obj1 = {name:"打工人"};
  //   obj2 = {name:"打工人"};
  obj1 = ref({ name: "打工人" });
  obj2 = reactive({ name: "打工人" });
}
阅读 5.9k
2 个回答

vue2 下,this 可以理解成一个大对象,所以怎么修改值都不会切断引用,保持响应性。
vue3 赋值要保持响应,就不要改变引用,否则无法被 proxy 监听

赋值方式有误

obj1.value = { name: '打工人' }
Object.assign(obj2, { name: '打工人' })
推荐问题