谈谈因Vue.js引发关于getter和setter的思考


Posted in Javascript onDecember 02, 2016

起因

当我打印出Vue实例下的data对象里的属性时,发现了一个有趣的事情:

谈谈因Vue.js引发关于getter和setter的思考

它的每个属性都有两个相对应的getset方法,我觉的这是多此一举的,于是去网上查了查Vue双向绑定的实现原理,才发现它和Angular.js双向绑定的实现原理完全不同,Angular是用的数据脏检测,当Model发生变化,会检测所有视图是否绑定了相关数据,再更改视图。而Vue使用的发布订阅模式,是点对点的绑定数据。

Vue的数据绑定只有两个步骤,compile=>link

我一直在想,vue是通过什么去监听用户对Model的修改,直到我发现Vue的data里,每个属性都有setget属性,我才明白过来。

在平时,我们创建一个对象,并修改它的属性,是这样的:

var obj = {
  val:99
 }
 obj.val = 100;
 console.log(obj.val)//100

没有任何问题,但是如果要你去监测,当我修改了这个对象的属性时,要去做一些事,你会怎么做?

相关思考

这就要用到gettersetter了。

假设我现在要给一个码农对象添加一个name属性,而且每次更新name属性时,我要去完成一些事,我们可以这样做:

var Coder = function() {
  var that = this;
  return {
   get name(){
    if(that.name){
     return that.name
    }
    return '你还没有取名'
   },
   set name(val){
    console.log('你把名字修成了'+val)
    that.name = val
   }
  }
 }
 var isMe = new Coder()
 console.log(isMe.name)
 isMe.name = '周神'
 console.log(isMe.name)
 console.log(isMe)

输出:

谈谈因Vue.js引发关于getter和setter的思考

你会发现这个对象和最上面的Vue中的data对象,打印出来的效果是一样的,都拥有getset属性。

我们来一步步分析下上面的代码,很有趣。

我们先创建一个对象字面量:

var Coder = function() {...}

再把this缓存一下:

var that = this;

接下来是最重要的,我们return了一个对象回去:

{

get name(){...},


set name(val){...}

}

顾名思义,get为取值,set为赋值,正常情况下,我们取值和赋值是用obj.prop的方式,但是这样做有一个问题,我如何知道对象的值改变了?所以就轮到set登场了。

你可以把getset理解为function,当然,只是可以这么理解,这是完全不一样的两个东西。

接下来创建一个码农的实例,isMe;此时,isMe是没有name属性的,当我们调用isMe.name时,我们会进入到get name(){...}中,先判断isMe是否有name属性,答案是否定的,那麽就添加一个name属性,并给它赋值:"你还没有取名";如果有name属性,那就返回name属性。

看到这里你一定知道get怎么使用了,对,你可以把get看成一个取值的函数,函数的返回值就是它拿到的值。

我感觉比较重要的是set属性,当我给实例赋值:

isMe.name="周神"

此时,会进入set name(val){...};形参val就是我赋给name属性的值,在这个函数里,我就可以做很多事了,比如双向绑定!因为这个值的每次改变都必须经过set,其他方式是改变不了它的,相当于一个万能的监听器。

还有另一种方法可以实现这个功能。

ES5的对象原型有两个新的属性__defineGetter____defineSetter__ ,专门用来给对象绑定get和set。

可以这样书写:

var Coder = function() {
 }
 Coder.prototype.__defineGetter__('name', function() {
  if (this.name) {
   return this.name
  }else{
   return '你还没有取名'
  }
 })
 Coder.prototype.__defineSetter__('name', function(val) {
  this.name = val
 })
 var isMe = new Coder()
 console.log(isMe.name)
 isMe.name = '周神'
 console.log(isMe.name)
 console.log(isMe)

效果是一样的,建议使用下面这种方式,因为是在原型上书写,所以可以继承和重用。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
jquery获取input type=text中的值的各种方式(总结)
Dec 02 #Javascript
vue.js入门(3)——详解组件通信
Dec 02 #Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 #Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 #Javascript
bootstrap使用validate实现简单校验功能
Dec 02 #Javascript
在网页中插入百度地图的步骤详解
Dec 02 #Javascript
PHP获取当前页面完整URL的方法
Dec 02 #Javascript
You might like
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php的hash算法介绍
2014/02/13 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
如何在PHP中读写文件
2020/09/07 PHP
JS基础之undefined与null的区别分析
2011/08/08 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
python中map、any、all函数用法分析
2015/04/21 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python 中@property的用法详解
2020/01/15 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
团委竞选演讲稿
2014/04/24 职场文书
项目转让协议书
2014/10/27 职场文书
单位租房协议书样本
2014/10/30 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
家长意见书
2015/06/04 职场文书
务工证明怎么写
2015/06/18 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫
Java的Object类的九种方法
2022/04/13 Java/Android