Vue 3.0 对数据双向绑定的改进

简介: Vue 3.0 对数据双向绑定的改进

1、Object.defineProperty 的缺陷

熟悉 Vue 的人都知道,在 Vue2.x 之前都是使用 Object.defineProperty() 来实现双向数据双向绑定(数据响应式)的,如果你对此有疑问的话,可以看一下我的这篇博客:深入 Vue 2.x 数据响应式原理。但是这个 Object.defineProperty() 的方法是有挺多缺陷的,下面对该方法的几个缺陷做如下的具体介绍:

  • 1.1、无法检测到新的属性添加/删除

在开发过程中,我们可能会遇到这样一种情况:当在 Vue 实例中的 data 里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。


根据当时的官方文档定义:如果在 Vue 实例创建之后,添加新的属性到实例上,是不会触发视图更新的。


当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty() 把这些属性全部转为 getter/setter,从而实现对 data 的监听,从而实现一旦 data 改变就刷新视图的效果。但是如果是后来追加的属性,则是不会调用 Object.defineProperty() 对新属性进行监听的,如果新属性改变了,虽然数据在内存中的值会改变,但是 Vue 实例是监听不到新的属性的,所以不会调用 render() 函数对视图进行刷新。


对于这种情况,Vue 2.x 提出的解决办法是 Vue.$set(),有兴趣的同学可以参考这里:给对象新增属性(使用Vue.$set())。

  • 1.2、无法监听数组的变化

Object.defineProperty() 只能对属性进行数据劫持,不能对整个对象进行劫持,同理无法对数组进行劫持,但是我们在使用 Vue 框架中都知道,Vue 通过遍历属性或者数组的项进行观察,实现数据劫持,但是这个劫持是有缺陷的。


即无法监听数组根据 index 对于元素的赋值(因为数组是在实例化过程中遍历数组进行observe 的),如果这样赋值就相当于把 index 的指向变成了一个新的位置,但是这个位置的对象是没有进行 observe 的。


Vue 能够监听数组变化的场景:(1)通过赋值的形式改变正在被监听的数组;(2)通过 splice(index,num,val)的形式改变正在被监听的数组;(3)通过数组的 push() 的形式改变正在被监听的数组;


Vue 无法监听的数组变化的场景:(1)通过数组索引改变数组元素的值;(2)改变数组的长度;


解决无法监听数组变化的方法:(1)this.$set(arr, index, newVal);(2)通过 splice(index,num,val);(3)使用临时变量作为中转,重新赋值数组;


补充:Vue 2.x 针对数组是在源码中单独进行处理的,将数组的原始方法进行变异:push(),pop(),shift(),unshift(),splice(),sort(),reverse()。(这就是为什么你在控制台打印一个数组,数组最后会多一个 observer 项)。

  • 1.3、需要深度遍历,浪费内存

Vue 通过遍历属性或者数组的项进行观察,实现数据劫持,如果在嵌套比较深的情况下,是需要深度遍历,这样会浪费内存(对象深度遍历

2、Vue 3.0 的数据双向绑定原理

基于上述的问题,Vue 3.0 进行了改进:使用 ES6 的 Proxy 对象,通过 reactive() 函数给每一个对象都包一层 Proxy,通过 Proxy 监听属性的变化,从而实现对数据的监控。以下是 reactive() 函数的部分源码:

let toProxy = new WeakMap()    //正向缕存
let toRaw = new WeakMap()      //反向缓存
function reactive(target){     //构建 Proxy 监听对象
    let observed = toProxy.has(target)    //判断是否已经监听
    if(observed){
        return observed
    }
    if(toRaw.has(target)){    //判断是否是 observed,避免重复代理
        return target
    }
    observed = new Proxy(target, handle)
    //handle监听方法
    toProxy.set(target, observed)//缓存存储
    toRaw.set(observed, target)
    return observed //返回被被监听的对象,读取/修改observed时触发Proxy中的get/set方法
}


在看这部分源码之前最好能看一下阮一峰大佬的 ES6 相关的 Proxy、Reflect、Set 和 Map 数据结构 → 传送门。


这代码中声明了两个缓存,toProxy 和 toRaw,前者用于监测属性是否被监听过,如果已经被监听了就直接返回之前存储在缓存中的 observed。第二个缓存,如果传入的是 observed,从 toRaw 的 WeakMap 里面直接查找,如果存在就可以不进行代理,这样可以避免重复代理。


这里介绍一下 handle 方法,里面有 getter/setter,其中 getter 中有 track 方法用于依赖收集,setter 中有 trigger 方法用于触发修改跟新。

3、之前的问题得到了完美的解决

Vue 3.0 版本相比 2.0 增加了 Proxy 之后,就可以直接拦截所有对象类型数据的操作,对数组也是支持的,同时具有一个缓存的机制,多层对象嵌套的时候就可以使用懒代理。


注意:Vue 3.0 版本对数组的 ADD/DELETE 方法进行了单独处理,因为一旦改变了数组的长度,除了去触发数组内容的 set 方法之外,还会触发数组长度的 set 方法,所以这个时候是需要避免多次调用 set 方法的。

Vue 2.0 版本存在的问题 Vue 3.0 版本增加 Proxy 后
无法监测新属性的 添加/删除 允许框架拦截对象上的操作
无法监听数组的一些变化 Proxy 代理默认支持数组
多层对象嵌套,需要深度遍历,浪费内存 多层对象嵌套的时候就可以使用懒代理
目录
相关文章
|
22天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
126 64
|
22天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
101 60
|
22天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
28 8
|
21天前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
21 1
|
21天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
32 1
|
22天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
25天前
|
JavaScript 前端开发 API
从Vue 2到Vue 3的演进
从Vue 2到Vue 3的演进
39 0
|
25天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
54 0
|
JavaScript 前端开发 编译器
揭密 Vue 的双向绑定
Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定。下面是一个最简单的示例 JsFiddle 演示 https://jsfiddle.net/0okxhc6f/ 在这个示例的输入框中输入的内容,会随后呈现出来。
1183 0
|
JavaScript 前端开发 编译器
揭密 Vue 的双向绑定
Vue 中需要输入什么内容的时候,自然会想到使用 的方式来实现双向绑定。下面是一个最简单的示例 剖析Vue原理&实现双向绑定MVVM What's your name: Hello {{ name }} new Vue({ el: "#app", data: { name: "" } }); JsFiddle 演示https://jsfiddle.net/0okxhc6f/ 在这个示例的输入框中输入的内容,会随后呈现出来。
970 0
下一篇
DataWorks