vue双向数据绑定原理_vue compile 是如何和 obbser 连接起来的-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49614436/article/details/116275726

本文深入探讨Vue.js的响应式系统，通过数据监听器Observer、指令解析器Compile和订阅者Watcher，阐述如何实现数据变化到视图更新的双向绑定。讲解了如何使用Object.defineProperty()设置setter和getter来监听数据变化，以及在文本框输入和视图更新间的交互实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

1、实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、MVVM入口函数，整合以上三者

具体步骤：

1.需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter，这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

2.compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

3.Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是：

① 在自身实例化时往属性订阅器(dep)里面添加自己

② 自身必须有一个 update() 方法

③ 待属性变动 dep.notice() 通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。

4.MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过Observer来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。

先简单的实现一个js的双向数据绑定来熟悉一下Object.defineProperty()方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="in" />
    输入的值为：<span id="out"></span>
</body>
<script>
    var int = document.getElementById('in');
    var out = document.getElementById('out');
    var obj = {};
    Object.defineProperty(obj, 'msg', {
        enumerable: true,
        configurable: true,
        set(newVal) {
            out.innerHTML = newVal;
        }
    })
    int.addEventListener('input', function (e) {
        obj.msg = e.target.value;
    })
</script>

</html>

这样我们就能实现js的双向数据绑定,随着文本框输入文字的变化，span中会同步显示相同的文字内容；这样就实现了 model => view 以及 view => model 的双向绑定。
通过给in输入框添加事件监听input来触发obj对象的set方法，而set再修改了访问器属性的同时，也修改了dom样式，改变了span标签内的文本。