vue3中遇到reactive响应式失效的问题记录
作者：柑橘乌云_
vue3中reactive响应式失效
情况简述
初始化了一个reactive的空数组，之后调用接口，将接口返回的数据赋值给这个reactive，此时发现页面数据并没有更新。（场景：ele-table的dataList）
const dataList = reactive([]);
const load = async () => {
const res = await 接口函数（）; //假设请求接口返回的数据
// 方法1 失败，直接赋值丢失了响应性
// dataList = res;
// 方法2 这样也是失败
// dataList.concat(res);
};原因
直接把一个新的数组赋值给dataList,导致reactive声明的响应式对象由dataList代理
被新的数组所替代,因为在操作代理对象的时候需要有代理对象作为前提,所以失去了响应式
在vue3中不管是对象还是数组都不能直接将整个数据进行赋值，这样会造成reactive定义的响应式失效
就像对象的地址被替换，就不是原来的那个对象了
解决办法
方法1：创建一个响应式对象，对象的属性是数组
let datalist = reactive({
list: [],
})
let arr = [1,2,3]
datalist.list = arr方法2：使用ref函数（ref可以创建任意数据类型，reactive只能创建对象或者数组）
const datalist = ref([]) datalist.value = [1, 2, 3]
方法3：数组的push
let datalist = reactive([])
let arr = [1, 2, 3]
arr.forEach((item) => {
datalist.push(item)
}) 或
let datalist = reactive([]) let arr = [1, 2, 3] datalist.push(...arr)
vue3解构响应式失效解析
在使用vue3时，我们发现不能使用解构来处理响应式数据，今天我们来看看究竟是为什么。
在vue3中解构响应式数据
<div>{{counter}}</div>
<div>{{obj.value}}</div>
const reactiveObj = reactive({
counter: 0,
obj: {
value: 1
}
});
setInterval(() => {
reactiveObj.counter++;
reactiveObj.obj.value++;
}, 1000);
const { counter, obj } = reactiveObj;
return {
counter,
obj
};在页面上可以看到，counter的值不会变，obj.a的值倒是一直在递增。
我们都知道vue3是使用ES6的proxy特性来实现响应式的，先来回顾一下proxy。
const obj = {
value: 1
}
const proxy = new Proxy(obj, {
get: function(target, key) {
return Reflect.get(...arguments);
},
set: function(target, key, value) {
return Reflect.set(...arguments)
}
})
proxy.value++;
console.log(proxy.value); // 2proxy本身就是对对象进行拦截，通过new Proxy的返回值，拦截obj对象，当操作对象中的值时，会触发set或者get。
但是对于原始值(string、number这些)，就需要在外部包裹一下变成一个对象，不然没办法使用new Proxy去拦截。
我们来看看vue3是如何处理的。
在vue3中，使用ref来为基本数据类型添加响应式。
export function ref(value?: unknown) {
return createRef(value, false)
}
function createRef(rawValue: unknown, shallow: boolean) {
if (isRef(rawValue)) {
return rawValue
}
// 使用一个对象包裹基本数据类型数据
return new RefImpl(rawValue, shallow)
}
class RefImpl<T> {
private _value: T
private _rawValue: T
public dep?: Dep = undefined
public readonly __v_isRef = true
constructor(value: T, public readonly __v_isShallow: boolean) {
this._rawValue = __v_isShallow ? value : toRaw(value)
this._value = __v_isShallow ? value : toReactive(value)
}
get value() {
trackRefValue(this)
return this._value
}
set value(newVal) {
newVal = this.__v_isShallow ? newVal : toRaw(newVal)
if (hasChanged(newVal, this._rawValue)) {
this._rawValue = newVal
this._value = this.__v_isShallow ? newVal : toReactive(newVal)
triggerRefValue(this, newVal)
}
}
}从上面的代码可以发现，vue3把原始值包装成一个对象，通过get value和set value方法来对原始值进行访问，这样在访问值的时候就必须携带.value了。
而对于对象而言，使用ref的话内部还是调用reactive。
export const toReactive = <T extends unknown>(value: T): T =>
isObject(value) ? reactive(value) : value
export function reactive(target: object) {
if (isReadonly(target)) {
return target
}
return createReactiveObject(
target,
false,
mutableHandlers,
mutableCollectionHandlers,
reactiveMap
)
}但是还是需要通过.value去访问内部的响应式数据.
let reactiveObj = ref({
counter: 0,
obj: {
a: 1
}
});
console.log(reactiveObj.value.obj.a);为什么解构会破坏响应式？
解构赋值，区分基本数据类型和引用类型的赋值，原始类型的赋值相当于按值传递，引用类型的值就相当于按引用传递。
const obj = {
value: 1，
obj1: {
value: 1
}
}
const val = obj.value;
const obj1 = obj.obj1;上方的val虽然是obj.value的值，但是当访问val时，已经绕过了obj对象的get方法，也就是本文讨论的失去响应式。
而obj1在解构出来的值是按引用传递的，内部的指针依然指向obj.obj1，所以去访问其中的内容并不会失去响应式。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。