vue双向绑定简要分析


Posted in Javascript onMarch 23, 2017

Vue是当前很火的一款MVVM的轻量级框架,它是以数据驱动和组件化的思想构建的。因为它提供了简洁易于理解的api,使得我们很容易上手。

Vue与MVVM 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。Vue以数据为驱动,将自身的Dom元素与数据进行绑定,一旦创建绑定,Dom和数据保持同步。

vue双向绑定简要分析

其中ViewModel是Vue的核心,它是Vue的一个实例,作用于某个HTML元素上,可以是body也可以是某个id所指代的元素。双向绑定主流双向数据绑定实现原理

脏值检测 : 这是AngularJS实现双向数据绑定的方式。 原理是 当数据进行变更的时候对所有Model和View的绑定关系进行一次检查,识别是否有数据进行了变更,如果有变化则进行处理,由于可能进一步引发其他数据的改变,会再次循环这个过程,知道没有数据的变化之后。发送数据到视图重新渲染。 可想而知,这样的方式性能不高。

数据劫持: Vue采用的是 ES5的 Object,defineProperty() 方法,使用getter/setter监测对数据的操作,从而通知绑定是视图进行更新。 由于是在不同是数据上进行触发,可以精确的更新绑定的视图,而不是对所有的数据进行检测。

vue双向绑定简要分析

Vue是通过数据劫持的方式进行双向数据绑定的,最核心的方法就是 Object.defineProperty来实现对数据的劫持,检测数据的变化。
双向绑定的实现分为三个步骤:
1.实现一个数据监听器,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者。
2.实现一个指令解析器,对每个元素的节点的指令进行解析。根据指令模板替换数据,以及绑定相应的更新函数。
3.实现一个观察者,能够订阅并收到每个属性变化的通知,执行指令绑定的相应回调函数,从而更新视图。

实现双向数据绑定核心代码:

vue双向绑定简要分析
vue双向绑定简要分析 

Dep类是一个订阅者类, 它具有一个订阅者数组与当前属性对应。关联当前数据和所有的 watcher 的依赖关系。
Dep.target是一个暴露出来的全局属性,暂存Watcher, 再添加完之后就会释放。
而在set中如果发现值的变换则通知所有订阅者(watcher)更新视图。

举例

vue双向绑定简要分析 

如果你对于Vue有一定了解的话,那么实现这个效果并不难。

<div id="demo">
 <p>{{message}}</p>
 <input type="text" v-model="message"/>
</div>

var App = new Vue({ 
 el: "#demo",
 data: { 
  message: 'Hello,World!'
 }
})

如果你想说我用jquery也可以实现,的确是这样:

<div id="box">
   <p class="text"></p>
   <input type="text" id="inputText">
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">
    $("#inputText").on("input", function() {
      var value = $(this).val() 
      $('.text').text(value)
    })
   </script>

这么来形容吧:jquery开发项目好比是老式的纺织机,而用Vue+Webpack开发好比是现代纺织工厂。区别就是一个上手容易,一个在生产效率,多成员协同,管理等方面却是质的飞跃。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 #Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 #jQuery
vue.js实现含搜索的多种复选框(附源码)
Mar 23 #Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 #Javascript
JS实现两周内自动登录功能
Mar 23 #Javascript
面试常见的js算法题
Mar 23 #Javascript
Vue.Js中的$watch()方法总结
Mar 23 #Javascript
You might like
php 远程图片保存到本地的函数类
2008/12/08 PHP
PHP入门学习笔记之一
2010/10/12 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python非递归全排列实现方法
2017/04/10 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
python 实现兔子生兔子示例
2019/11/21 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Python中qutip用法示例详解
2020/10/02 Python
Django中使用Celery的方法步骤
2020/12/07 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
服装采购员岗位职责
2014/03/15 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
共青团员自我评价范文
2014/09/14 职场文书
超市员工辞职信范文
2015/05/12 职场文书
致接力运动员加油稿
2015/07/21 职场文书
银行岗位培训心得体会
2016/01/09 职场文书