西安网站 技术支持牛商网,地方网站名称,wordpress标题截断,做3d同人的网站是什么前言遇到的bug
reactive与ref都是Vue3中非常重要的API#xff0c;众所周知#xff0c;用这两个API可以创建响应式数据#xff0c;从而实现Vue的数据驱动视图。
平时用的时候只知道用ref定义基本数据类型#xff0c;reactive定义引用数据类型。
因为今天发现一个bug…前言遇到的bug
reactive与ref都是Vue3中非常重要的API众所周知用这两个API可以创建响应式数据从而实现Vue的数据驱动视图。
平时用的时候只知道用ref定义基本数据类型reactive定义引用数据类型。
因为今天发现一个bug
let arr1 reactive([//arr1数组内容
])let arr2 reactive([])//异步操作之后把arr1赋值给arr2arr2 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 truereturn 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 targetobject) {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)
呜呜后面有空看
