vue计算属性和侦听器总结

基础例子

<p> {{ reversedMessage }} </p>

computed: {
    reversedMessage: function () {
        return this.message.split('').reverse().join('')
    }
}
           

• reversedMessage就是一个计算属性
• resersedMessage的值始终取决于data： this.message

• vue中computed的属性可是看成和data一样，可以读取和设值，所以计算属性可以分为getter和setter,一般情况下是没有setter的，计算属性属性就是只读属性，getter是默认的省略的，至于setter下面会提到触发的情况

  computed: {

  reversedMessage: function () {

  getter(){

  returnthis.message.split(”).reverse().join(”)

  }

  }

  }

计算属性getter触发时间

• 并不是说我们更改了getter里使用的变量，就会出发computed的更新，这个的前提是computed里的值必须要在魔板中使用了才行，就是说比如上面，我们不调用{{ reversedMessage }}，是不触发getter的

计算属性setter

• 比如我们在input上v-model=”reversedMessage”的时候，这里我们去修改文本框的内容的时候就会触发setter

计算属性缓存vs方法

• 单个的计算属性和方法最终的效果可能是一样的，但是不同的是，计算属性是基于他们的依赖进行缓存的，就是在message发生改变，自动立即返回之前的计算结果，不必再次执行函数，而函数需要重新执行，个人感觉和计算属性如同单双向数据绑定

计算属性vs侦听属性

• vue提供了一个通用的方法来观察响应vue实例上的数据变动：侦听属性。watch,watch是命令式的回调，而这个时候用计算属性就比watch好

  //监听两个输入框去组合成姓名数据

  watch: {

  firstName: function (val) {

  this.fullName = val + ’ ’ + this.lastName

  },

  lastName: function (val) {

  this.fullName = this.firstName + ’ ’ + val

  }

  }

  //计算属性，绑定两个数据，自动返回

  computed: {

  fullName: function () {

  return this.firstName + ’ ’ + this.lastName

  }

  }

侦听器

• 计算属性在大多情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作的时候，这个方法是最有用的
• 注意 watch配置了deep的时候操作多的时候会影响性能

结语：不要老想着从技术的角度去解决问题，要试着从设计上从方式上去规避问题。