Vue-watch侦听器和计算属性

watch侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

使用方法：

 const vm=new Vue({
    el:"#app",
    data:{
      username:'zs'
    },
    watch:{
      // 定义侦听器第一种：函数格式的监听器，监视谁就用谁定义监听器的名字
     username(newName){
         console.log(newName)
       }
      // 定义侦听器第二种：对象格式的监听器
      username:{
        // 是一个函数，监听到值得变化后要触发的函数，handler函数时必须要有的
        handler:function(newName,oldName){
          console.log('监听到')
        },
        // immediate和deep是两个可选值
        // immediate 表示是否已进入页面 就立即触发这个监听器
        immediate:true,
        //如果监听的是个对象，deep可以监听对象属性值的变化
        deep:true
      }
    }
  })

如果在定义侦听器的时候，必须要添加immediate或deep选项，则直接把侦听器定义为【函数格式】

只想监听对象中单个属性的变化：

用引号加上想要监听的对象的属性就可以实现

---

计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用。提高项目性能。

★★★注意点：

1. 计算属性在定义时候 需要被定义成函数
2. 必须return一个计算结果，否则就是无效的计算属性
3. 计算属性会缓存上一次的计算结果
4. 只有计算属性中依赖的数据项发生变化的时候才会重新对计算属性求值
5. 计算属性函数不需要调用，直接使用即可

使用方法：

结果：

案例：

v-model：双向绑定 详情跳转