Vue双向绑定原理以及原生JS实现

秒速五厘米 2023-07-15 11:16 74阅读 0赞

**前言**

Vue的数据双向绑定原理是面试中必问的一题。每当被问到Vue数据双向绑定原理的时候，大家可能都会脱口而出：**Vue内部通过`Object.defineProperty`方法属性拦截的方式，把`data`对象里每个数据的读写转化成`getter`/`setter`，当数据变化时通知视图更新**。虽然一句话把大概原理概括了，但是其内部的实现方式还是值得深究的。

**使用原生js实现一个vue的双向数据绑定。**

**    思路分析**

数据双向绑定，即主要是：数据变化更新视图，视图变化更新数据。如下图：

**       ****  ![format_png][]**

也就是说：

*  输入框内容变化时，data 中的数据同步变化。即 view => model 的变化。
 *  data 中的数据变化时，文本节点的内容同步变化。即 model => view 的变化。

要实现这两个过程，关键点在于数据变化如何更新视图，因为视图变化更新数据我们可以通过事件监听的方式来实现。所以我们着重讨论数据变化如何更新视图。

数据变化更新视图的关键点则在于我们如何知道数据发生了变化，只要知道数据在什么时候变了，那么问题就变得迎刃而解，我们只需在数据变化的时候去通知视图更新即可。

**开始实现**

前言中提到的`Object.defineProperty`，大家可能对这个属性的用法不是很了解。

MDN上是这么介绍的：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

首先，我们定义一个数据对象：

let car = {
               'brand':'BMW',        'price':3000}

我们定义了这个car的品牌brand是BMW,价格price是3000。现在我们可以通过car.brand和car.price直接读写这个car对应的属性值。但是，当这个car的属性被读取或修改时，我们并不知情。那么应该如何做才能够让car主动告诉我们，它的属性被修改了呢？

**完成了数据的'可观测'**

接下来，我们使用`Object.defineProperty()`

let car = {
               'brand':'BMW',        'price':3000}Object.defineProperty(car, 'price', {
               get(){
                   console.log('price属性被读取了')            return val        },        set(newVal){
                   console.log('price属性被修改了')            val = newVal        }})

通过`Object.defineProperty()`方法给`car`定义了一个`price`属性，并把这个属性的读和写分别使用`get()`和`set()`进行拦截，每当该属性进行读或写操作的时候就会出发`get()`和`set()`。如下图：

![format_png 1][]

可以看到，`car`已经可以主动告诉我们它的属性的读写情况了，这也意味着，这个`car`的数据对象已经是“可观测”的了。

为了把`car`的所有属性都变得可观测，我们可以编写如下两个函数：

/**     * 把一个对象的每一项都转化成可观测对象     * @param { Object } obj 对象     */    function observable (obj) {
               if (!obj || typeof obj !== 'object') {
                   return;        }        let keys = Object.keys(obj);        keys.forEach((key) =>{
                   defineReactive(obj,key,obj[key])        })        return obj;    }/**     * 使一个对象转化成可观测对象     * @param { Object } obj 对象     * @param { String } key 对象的key     * @param { Any } val 对象的某个key的值     */    function defineReactive (obj,key,val) {
               Object.defineProperty(obj, key, {
                   get(){
                       console.log(`${key}属性被读取了`);                return val;            },            set(newVal){
                       console.log(`${key}属性被修改了`);                val = newVal;            }        })    }

现在，我们就可以这样定义`car`:

let car = observable({
               'brand':'BMW',        'price':3000    })

`car`的两个属性都变得可观测了。

完成了数据的'可观测'，即我们知道了数据在什么时候被读或写了，那么，我们就可以在数据被读或写的时候通知那些依赖该数据的视图更新了，为了方便，我们需要先将所有依赖收集起来，一旦数据发生变化，就统一通知更新。其实，这就是典型的“发布订阅者”模式，数据变化为“发布者”，依赖对象为“订阅者”。

现在，我们需要创建一个依赖收集容器，也就是消息订阅器Dep，用来容纳所有的“订阅者”。订阅器Dep主要负责收集订阅者，然后当数据变化的时候后执行对应订阅者的更新函数。

创建消息订阅器Dep:

class Dep {
               constructor(){
                   this.subs = []        },        //增加订阅者        addSub(sub){
                   this.subs.push(sub);        },        //判断是否增加订阅者        depend () {
                   if (Dep.target) {
                       this.addSub(Dep.target)            }        },
            //通知订阅者更新        notify(){
                   this.subs.forEach((sub) =>{
       sub.update()            })        }    }Dep.target = null;

有了订阅器，再将`defineReactive`函数进行改造一下，向其植入订阅器：

从代码上看，我们设计了一个订阅器Dep类，该类里面定义了一些属性和方法，这里需要特别注意的是它有一个静态属性 `target`，这是一个全局唯一 的`Watcher`，这是一个非常巧妙的设计，因为在同一时间只能有一个全局的 `Watcher` 被计算，另外它的自身属性 `subs` 也是 `Watcher` 的数组。

我们将订阅器Dep添加订阅者的操作设计在`getter`里面，这是为了让`Watcher`初始化时进行触发，因此需要判断是否要添加订阅者。在`setter`函数里面，如果数据变化，就会去通知所有订阅者，订阅者们就会去执行对应的更新的函数。

到此，订阅器Dep设计完毕，接下来，我们设计订阅者Watcher.

订阅者`Watcher`在初始化的时候需要将自己添加进订阅器`Dep`中，那该如何添加呢？我们已经知道监听器`Observer`是在`get`函数执行了添加订阅者`Wather`的操作的，所以我们只要在订阅者`Watcher`初始化的时候出发对应的`get`函数去执行添加订阅者操作即可，那要如何触发`get`的函数，再简单不过了，只要获取对应的属性值就可以触发了，核心原因就是因为我们使用了`Object.defineProperty( )`进行数据监听。这里还有一个细节点需要处理，我们只要在订阅者`Watcher`初始化的时候才需要添加订阅者，所以需要做一个判断操作，因此可以在订阅器上做一下手脚：在`Dep.target`上缓存下订阅者，添加成功后再将其去掉就可以了。订阅者`Watcher`的实现如下：

class Watcher {
               constructor(vm,exp,cb){
                   this.vm = vm;            this.exp = exp;            this.cb = cb;            this.value = this.get();  // 将自己添加到订阅器的操作        },
            update(){
                   let value = this.vm.data[this.exp];            let oldVal = this.value;            if (value !== oldVal) {
                       this.value = value;                this.cb.call(this.vm, value, oldVal);            },        get(){
                   Dep.target = this;  // 缓存自己            let value = this.vm.data[this.exp]  // 强制执行监听器里的get函数            Dep.target = null;  // 释放自己            return value;        }    }

**过程分析：**

订阅者`Watcher` 是一个 类，在它的构造函数中，定义了一些属性：

*  **vm:**一个Vue的实例对象；
 *  **exp:**是`node`节点的`v-model`或`v-on：click`等指令的属性值。如`v-model="name"`，`exp`就是`name`;
 *  **cb:**是`Watcher`绑定的更新函数;

当我们去实例化一个渲染 `watcher` 的时候，首先进入 `watcher` 的构造函数逻辑，就会执行它的 `this.get()` 方法，进入 `get` 函数，首先会执行：

Dep.target = this;  // 缓存自己

实际上就是把 `Dep.target` 赋值为当前的渲染 `watcher` ,接着又执行了：

let value = this.vm.data[this.exp]  // 强制执行监听器里的get函数

在这个过程中会对 `vm` 上的数据访问，其实就是为了触发数据对象的`getter`。

每个对象值的 `getter`都持有一个 `dep`，在触发 `getter` 的时候会调用 `dep.depend()` 方法，也就会执行`this.addSub(Dep.target)`,即把当前的 `watcher` 订阅到这个数据持有的 `dep` 的 `subs` 中，这个目的是为后续数据变化时候能通知到哪些 `subs` 做准备。

这样实际上已经完成了一个依赖收集的过程。那么到这里就结束了吗？其实并没有，完成依赖收集后，还需要把 `Dep.target` 恢复成上一个状态，即：

Dep.target = null;  // 释放自己

因为当前`vm`的数据依赖收集已经完成，那么对应的渲染`Dep.target` 也需要改变。

而`update()`函数是用来当数据发生变化时调用`Watcher`自身的更新函数进行更新的操作。先通过`let value = this.vm.data[this.exp];`获取到最新的数据,然后将其与之前`get()`获得的旧数据进行比较，如果不一样，则调用更新函数`cb`进行更新。

至此，简单的订阅者`Watcher`设计完毕。

完成以上工作后，我们就可以来真正的测试了。

index.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">    <title>Document</title></head><body>    <h1 id="name"></h1><input type="text"><input type="button" value="改变data内容" onclick="changeInput()">    <script src="observer.js"></script><script src="watcher.js"></script><script>    function myVue (data, el, exp) {
               this.data = data;        observable(data);                      //将数据变的可观测        el.innerHTML = this.data[exp];           // 初始化模板数据的值        new Watcher(this, exp, function (value) {
                   el.innerHTML = value;        });        return this;    }
        var ele = document.querySelector('#name');    var input = document.querySelector('input');        var myVue = new myVue({
               name: 'hello world'    }, ele, 'name');    //改变输入框内容    input.oninput = function (e) {
               myVue.data.name = e.target.value    }//改变data内容    function changeInput(){
               myVue.data.name = "极致简文"        }</script></body></html>

效果：

![format_png 2][]

获取完整代码，请关注公众号’极致简文‘，后台回复 '**双向绑定源码**’；

![format_png 3][]

[format_png]: /images/20230528/c3648cfa142d4ac89d9540cfabbd841a.png
[format_png 1]: /images/20230528/e152b2a980844986b72d89163c1f365f.png
[format_png 2]: /images/20230528/706e2db3ed9f48dfb0117f26c8e89db7.png
[format_png 3]: /images/20230528/5001ae71139f4e1985415e82752427f6.png