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

• Vue底层实现原理(数据响应式原理)?

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

2. 在数据初始化的时候把data里面的数据进行转换，因为Object.defineProperty里面有一个get和set方法 get返回被劫持的属性，set修改被劫持的属性。

3. 当data中的数据发生改变的时候，由于被劫持了 所以vue的内部是知道数据改变了，然后就调用对应的dep去通知观察者去更新视图。

• 观察者-订阅者模式？

1. 实现⼀个Observer（数据监听器） : Observer的核心是通过Object.defineProprtty()来监听数据的变动，这个函数内部可以定义setter和getter，每当数据发生变化，就会触发setter。这时候Observer就要通知订阅者。

2. 实现⼀个Watcher（订阅者） : 作为Observer和Compile之间通信的桥梁，主要做的事情是能够订阅并收到每个属性变动的通知，执⾏指令绑定的相应回调函数，从⽽更新视图；在自身实例化时往属性订阅器(dep)里面添加自己，自身必须有一个update()方法；待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调；

3. 实现⼀个Compile（指令解析器） : Compile主要做的事情是对每个元素节点的指令进⾏扫描和解析，将模板中变量替换成数据，然后初始化渲染页面视图，以及绑定相应的更新函数，添加鉴定数据的订阅者，一旦数据有变动，收到通知，更新试图。

• vue双向数据绑定原理？

1. 原理：value属性和Vue数据变量，双向绑定，互相影响；

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

3. 用 v-model 指令绑定了表单元素时，我们可以在视图直接获得数据，当视图发生改变时，数据也会进行更新；Vue3后通过proxy来完成；

最后

以上就是留胡子蓝天为你收集整理的vue底层实现原理？双向绑定原理？观察者-订阅者模式？的全部内容，希望文章能够帮你解决vue底层实现原理？双向绑定原理？观察者-订阅者模式？所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。