vue中侦听器和计算属性的使用

watch侦听器

在vue中有一些操作总是在某一个值得改变后进行相应的操作，这就需要进行动态的追踪该值得改变，并且进行相应的操作，这种情况下就需要使用侦听器watch。

普通用法

如果需要追踪的值知识简单的基础类型的改变，只需要使用watch的普通用法即可进行动态的监听属性的变化。

watch: {
    value() {
        // 在value变量改变后进行其他操作。
        this.render();
    }
}

深度侦听

当对于对象或者数组等复杂类型的监听时需要进行多层遍历进而判断是否变化，此时就需要使用watch的深度监听。

watch: {
    value: {
        handle() {
            // 在value变量改变后进行其他操作。
        },
        deep: true // 深度侦听
}
}

computed计算属性

简单运算

当模板中的表达式过于冗长的时候就需要考虑使用计算属性进行计算操作，以减少模板中表达式的长度，计算属性会动态的计算属性的值,对于计算属性计算的值需要返回一个值，不可以进行data中值得赋值操作。

computed: {
      value() {
           if (this.flag) {
                return 55;
          } else {
                return 20;
          }
        }
}

动态侦听

由于计算属性会动态计算相关值得操作，如上段代码中就是在flag变化的时候会动态的计算一遍然后将新的值赋值给value，所以有时候可以使用computed对于某一变量的动态计算和赋值。