如何实现vue双向绑定

　　介绍

这篇文章将为大家详细讲解有关如何实现vue双向绑定,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

当今前端天下以角,反应,vue三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋。

所以我们要时刻保持好奇心,拥抱变化,只有在不断的变化中你才能利于不败之地,保守只能等死。

最近在学习vue,一直以来对它的双向绑定只能算了解并不深入,最近几天打算深入学习下,通过几天的学习查阅资料,算是对它的原理有所认识,所以自己动手写了一个双向绑定的例子,下面我们一步步看如何实现的。

看完这篇文章之后我相信你会对vue的双向绑定原理有一个清楚的认识。也能帮助我们更好的认识vue。

<强>先看效果图

//代码: 　　& lt; div id=癮pp"祝辞 　　& lt;输入v模型=皀ame"类型=皌ext"比; 　　& lt; h2>{{名称}}& lt;/h2> 　　& lt;/div> 　　& lt;脚本src=啊?js/observer.js"祝辞& lt;/script> 　　& lt;脚本src=啊?js/watcher.js"祝辞& lt;/script> 　　& lt;脚本src=啊?js/compile.js"祝辞& lt;/script> 　　& lt;脚本src=啊?js/index.js"祝辞& lt;/script> 　　& lt; script> 　　const vm=new Mvue ({ 　　埃尔:“# app" 　　数据:{ 　　姓名:“我是摩登“; 　　} 　　}）; 　　& lt;/script>

数据绑定

在正式开始之前我们先来说说数据绑定的事情,数据绑定我的理解就是让数据M(模型)展示到视图V(视图)上。我们常见的架构模式有MVC, MVP, MVVM模式,目前前端框架基本上都是采用MVVM模式实现双向绑定,Vue自然也不例外。但是各个框架实现双向绑定的方法略有所不同,目前大概有三种实现方式。

<李>

发布订阅模式

<李>

角的脏查机制

<李>

数据劫持

而Vue则采用的是数据劫持与发布订阅相结合的方式实现双向绑定,数据劫持主要通过<代码> Object.defineProperty>

Object.defineProperty

这篇文章我们不详细讨论Object.defineProperty的用法,我们主要看看它的存储属性获取与设置。我们来看看通过它设置的对象属性之后有何变化。

={var人 　　名称:“Modeng", 　　年龄:18 　　} 　　people.age;//18 　　人。年龄=20;

上述代码就是普通的获?设置对象的属性,看不到什么奇怪的变化。

var modeng={} 　　var年龄; 　　Object.defineProperty (modeng & # 39;年龄# 39;,{ 　　得到:函数(){ 　　console.log(“获取年龄“); 　　返回年龄; 　　}， 　　设置:函数(newVal) { 　　console.log(“设置年龄“); 　　年龄=newVal; 　　} 　　}）; 　　modeng。年龄=18; 　　console.log (modeng.age);

你会发现通过上述操作之后,我们访问年龄属性时会自动执行得到函数,设置年龄属性时,会自动执行设置函数,这就给我们的双向绑定提供了非常大的方便。

分析

我们知道MVVM模式在于数据与视图的保持同步,意思是说数据改变时会自动更新视图,视图发生变化时会更新数据。

所以我们需要做的就是如何检测到数据的变化然后通知我们去更新视图,如何检测到视图的变化然后去更新数据。检测视图这个比较简单,无非就是我们利用事件的监听即可。

那么如何才能知道数据属性发生变化呢?这个就是利用我们上面说到的Object.defineProperty当我们的属性发生变化时,它会自动触发组函数从而能够通知我们去更新视图。

实现

通过上面的描述与分析我们知道Vue是通过数据劫持结合发布订阅模式来实现双向绑定的。我们也知道数据劫持是通过Object.defineProperty 　　方法,当我们知道这些之后,我们就需要一个监听器观察者来监听属性的变化。得知属性发生变化之后我们需要一个观察者 　　订阅者来更新视图,我们还需要一个编译指令解析器,用于解析我们的节点元素的指令与初始化视图,所以我们需要如下:

<李>

观察者监听器:用来监听属性的变化通知订阅者

<李>

观察家订阅者:收到属性的变化,然后更新视图

<李>

编译解析器:解析指令,初始化模版,绑定订阅者

顺着这条思路我们一步一步去实现。

监听器观察者

监听器的作用就是去监听数据的每一个属性,我们上面也说了使用

如何实现vue双向绑定