解析vue双向绑定原理

2020-08-05 本文已影响0人若年

原文地址：https://juejin.im/post/6844904185373130759

响应式数据/双向绑定原理

vue的响应式数据/双向绑定主要是指：数据变化更新视图，视图变化更新数据。将data中的js对象做遍历，利用Object.defineProperty将data中的数据全部转换成getter/setter，每个组件都对应一个Watcher实例，收集数据中的依赖，当数据发生改变触发setter时，会通知对应的组件，组件通过虚拟DOMdiff算法再做改变，如官网的流程图所示：

image.png

监听器observer

对data里面的数据对象做遍历（子对象存在时做递归遍历），利用Object.defineProperty将data中的数据全部转换成getter/setter，当某个属性和值发生改变时就能触发setter，就会监听到数据的变化。例如：

<body>
    <div id="app"></div>
</body>
<script>
    const obj = { name: 'vue' }
    Object.defineProperty(obj, 'name', {
        get() {
            return document.getElementById('app').innerHTML
        },
        set(val) {
            console.log('name发生了变化')
            return document.getElementById('app').innerHTML = val
        }
    })
    setTimeout(()=>{
        obj.name = '响应化/双向绑定'
    },1000)
</script>

可以看到1s后div内容填充了'响应化/双向绑定'，控制台也打印出了'name发生了变化'。

模板解析器Compile

模板解析器主要通过遍历模板，查看都使用了哪些变量、指令，为数据添加订阅者Watcher，一旦数据发生了改变，调用更新函数更新。

订阅者Watcher

Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新——这是一个典型的观察者模式.

订阅器Dep

订阅器采用发布-订阅设计模式，用来收集订阅者 Watcher，对监听器 Observer 和订阅者 Watcher 进行统一管理。