标签：简单   双向数据绑定   input   也会   定义   script   等于   val   会同   

面试回答

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中会同步显示相同的文字内容

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

标签：简单   双向数据绑定   input   也会   定义   script   等于   val   会同   

原文地址：https://www.cnblogs.com/luckyjiu9/p/13681693.html