Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)


Posted in Javascript onNovember 22, 2016

我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么?

数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值.

访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值.

这里介绍的重点是访问器属性,设置对象的访问器属性只能用es5的Object.defineProrerty()方法,如下例子:

var book={
_year:2004,
edition:1
};
Object.defineProperty(book,"year",{
get:function () {
return this._year
},
set:function (newValue) {
if(newValue>2004){
this._year=newValue;
this.edition+=newValue-2004;
}
}
});
book.year=2005;
alert(book.edition);//2
console.log(book.year);//2005

也就是当执行book.year=2005的时候其实是执行了year中的set方法,当执行book.year的时候执行了year的get方法;

var book={
_year:2004,
edition:1
};
Object.defineProperty(book,"year",{
get:function () {
console.log("year get")
return this._year
},
set:function (newValue) {
console.log("year set")
if(newValue>2004){
this._year=newValue;
this.edition+=newValue-2004;
}
}
});
book.year=2005;
alert(book.year);

控制台的提示是:

Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

这个原理就是vue双向数据绑定的原理,我们在vue组件中的data声明属性数据的时候其实在对象中的已经将这个属性封装成了访问器属性.

Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

每个属性都有get和set方法,在做双向的数据的控制都在get和set方法中,因为无论你是在ready(2.0是mounted了)或是在view中改变值都会触发set方法,将新值复制进去,在重新在view中匹配值,当然你们有更复杂的控制操作,get方法着是让ready中获取的这个属性值一直保存最新值.

angular1的双向数据绑定是脏数据监测,简单点说就是监测新值和旧值有没有变化,这种方式就要定时监测了咯.两种性能的消耗感觉不在一个层次上的啊.

就好比用html5 Sockets做后台主动消息推送前端和用js定时器每个5秒发送请求到后台捕获消息的性能差距一样.

还有之前写的js面向对象分层的思想其实也可以用在vue项目中,以前我一直以为vue的data层其实就是个摆设,但在api发现computed属性之后data层完全可以实现发送ajax取数功能,没必要在全都放到ready(2.0是mounted了)里面,这个ready(2.0是mounted了)可以只负责数据格式出来,或者控制页面的动态效果而已.这js的结构就像后台MVC那样层次功能分明清晰.这也只是我突然想到的思路还没真正应用到实际项目中,只是给在用vue的朋友提供个思路.

import data from '../assets/js/data'
export default{
data(){
return{
menu:data.menu,
inde:"",
row:"",
clomu:""
}
},
computed:{
isfull:function () {
alert(111);
return 11;
}
},
mounted(){
},
methods:{
domclick:function (i) {
if(this.inde===i){
this.inde="";
}else {
this.inde = i;
}
},
subclick:function (i,o) {
this.row=i;
this.clomu=o;
}
}
}

以上所述是小编给大家介绍的Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
微信小程序支付前端源码
Aug 29 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 #Javascript
基于js实现checkbox批量选中操作
Nov 22 #Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 #Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 #Javascript
详解Js模板引擎(TrimPath)
Nov 22 #Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 #Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 #Javascript
You might like
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
微信支付开发交易通知实例
2016/07/12 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
DIV菜单层实现代码
2010/11/19 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
pytyon 带有重复的全排列
2013/08/13 Python
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
汽车专业人才自我鉴定范文
2013/12/29 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
闭幕式主持词
2014/04/02 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
投诉信范文
2015/07/02 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis