4.vue 的双向绑定的原理是什么 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue 的双向绑定原理主要是利用了虚拟 DOM 和数据劫持。

首先，Vue 使用了虚拟 DOM (Virtual DOM) 技术。虚拟 DOM 是一种将网页的 DOM 结构抽象成对象的技术，它可以在内存中构建一个虚拟的 DOM 树，然后将这个虚拟 DOM 树与实际的 DOM 树进行比较，找出差异性，最后将差异性更新到实际的 DOM 树中。通过使用虚拟 DOM，Vue 可以快速地更新视图，提高了性能和效率。

其次，Vue 还利用了数据劫持的机制来实现双向绑定。在 Vue 的实现中，使用了一个称为 Observer 的数据观察器，它会对数据进行劫持。当数据发生变化时，Observer 会通知订阅者，订阅者会触发相应的更新操作，从而实现数据的双向绑定。

具体来说，当 Vue 实例创建时，会将数据对象传递给 Observer，Observer 会遍历数据对象的属性，并使用 Object.defineProperty() 方法将每个属性转为 getter 和 setter。这样一来，当我们访问数据属性时，会触发 getter 方法，而当我们修改数据属性时，会触发 setter 方法。在 setter 方法中，会通过调用 Watcher 进行更新操作，从而实现视图的更新。

另外，Vue 还通过使用指令（如 v-model）来实现视图和数据的双向绑定。指令可以将视图元素和数据属性进行关联，当视图元素发生改变时，会自动更新关联的数据属性；而当数据属性发生改变时，会自动更新关联的视图元素。

总之，Vue 的双向绑定的原理是通过使用虚拟 DOM 和数据劫持的机制来实现的。它能够让我们以声明式的方式来编写代码，同时减少了手动操作 DOM 的繁琐性，提高了开发效率。

2年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue的双向绑定是指数据的改变可以自动更新到视图，同时视图的改变也可以自动更新到数据。这种双向绑定的实现原理是通过数据劫持和观察者模式来实现的。

数据劫持
Vue利用了JavaScript的Object.defineProperty方法来劫持数据。它会在创建Vue实例时遍历data选项中的所有属性，对每个属性进行劫持。当属性被读取或修改时，Vue会调用get和set方法进行劫持。在get方法中，Vue会将订阅者收集起来，并将其添加到观察者列表中。在set方法中，Vue会通知观察者并更新视图。
观察者模式
Vue使用观察者模式来管理双向绑定。在Vue中，数据变化时会通知所有的观察者进行更新。Vue中的观察者分为两种：Dep（依赖）和Watcher（订阅者）。Dep是一种可观察对象，每个属性都对应一个Dep实例。而Watcher则是一个订阅者，它订阅了对应属性的变化，当属性变化时会触发Watcher的更新方法。
编译模板
在Vue中，将模板编译成可执行的渲染函数。Vue的编译器会将模板解析成AST（抽象语法树），然后根据AST生成渲染函数，渲染函数会被用于渲染视图。在模板编译的过程中，会将模板中的指令和插值表达式解析成相应的渲染函数，从而实现了双向绑定。
监听器
Vue会对数据进行监听，当数据发生变化时，会触发相应的更新。Vue使用了发布-订阅模式来实现监听器。当对数据进行劫持时，会创建一个监听器Dep实例，用于管理所有的订阅者（Watcher）。每当数据被修改时，监听器会通知所有订阅者进行更新。
数据响应式
Vue通过将数据进行劫持和监听，实现了数据的响应式。当数据发生变化时，它可以自动更新到视图中，从而实现了双向绑定。有了数据劫持和观察者模式的支持，Vue可以追踪数据的变化，并将这些变化在合适的时候同步到视图中，保持数据和视图的一致性。

2年前 0条评论

worktile

Worktile官方账号

Vue的双向绑定原理是通过Object.defineProperty()方法来实现的。Object.defineProperty()方法是一个ES5的方法，用于定义对象的属性。Vue在实例化时会将所有的data属性通过该方法转化为getter和setter，以便实现数据劫持和双向绑定。

下面是Vue双向绑定的具体步骤:

在实例化Vue时，Vue会将传入的data对象递归地转化为可观察对象（Observable object）。Vue通过Object.defineProperty()方法将data对象的每个属性转化为getter和setter函数。这样，当访问或修改data属性时，Vue会捕获到这个访问或修改操作，并触发相应的更新。
当访问data属性时，Vue会触发getter函数。getter函数会收集依赖（watcher）用于后续的更新。Vue内部维护了一个全局的watcher栈（watcherStack），用于存储当前处理中的watcher。
当修改data属性时，Vue会触发setter函数。setter函数会更新属性的值，并通知之前收集的依赖进行更新。
在setter函数中，Vue会通过调用Dep.notify()方法来通知依赖进行更新。Dep是一个订阅者列表，用于存储订阅者（watcher）。每个属性都有一个对应的Dep对象，用于存储依赖于这个属性的watcher。
Dep.notify()方法会遍历订阅者列表，并逐个调用订阅者的update()方法进行更新。
在更新过程中，Vue会对修改后的值进行检测，如果是对象或数组则会递归调用observer()方法将其转化为可观察对象。
Vue的虚拟DOM会对更新进行 diff 算法优化，只对需要更新的部分进行实际更新。

通过以上步骤，Vue实现了双向绑定，即当data属性的值发生变化时，相关的视图也会自动更新；反过来，当视图发生变化时，data属性的值也会自动更新。这个机制使得编写Vue应用更加简洁和高效。

2年前 0条评论