Vue实现数据双向绑定的原理,双向数据绑定原理

　　本文主要介绍Vue2.0/3.0双向数据绑定的实现原理。通过示例代码非常详细的介绍，对你的学习或者工作有一定的参考价值。让我们和边肖一起学习。

Vue2.0/3.0 双向数据绑定的实现原理

　　双向数据绑定简单来说就是数据的变化可以让页面重新呈现。

　　Vue2.0 ES5的原理：

　　Object.defineProperty截获数据

　　简单案例

　　身体

　　名称：

　　span id=name/span

　　br /

　　输入类型=text id=inputName /

　　/body

　　改变输入框的值，使跨度中的值相应改变。数据的变化会使视图

　　脚本

　　让obj={

　　名称：“”

　　}

　　Object.defineProperty(obj， name ，{

　　get(){

　　返回this.name //注意错误演示。你不能用这个来形成一个无限循环。准备一个新值。

　　设置(值){

　　}

　　})

　　/脚本

　　正确的写作

　　脚本

　　让obj={

　　名称：“”

　　};

　　设new obj=JSON . parse(JSON . stringify(obj))；

　　Object.defineProperty(obj， name ，{

　　get() {

　　返回new obj . name；

　　设置(值){

　　if (val===newObj.name)返回；//增加判断优化的性能，判断新值是否与旧值相同，如果不同则返回重新赋值。

　　newObj.name=val

　　观察者()；

　　}

　　});

　　//重新赋值的方法。

　　函数观察者(){

　　spanname . innerhtml=new obj . name；//获取obj.name的值

　　input name . value=new obj . name；

　　}

　　观察者()；//一开始就执行一次

　　setTimeout(()={

　　Obj.name=大左；

　　}, 1000);

　　/脚本

　　执行逻辑

　　1.在1.setTimeout执行1秒钟后，修改数据会触发obj.name的set(val)

　　2.获取最新的值，并将其赋予newObj.name以执行obServer()方法

　　3.获取最新的赋值spanname . innerhtml=new obj . name；input name . value=new obj . name；

　　输入框的值随跨度框的值而变化。

　　inputName.oninput=function() {

　　obj . name=this . value；

　　};

　　这种操作在Vue中称为v-model。

Vue2.0不足之处

　　1.需要对原始数据进行克隆，否则会像上面说的那样是一个死循环。

　　2.如果要通过get和set来截取对象中的数据，就要逐个设置对象中的属性，而且要分开监听。如果不止一个，我们必须循环遍历它们并分别监听。

　　看anti-vue2.0里的数据

　　data(){

　　返回{

　　obj:{}

　　}

　　This.obj.name=XXX //这个操作不行，因为obj开头没有名字，所以没有监控，这都是上面第二项造成的。

　　好吧，让我们再看看。

3.0的特点以及好处

　　主要使用SE6中的代理。

　　脚本

　　设obj={ }；

　　obj=新代理(obj，{

　　获取(目标，道具){

　　console . log( D )；

　　返回目标[道具]；

　　设置(目标，属性，值){

　　console . log( Z )；

　　target[prop]=值；

　　}

　　});//在不指定属性的情况下监听整个对象，相当于监听对象中的所有属性，直接写出整个set get。

　　/脚本

　　1.get obj.name来触发get。这里没有名字，但是你可以去。因为没有值，所以返回undefine。

　　2.将其设置为name值以触发set。

　　3.再次获取obj.name以查看是否有值

　　所以，不管你现在在对象中有没有某个属性，因为你在这里监控的是整个对象，未来对象中的一切都会弥补2.0的不足。

　　1.不需要克隆。

　　2.不需要为整个对象单独设置每个对象的属性。还可以，干净卫生。

　　再次执行上述2.0操作。

　　脚本