vue学习之计算属性和侦听器

vue 计算属性和侦听器

1. 计算属性是基于响应式依赖进行缓存，只在相关响应式依赖（被调用）发生改变时才会重新求值（同一函数定义为一个方法时，只有触发重新渲染时，才会再次执行函数）。

// 以下计算属性将不再更新，因为 `Date.now()` 不是响应式依赖：
computed: {
  now: function () {
    return Date.now()
  }
}

2. 计算属性默认只有 getter，在需要时自己提供一个 setter，当setter 被调用时，里面的内容也会被更新。

computed: {
 fullName: {
   // getter
   get: function () {
     return this.firstName + ' ' + this.lastName
   },
   // setter
   set: function (newValue) {
     var names = newValue.split(' ')
     this.firstName = names[0]
     this.lastName = names[names.length - 1]
   }
 }
}

3. 当需要在数据变化时执行异步或开销较大的操作时，使用watch。

// 在初始化时就执行（默认false）
immediate：true
// 深度监听（默认false）。消耗性能，优化：使用字符串形式监听
deep：true

// 注销watch（这种写法会导致内置溢出）
const app = new Vue({
  template: '<div id="root">{{text}}</div>',
  data: {
    text: 0
  },
  watch: {
    text(newVal, oldVal){
      console.log(`${newVal} : ${oldVal}`);
    }
  }
});
const unWatch = app.$watch('text', (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})
// 手动注销
unWatch();

4. 计算属性和侦听器属性定义的函数不能使用箭头函数，否则内部this会指向组件的父环境，比如window，导致调用失败。
5. 最后：计算属性依赖一个或多个数据（不限于当前vue实例），即模板中的某个值需要通过一个或多个数据计算得到时，就可以使用计算属性；另：计算属性的函数不接受参数。侦听器属性主要是监听某个值发生变化后，根据新值去进行逻辑处理。