前言&遇到的bug
reactive与ref都是Vue3中非常重要的API,众所周知,用这两个API可以创建响应式数据,从而实现Vue的数据驱动视图。
平时用的时候只知道用ref定义基本数据类型,reactive定义引用数据类型。
因为今天发现一个bug:
let arr1 = reactive([
//arr1数组内容
])
let arr2 = reactive([])
//异步操作之后把arr1赋值给arr2
arr2 = arr1
console.log(arr2) //proxy数组为Array(0)
解决:给arr2外层包裹一个对象
let arr1 = reactive([
//arr1数组内容
])
let list = reactive({
arr2:[]
})
//异步操作
list.arr2 = arr1
console.log(list.arr2)
这样可以赋值成功
参考带你看懂vue3中最重要的API——ref和reactive_vue ref reactive-CSDN博客
发现要么所有数据用ref单独定义,要么用reactive定义一个外层对象,在对象里定义数据(类似Vue2的data) ,最好不要用reactive直接定义数组。
接下来复习一下reactive原理
Proxy
文档链接:Proxy - JavaScript | MDN (mozilla.org)
先回顾Vue2的数据劫持:
通过 Object.defineProperty 方法实现,递归地将一个普通对象的每个属性转换为 getter/setter 的形式来实现数据劫持,每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。但是:
- 无法监听数组的变化: Object.defineProperty 只能劫持对象的属性访问和修改,无法直接监听数组的变化。
- 初始化时递归遍历对象: 在初始化时,Vue 2 需要递归遍历对象的所有属性来进行劫持,这会导致在初始化大型对象时性能较差。
- 无法监听属性的添加和删除: 使用 Object.defineProperty 只能劫持已经存在的属性,无法监听动态添加和删除的属性。
Proxy 的原理是通过在目标对象和代理对象之间建立一个拦截层,所有对代理对象的操作都会先经过这个拦截层进行处理。在拦截层,可以对不同操作定义不同的事件处理程序。
创建proxy
const p = new Proxy(target, handler)
target -- 要使用 Proxy
包装的目标对象
handler -- 一个通常以函数作为属性的对象,各属性中的函数分别定义了对代理对象进行各种操作时的拦截行为
在handler中有13个方法(参见文档),比较常用的是get和set.
Vue3中的响应式
reactive
reactive的内部就是基于proxy,使用reactive定义的对象会返回这个对象的代理。
当Proxy 对象监听到了的数据变更时,会触发handler中的相应函数,从而实现自定义拦截操作。
手写reactive ↓
const reactiveHandler = {
get (target, key) {
if (key==='_is_reactive') return true
return Reflect.get(target, key)
},
set (target, key, value) {
//Reflect.set是执行该事件的默认行为,不需要对默认行为重写
//在执行完自定义拦截行为后调用默认行为即可
//vue3在这里会通知与该对象关联的视图进行更新来实现响应式
const result = Reflect.set(target, key, value)
console.log('添加或修改了属性', key, value)
return result
},
deleteProperty (target, key) {
const result = Reflect.deleteProperty(target, key)
console.log('删除了属性', key)
return result
},
}
function reactive (target) {
if (target && typeof target==='object') {
if (target instanceof Array) { // 数组
target.forEach((item, index) => {
target[index] = reactive(item)
})
} else { // 对象
Object.keys(target).forEach(key => {
target[key] = reactive(target[key])
})
}
const proxy = new Proxy(target, reactiveHandler)
return proxy
}
return target
}
const obj = {
name:'小明',
age:18,
family:{
father:{
name:'大明',
age:40
},
mother:{
name:'大红',
age:38
}
}
}
const objProxy = reactive(obj)
console.log(objProxy)
objProxy.age ++ //这里每次修改 都会执行你在handler中的自定义行为
objProxy.family.father.age ++
objProxy.family.mother.name = '小红'
ref
把基本数据类型通过value包裹成引用式数据类型,再用reactive定义
也就是说,通过ref定义的基本数据类型,返回的是一个对象,但这个对象只有一个属性.value
本质上,ref(0) 等于 reactive( { value:0 })
-----------------------------------------------------------------------------------------------------------------------------
还有更深层的文档介绍深入响应式系统 | Vue.js (vuejs.org)
呜呜后面有空看