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

转载  更新时间:2016年12月02日 09:04:31   投稿:daisy   我要评论

最近因为公司的新项目决定使用Vue.js来做,但在使用的过程中发现了一个有趣的事情,因为发现的这个事情展开了一些对于getter和setter的思考,具体是什么下面通过这篇文章来一起看看吧,有需要的朋友们可以参考学习。

起因

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

它的每个属性都有两个相对应的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中的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)

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

总结

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

相关文章

  • axios拦截设置和错误处理方法

    axios拦截设置和错误处理方法

    下面小编就为大家分享一篇axios拦截设置和错误处理方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue.js学习之过滤器详解

    Vue.js学习之过滤器详解

    过滤器,本质上就是一个函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。下面这篇文章主要给大家介绍了Vue.js中过滤器的相关资料,需要的朋友可以参考借鉴,一起来看看吧。
    2017-01-01
  • 利用vue + koa2 + mockjs模拟数据的方法教程

    利用vue + koa2 + mockjs模拟数据的方法教程

    这篇文章主要给大家介绍了关于利用vue + koa2 + mockjs模拟数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • vue.js element-ui tree树形控件改iview的方法

    vue.js element-ui tree树形控件改iview的方法

    这篇文章主要介绍了vue.js element-ui tree树形控件改iview的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • VueRouter导航守卫用法详解

    VueRouter导航守卫用法详解

    这篇文章主要介绍了VueRouter导航守卫的详细用法以及分类介绍,有兴趣的朋友学习参考下吧。
    2017-12-12
  • vuejs响应用户事件(如点击事件)

    vuejs响应用户事件(如点击事件)

    本篇文章主要介绍了vuejs响应用户事件(如点击),通过vuejs响应用户事件的技巧,具有一定的参考价值,有兴趣的小伙伴们可以参考一下。
    2017-03-03
  • Vue 2.0入门基础知识之内部指令详解

    Vue 2.0入门基础知识之内部指令详解

    这篇文章主要介绍了Vue 2.0入门基础知识之内部指令知识,非常不错,具有参考借鉴价值 ,需要的朋友可以参考下
    2017-10-10
  • 基于vue cli重构多页面脚手架过程详解

    基于vue cli重构多页面脚手架过程详解

    本文分步骤给大家介绍了基于vue cli重构多页面脚手架过程,非常不错,具有参考借鉴价值,需要的朋友参考下
    2018-01-01
  • Vue0.1的过滤代码如何添加到Vue2.0直接使用

    Vue0.1的过滤代码如何添加到Vue2.0直接使用

    Vue0.1的过滤代码如何添加到Vue2.0直接使用,这篇文章主要介绍了过滤代码添加到Vue2.0用的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • vue实现表格数据的增删改查

    vue实现表格数据的增删改查

    这篇文章主要为大家详细介绍了vue实现表格数据的增删改查,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论