【手撸vue源码】深入响应式原理

ゝ一纸荒年。 2023-02-26 09:25 49阅读 0赞

## 目标 ##

> 了解Vue内在的响应式原理  
> 用原生js实现Vue响应式效果

## 写在前面 ##

写在前面：最近对vue 也算是情有独钟（毕竟还要靠吃饭），发现vue 真的魅力无穷，底层运用原生js实现了那么多令人舒适的交互效果。看了几天官网（[https://cn.vuejs.org/][https_cn.vuejs.org]），对响应式原理也算是有点头绪。本文用原生js 实现vue的响应式效果。

## MVVM响应式原理 ##

**之前的理解**：m（model）数据层，vue的数据层，都放在data里面；v（view）视图层，及我们所见的HTML页面；vm（view-model）控制器，将数据层与视图层建立联系（vue实例）。联系后，`数据改变驱动视图，视图改变影响数据`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]  
**现在的理解**：vue 采用数据劫持配合发布者-订阅者(观察者)模式的方式，通过**Object.defineProperty()**来劫持各个属性的 setter 和 getter，在数据变动时，发布消息给依赖收集器，去通知观察者，执行对用的回调函数，实现更新视图。

## 实现过程 ##

##### 1. 实现的效果预览 #####

代码示例：

<div id="app">
            <h1>{ { myInfo.name}}-----{ { myInfo.age}}</h1>
            <div>{ { msg}}</div>
            <div v-text="msg"></div>
            <div v-text="myInfo.name"></div>
            <div v-html="msg1"></div>
            <div v-bind:class="my_style">奥利给</div>
            <div :class="second_style">加油！铁汁</div>
            <input type="text" v-model="msg">
            <button v-on:click="handle1">事件(on)</button>
            <button @click="handle1">事件(@)</button>
        </div>
        <script src="./Observer.js"></script>
        <script src="./mvvm.js"></script>
        <script>
            var vm = new Mvvm({ 
                el: '#app',
                data: { 
                    myInfo: { 
                        name: '靓仔',
                        age: 18
                    },
                    msg: '一起学vue莫罗',
                    msg1: '<h2>11111</h2>',
                    my_style: 'my_style',
                    second_style: 'second_style'
                },
                methods: { 
                    handle1() { 
                        console.log(this)
                        console.log(this.msg)
                    }
                }
            })
        </script>

效果：  
![在这里插入图片描述][20200715111214740.gif]

##### 2. 实现的原理 #####

`Mvvm`作为绑定的`入口`，整合了 `Observer、Compile、Watcher`三者，通过`Observer 来监听model 数据变化`，通过 `Compile 来解析编译模板`。最终利用`Watcher 搭起 Observer 、Compile 之间的桥梁`。实现数据变化=>视图更新；视图交互变化=>数据model 变更的`双向绑定效果`。

##### 3. Compile解析编译模板 #####

此处注释清晰，简述略

##### 4. Observer 劫持监听数据 #####

注释清晰

class Watcher { 
        constructor(vm, expr, cb) { 
            this.vm = vm;
            this.expr = expr;
            this.cb = cb;
            this.oldVal = this.getOldVal()
        }
        getOldVal() { 
            //# 给观察者挂载
            Dep.target = this;
            const oldVal = compileUtil.getVal(this.expr, this.vm);
            //# 得到值后销毁
            Dep.target = null;
            return oldVal;
        }
        update() { 
            const newVal = compileUtil.getVal(this.expr, this.vm);
            if (newVal !== this.oldVal) { 
                this.cb(newVal)
            }
        }
    }
    
    class Dep {  //数据依赖器
        constructor() { 
            this.subs = []
        }
        addSub(watcher) {  //# 收集所有观察者
            this.subs.push(watcher)
        }
        notify() {  //# 通知观察者去更新
            this.subs.forEach(w => w.update())
        }
    }
    
    //# 挟持属性
    class Observer { 
        constructor(data) { 
            this.observer(data);
        }
        observer(data) { 
            if (data && typeof data === 'object') { 
                Object.keys(data).forEach(key => { 
                    this.defineReactive(data, key, data[key])
                })
            }
        }
    
        defineReactive(obj, key, value) { 
            const dep = new Dep();
            // 递归遍历（拿到所有的属性及值）
            this.observer(value)
            Object.defineProperty(obj, key, { 
                enumerable: true, //是否可遍历属性
                configurable: true, //是否可修改此属性
                get() { 
                    //# 订阅数据变化时，往Dep中添加观察者
                    Dep.target && dep.addSub(Dep.target);
                    return value;
                },
                set: (newVal) => { 
                    // 回调，防止只能操作一次
                    this.observer(newVal);
                    if (newVal !== value) { 
                        value = newVal;
                    }
                    //# 告诉Dep通知变化
                    dep.notify();
                }
            })
        }
    }

##### 注意点 #####

1.  订阅数据时，何时绑定watcher（解析指令渲染数据时，就要绑定watcher）
2.  Dep何时与Observer 关联，把watcher 添加进去 （在劫持监听所有属性时，创建Dep 添加对应的watcher）
3.  当修改数据时：（走到 `Object.defineProperty() 的set`中去,监听到数据变化，然后更改；更改后调用 `notify() 去通知`观察者；拿到对应的观察者，去`更新对应的函数update()`；新值与旧值对比，若不同执行`回调函数 this.cb(newVal)`更新视图）

[https_cn.vuejs.org]: https://cn.vuejs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]: /images/20230209/1c6fd6ab28244f3bbd47d1aadc6416c4.png
[20200715111214740.gif]: /images/20230209/ca341d1f7aef4e7d8eba61b6def69a2d.png