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 相关文章推荐
javascript中的float运算精度实例分析
Aug 21 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 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加密解密的代码
2006/10/09 PHP
一个ubbcode的函数,速度很快.
2006/10/09 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Python对列表排序的方法实例分析
2015/05/16 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python写一个随机点名软件的实例
2019/11/28 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
python之随机数函数的实现示例
2020/12/30 Python
python 装饰器的基本使用
2021/01/13 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
Unix里面如何在后台运行程序
2016/10/14 面试题
公司行政专员岗位职责
2014/08/24 职场文书
体育部部长竞选稿
2015/11/21 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python