ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue数据双向绑定

2022-05-13 21:31:24  阅读:33  来源: 互联网

标签:Vue 对象 绑定 Object Proxy 双向 defineProperty 属性


一、vue实现数据双向绑定的主要是:

采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应监听回调。

当创建Vue实例时,vue会遍历data选项的属性,利用Objet.defineProperty为属性添加getter和setter对数据的读取进行劫持(getter用来依赖收集,setter用来派发更新),并且在内部追踪依赖,在属性被访问和修改时通知变化。

每个组件实例会有对应的watcher实例,在组件渲染的过程中记录依赖的所有数据属性(进行依赖收集,还有computed watcher,user watcher实例),之后依赖项被该改动时,setter方法会通知依赖与此data的watcher实例重新计算(派发更新),从而使它关联的组件重新渲染。

二、单向数据绑定流和双向数据绑定

1. 单向数据绑定:数据流是单向的。

优点:数据流动方向可以追踪,流动单一,追查问题的时候可以更快捷。

缺点:写起来不太方便。要使UI发生变更就必须创建各种action来维护对应的state

2.双向数据绑定:数据之间是相通的,将数据变更的操作隐藏在框架内部。

优点:在表单交互较多的场景下,会简化大量与业务无关的代码。

缺点:无法追踪局部状态的变化,增加了出错时debug的难度。

三、为什么在Vue3.0采用了Proxy,抛弃了Object.defineProperty

Object.defineProperty本身有一定的监控到数组下标变化的能力,但是在Vue中,从性能/体验的性价比考虑,弃用了这个特性(Vue为什么不能检测数组的变动)。为了解决这个问题,经过Vue内部处理后可以使用以下几种方法来监听数组

push()、pop()、shift()、unshift()、splice()、sort()、reverse()

由于只针对了以上7种方法进行了hack处理,所以其他数组的属性也是检测不到的,还是具有一定的局限性。

Object.defineProperty只能劫持对象的属性,因此需要对每个对象的每个属性进行遍历。Vue 2.x是通过递归+遍历data对象来实现对数据的监听的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象才是更好的选择。Proxy可以劫持整个对象,并返回一个新的对象。Proxy不仅可以代理对象,代理数组。还可以代理动态增加的属性。

四、Proxy相较于Object.defineProperty的优势

1.直接监听对象而非属性

2.直接监听数组的变化

3.拦截方式较多

4.Proxy返回一个新对象,可以只操作新对象达到目的,而Object.defineProperty只能遍历对象属性直接修改(需要用深拷贝进行修改)

5.Proxy作为新标准将受到浏览器厂商重点持续的性能优化

6.Proxy不能用polyfill来兼容,polyfill主要抚平不同浏览器之间对js实现的差异。

标签:Vue,对象,绑定,Object,Proxy,双向,defineProperty,属性
来源: https://www.cnblogs.com/lishijie0116/p/16268281.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有