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 backgroundImage控制
May 19 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 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
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
php汉字转拼音的示例
2014/02/27 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
php中rename函数用法分析
2014/11/15 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
python生成九宫格图片
2018/11/19 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
服务员岗位责任制
2014/02/11 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
酒店管理求职信
2014/06/09 职场文书
主持稿开场白
2015/06/01 职场文书
房屋产权证明书
2015/06/19 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS