Vue的双向数据绑定原理（极简版）

面试回答

vue.js是采用数据劫持结合,发布订阅的模式,利用object.definePropety()的settr和getter,在数据发生改变时第一时间通知订阅者,从而触发相应的监听回调来渲染视图.也就是说数据和视图同步,数据改变视图也会改变,当然视图改变数据也会改变

核心

双向数据绑定的核心,主要是object.definePropty()方法

object.definePropty()方法

所以我这里要说一下object.definePropty()方法
object.definePropty()由三个参数
1.obj 要定义的对象
2.prop 要定义或者修改的属性
3.descriptor 具体的改变方法
简单来说就是,用这个方法来定义一值,当调用时我们使用了他里面的get方法,当赋值时我们又使用了里面的set方法

实现一个简单的双向数据绑定的大概流程就是,真正的双向数据绑定也比这个麻烦的多
一个input框 一个span 要实现的就是 在input框输入内容 span跟着改变
首先我们要先赋予val一个初始值,然后使用object.definePropty()来定义要修改的val这里用到了get,然后给val赋值修改后的内容这里用到了set,然后让val的值等于input 让span的值等于val,这样当你在input输入内容时,span也会同步相同的内容
2.先赋予val一个初始值
3.使用object.definePropty()来定义要修改的对象定义时用到了get
4.然后给val定义修改后的内容 这里赋值使用set
5.然后让文本框的内容等于val,让span的内容等于val
6.当在文本框输入内容时,让对象里你定义的val等于文本框的值
这样随着文本框输入文字的变化，span中会同步显示相同的文字内容

one

vue.js是采用数据劫持结合发布者-订阅者的方式,通过object.defineProperty()来劫持各个属性的setter和getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图,
具体步骤:
第一步,我们首先需要给observer数据对象进行递归遍历,包括子属性对象的属性，都加上setter和getter,这样当我们给对象某个值赋值,会触发setter,那么就会监听到数据.
第二步:compile解析模板指令,将模板的所有变量转换为数据,然后初始化页面视图,将每个指令对应的节点绑定更新函数,添加监听订阅者,一但数据发生改变,收到通知,改变视图
第三步:watcher订阅者是observer和Complie之间通信的桥梁,主要做的有:
第四步:mvvm作为数据绑定的入口,整合observe,Comple和Watcher三者,observe,来监听自己的model数据变化,Comple来解析模板指令,Watcher用来搭起observe和Cmplie之间通信的桥梁
达到数据变化-视图更新,视图交互变化,数据model变更双向绑定效果