[Vue3] reactive数据改变，视图不更新的问题

问题

在vue文件中，创建响应式对象，赋值后却无法触发响应式，即页面的值不会改变

const obj = {
	name: 'xiaoming',
	age: 18
}
let form = reactive({});
form = obj;

上述代码中，form的值是会改变，但是页面显示中的form值不会改变，不会发生响应式变化。

原因

使用reactive返回的并不是一个对象，而是对象的响应式代理，即被proxy包裹的对象。如果给它重新赋值，那么就相当于改变了对象的地址，就不是原来的对象了，其响应式就会失效。

解决方法

1. 将reactive对象包裹一层

const obj = {
	name: 'xiaoming',
	age: 18
}
let form = reactive({
	attr: {}
});
form.attr = obj;

给form对象里的attr对象赋值，不会失去响应式。

2. 直接使用ref

const obj = {
	name: 'xiaoming',
	age: 18
}
let form = ref({});
form.value = obj;

使用ref定义数组

数组与对象一样，也会发生上述问题，所以建议使用ref来定义数组，数组赋值时，不会失去响应式。

let arr = ref([1, 2, 3]);
arr.value = [];

代码007普通

打赏 收藏 海报 链接