Vue计算属性和侦听器

一、计算属性 computed

作用：

1. 将复杂的表达式从视图模板中抽离出来，便于维护，提高阅读性。
2. 优化性能。用计算属性封装业务方法，用在指令上时，只有与其相关的声明式变量发生改变时才会重新计算。

特点：

• 计算属性要定义在computed中，本质上它是个函数。
• 计算属性可以当作响应式变量来使用，在js上可以用this访问
• 计算属性默认是get操作，因而可以用在指令上
• 计算属性与多个声明式变量相关时，任何一个声明式变量变化，计算属性都会重新计算。
• 计算属性还可以用在v-model上，由于v-model有set功能，所以计算属性要拆成get/set形式。

 computed: {
        // 只具有get功能的计算属性
        full () {
          // do something
          // 在更新阶段时，如果first和last不发生变化，其它任何声明式变量发生变化，full()都不会重新运算。
          return this.first.toUpperCase() + '-' + this.last.toUpperCase()
        },
        // 具有get、set功能的计算属性
        full2: {
          get() { return `${this.first} ${this.last}`},
          set(newVal) {
            const arr = newVal.split(' ')
            this.first = arr[0] || ''
            this.last = arr[1] || ''
          }
        },
      }
    })

总结：当指令上的表达式过于复杂或不得不用函数调用时，建议封装成计算属性。

二、侦听器 watch

作用： 用于监听响应式变量的变化，例如：data、vuex、计算属性……

注意：

1. watch对象中虽然放的是函数，但不能用this访问这些函数。但计算属性中可以用this访问。
2. 不要随意用箭头函数，当watch函数是箭头函数时，它的this就不是当前组件实例了，而是window。

监听谁，watch函数中就是谁，名字要一致。

watch: {
        // 监听count的变化，当count变化时它所对应的函数会执行
        count(newVal, oldVal) {
          // do something
          console.log('count新值', newVal)
          console.log('count旧值', oldVal)
        }
        })

还可以用handler去监听响应式变量的变化

watch: {
        // 监听cc这个计算属性的变化
        cc: {
          handler() { console.log('cc变化了') }
        }
        })

当我们要监听的响应式变量内部有多层嵌套时，需要用handler，且要加上deep:true。