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 相关文章推荐
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 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 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php常用表单验证类用法实例
2015/06/18 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
js css后面所带参数含义介绍
2013/08/18 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
python中pass语句用法实例分析
2015/04/30 Python
简单介绍Python中的floor()方法
2015/05/15 Python
python交互式图形编程实例(二)
2017/11/17 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
最小二乘法及其python实现详解
2020/02/24 Python
python能否java成为主流语言吗
2020/06/22 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
营业经理岗位职责
2013/11/10 职场文书
大学军训感言
2014/01/10 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
中学生运动会口号
2014/06/07 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
考试作弊检讨书
2015/01/27 职场文书
保姆聘用合同
2015/09/21 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫