vue是怎么将数据绑定到组件的原理

发布网友 发布时间：2022-04-22 07:30

我来回答

共3个回答

热心网友 时间：2022-04-06 13:10

vue将数据绑定到组件的原理如下：

1、当实例化一个Vue构造函数，会执行 Vue 的 init 方法，在 init 方法中主要执行三部分内容，一是初始化环境变量，而是处理 Vue 组件数据，三是解析挂载组件。以上三部分内容构成了 Vue 的整个执行过程。

2、Vue 实现了一个 观察者-消费者(订阅者) 模式来实现数据驱动视图。通过设定对象属性的 setter/getter 方法来监听数据的变化，而每个属性的 setter 方法就是一个观察者， 当属性变化将会向订阅者发送消息，从而驱动视图更新。

3、Vue 的订阅者 watcher 实现在 /src/watchr.js 。构建一个 watcher 最重要的是 expOrFn 和 cb 两个参数，cb 是订阅者收到消息后需要执行的回调，一般来说这个回调都是视图指令的更新方法，从而达到视图的更新，但是这也不是必须的，订阅回调也可以是一个和任何无关的纯函数。一个订阅者最重要的是要知道自己订阅了什么，watcher 分析 expOrFn 的 getter 方法，从而间接获得订阅的对象属性。

4、Vue 双向数据绑定实现

数据与视图的绑定与同步，最终体现在对数据的读写处理过程中，也就是 Object.defineProperty() 定义的数据 set、get 函数中。Vue 中对于的函数为 defineReactive，在精简版实现中，我只保留了一些基本特性：

function defineReactive(obj, key, value) {
   var dep = new Dep()
   Object.defineProperty(obj, key, {
       enumerable: true,
       configurable: true,
       get: function reactiveGetter() {
           if (Dep.target) {
               dep.depend()
           }
           return value
       },
       set: function reactiveSetter(newVal) {
           if (value === newVal) {
               return
           } else {
               value = newVal
               dep.notify()
           }
       }
   })
}

在对数据进行读取时，如果当前有 Watcher（对数据的观察者吧，watcher 会负责将获取的新数据发送给视图），那将该 Watcher 绑定到当前的数据上（dep.depend()，dep 关联当前数据和所有的 watcher 的依赖关系），是一个检查并记录依赖的过程。而在对数据进行赋值时，如果数据发生改变，则通知所有的 watcher（借助 dep.notify()）。这样，即便是我们手动改变了数据，框架也能够自动将数据同步到视图。

热心网友 时间：2022-04-06 14:28

这里有我参照vue源码实现的简单的数据绑定的代码 网页链接

热心网友 时间：2022-04-06 16:02