Skip to content

Latest commit

 

History

History
25 lines (13 loc) · 1.98 KB

Vue.md

File metadata and controls

25 lines (13 loc) · 1.98 KB

Problem: vue的双向绑定的原理是什么?

Vue.js 中的双向绑定是指数据模型(model)和视图(view)之间的双向数据绑定。这意味着当数据模型发生改变时,视图会自动更新,反之,当视图发生改变时,数据模型也会跟着改变。

Vue.js 的双向数据绑定依赖两个主要概念:数据劫持(Data Interception)和发布-订阅模式(Publish-Subscribe pattern)。

数据劫持是通过 Object.defineProperty() 方法对数据对象进行改造,让我们可以监听到数据对象的访问和修改,从而在数据发生变化时通知订阅者。Object.defineProperty() 允许我们定义getter和setter,这样我们就可以在属性被访问或修改时执行一些代码。

发布-订阅模式是通过维护一个依赖列表,当数据发生变化时通知所有订阅者(依赖)。Vue.js 中,每个组件实例都有一个对应的 watcher实例,它可以收集该组件的所有依赖,当依赖的属性发生改变时,watcher 会通知组件重新渲染。

在 Vue.js 中,v-model 指令被用来实现双向绑定。例如,对于一个输入元素,v-model 会将输入元素的 value 属性和数据模型进行双向绑定。

Vue.js 双向绑定的大致过程如下:

  1. 在 Vue 实例化过程中,会对 data 中的属性执行 Object.defineProperty() 方法,转化为 getter 和 setter。

  2. 在编译模板时,会找到使用到这些属性的地方(例如使用 v-model 的输入框),并生成订阅者(Watcher)。

  3. 当数据变化时,会通过 getter 和 setter 捕获这些变化,并通知对应的订阅者(Watcher)。

  4. 订阅者接到通知后,会执行回调函数,这个回调函数可以是更新视图的操作,从而实现数据变化到视图的绑定。

  5. 同时,视图变化(如用户的输入)也会触发事件,这个事件将数据进行更新,从而实现视图到数据的绑定。

这就是 Vue.js 2.x 版本的双向绑定原理。