vue底层实现原理？双向绑定原理？观察者-订阅者模式？

秋绥冬禧.

已于 2023-11-14 16:34:51 修改

阅读量269

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-12-03 21:21:06 首次发布

本文链接：https://blog.csdn.net/m0_61663332/article/details/128166627

版权

19 篇文章 0 订阅

订阅专栏

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
在数据初始化的时候把data里面的数据进行转换，因为Object.defineProperty里面有一个get和set方法 get返回被劫持的属性，set修改被劫持的属性。
当data中的数据发生改变的时候，由于被劫持了 所以vue的内部是知道数据改变了，然后就调用对应的dep去通知观察者去更新视图。

实现⼀个Observer（数据监听器） : Observer的核心是通过Object.defineProprtty()来监听数据的变动，这个函数内部可以定义setter和getter，每当数据发生变化，就会触发setter。这时候Observer就要通知订阅者。
实现⼀个Watcher（订阅者） : 作为Observer和Compile之间通信的桥梁，主要做的事情是能够订阅并收到每个属性变动的通知，执⾏指令绑定的相应回调函数，从⽽更新视图；在自身实例化时往属性订阅器(dep)里面添加自己，自身必须有一个update()方法；待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调；
实现⼀个Compile（指令解析器） : Compile主要做的事情是对每个元素节点的指令进⾏扫描和解析，将模板中变量替换成数据，然后初始化渲染页面视图，以及绑定相应的更新函数，添加鉴定数据的订阅者，一旦数据有变动，收到通知，更新试图。

原理：value属性和Vue数据变量，双向绑定，互相影响；
Vue2.0的双向绑定原理：简单来讲就是用 v-model 指令绑定了表单元素时，可以在视图直接获得数据，当视图发生改变时，数据也会进行更新。复杂来讲原理就是Object.defineProperty定义新属性或修改原有的属性，里面定义了setter和getter方法，通过观察者模式(发布订阅模式)来监听数据的变化，从而做相应的逻辑处理；
用 v-model 指令绑定了表单元素时，我们可以在视图直接获得数据，当视图发生改变时，数据也会进行更新；Vue3后通过proxy来完成；