vue双向数据绑定原理

你的名字 2022-01-31 16:59 260阅读 0赞

# **前言** #

> 这个解答可回答面试中 **① vue双向数据绑定原理** 和 **② vue响应原理**  问题

#    **基本原理** #

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

# **具体步骤：** #

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70][]**

### **第一步：** ###

需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

### **第二步：** ###

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

### 第三步： ###

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

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

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

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

### 第四步： ###

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

# **实现一下双向绑定** #

**① 数据劫持 obj.txt ,**

**② input 输入框绑定 onkeyup 事件，改变 ****obj.txt 的值，触发 setter , 从而引起 $("\#txt") 和 $("\#show-txt") 的值更新 **

<body>
        <div id="app">
            <input type="text" id="txt">
            <p id="show-txt"></p>
        </div>
        <script>
            var obj = {}
            Object.defineProperty(obj, 'txt', {
                get: function () {
                    return obj
                },
                set: function (newValue) {
                    document.getElementById('txt').value = newValue
                    document.getElementById('show-txt').innerHTML = newValue
                }
            })
            document.addEventListener('keyup', function (e) {
                obj.txt = e.target.value
            })
        </script>
    </body>

# **结束** #

如果文章对你有帮助，麻烦点赞哦！一起走码农花路~

![20190510130531760.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70]: /images/20220131/4335dd34196847bc8eeb6219e0c02a39.png
[20190510130531760.jpg]: /images/20220131/b32cb68652a244a89af919886ee5d1bd.png