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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
让table变成exls的示例代码
Mar 24 Javascript
谈一谈javascript闭包
Jan 28 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
axios post提交formdata的实例
Mar 16 Javascript
Vue隐藏显示、只读实例代码
Jul 18 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
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
Python生成随机数的方法
2014/01/14 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
使用django自带的user做外键的方法
2020/11/30 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
函授大专自我鉴定
2013/11/01 职场文书
应征英语教师求职信
2013/11/27 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
《分一分》教学反思
2014/04/13 职场文书
《称象》教学反思
2014/04/25 职场文书
入党综合考察材料
2014/06/02 职场文书
公司离职证明样本
2014/09/13 职场文书
民主生活会剖析材料
2014/09/30 职场文书
班主任经验交流材料
2014/12/16 职场文书
事业单位聘任报告
2015/03/02 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
python脚本框架webpy模板赋值实现
2021/11/20 Python