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 相关文章推荐
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
JS搜狐面试题分析
Dec 16 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
layui清除radio的选中状态实例
Nov 14 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实现清除MySQL死连接的方法
2016/07/23 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
php post换行的方法
2020/02/03 PHP
javascript定义函数的方法
2010/12/06 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
复制粘贴功能的Python程序
2008/04/04 Python
python生成日历实例解析
2014/08/21 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
python如何在循环引用中管理内存
2018/03/20 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
汇科协同Java笔试题
2012/03/31 面试题
大学军训自我鉴定
2013/12/15 职场文书
技能竞赛活动方案
2014/02/21 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
授权委托书样本
2014/09/25 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
Pygame Draw绘图函数的具体使用
2021/11/17 Python
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
Python  lambda匿名函数和三元运算符
2022/04/19 Python