Vue数据双向绑定(Vue data bidirectional binding)




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


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










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









1、 Vue mainly realizes two-way data binding:

Data hijacking combined with publisher subscriber mode is adopted through object Defineproperty () hijacks setters and getters of various properties, publishes messages to subscribers when data changes, and triggers corresponding listening callbacks.

When creating a Vue instance, Vue will traverse the attributes of the data option, using objet Defineproperty adds getters and setters to the property to hijack the reading of data (getters are used to rely on collection and setters are used to distribute updates), tracks the dependency internally, and notifies changes when the property is accessed and modified.

Each component instance will have a corresponding watcher instance. In the process of component rendering, record all the dependent data attributes (including dependency collection, calculated watcher and user watcher instances). Then, when the dependency is changed, the setter method will notify the watcher instance that depends on this data to recalculate (send updates), so as to make its associated components re render.

2、 Unidirectional data binding flow and bidirectional data binding

1. Unidirectional data binding: the data flow is unidirectional.

Advantages: the data flow direction can be tracked, the flow is single, and the problem can be traced more quickly.

Disadvantages: it is not convenient to write. To change the UI, you must create various actions to maintain the corresponding state

2. Bidirectional data binding: data are interlinked, and the operation of data change is hidden inside the framework.

Advantages: in the scenario of more form interaction, a large number of code irrelevant to business will be simplified.

Disadvantages: the change of local state cannot be tracked, which increases the difficulty of debugging in case of error.

3、 Why in vue3 0 adopts proxy and discards object defineProperty

Object. Defineproperty itself has a certain ability to monitor the changes of array subscripts, but in Vue, this feature is abandoned in consideration of performance / experience cost performance (why can’t Vue detect the changes of array). To solve this problem, Vue can use the following methods to listen to arrays after internal processing


Because hacking is only carried out for the above seven methods, the properties of other arrays can not be detected, which still has some limitations.

Object. Defineproperty can only hijack the properties of objects, so you need to traverse each property of each object. Vue 2. X monitors the data by recursion + traversing the data object. If the attribute value is also an object, it needs deep traversal. Obviously, it is a better choice to hijack a complete object. Proxy can hijack the whole object and return a new object. Proxy can not only proxy objects, but also proxy arrays. You can also dynamically add attributes to agents.

4、 Proxy compared to object Advantages of defineproperty

1. Directly listen to the object instead of the attribute

2. Directly monitor the changes of the array

3. There are many interception methods

4. Proxy returns a new object. You can only operate the new object to achieve the purpose, but object Defineproperty can only be modified directly by traversing object properties (it needs to be modified with deep copy)

5. As a new standard, proxy will be continuously optimized by browser manufacturers

6. Proxy cannot be compatible with Polyfill, which mainly smoothes the differences in JS implementation between different browsers.