记录vue中的watch

vue中watch的学习总结

对于vue中的watch，以前写项目的时候没有很多重视（因为之前太菜了，都用不到太多），到了公司搞项目才系统的接触和学习一些，记录一下

watch的作用

watch是vue内部提供的一个用于侦听功能的更通用的方法，其用来响应数据的变化，通过特定的数据变化驱动一些操作。简单来说就是当你需要监听某个数据的变化时，它就是很好的选择。

watch和computed的区别，

• 功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
• 是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
• 是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return
• watch擅长处理的场景：一个数据影响多个数据 -------搜索框。
• computed擅长处理的场景：一个数据受多个数据影响--------购物车商品结算

watch的用法

借用vue官方文档中的写法

 { [key: string]: string | Function | Object | Array }

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。
具体情况如下：

watch: {
    '要监听的对象': {
      handler(newName, oldName) {
      console.log(newName)
      console.log(oldName)
      },
      //固定格式，可以得到新的数据newName和旧的数据oldName
      deep: true,
      //deep属性是深度监听，主要用于数组，对象等
      immediate: true
      //immediate是立即处理 进入页面就触发
    }
  }

当然,watch的格式不一定需要这么复杂，像下面的格式都是可以的，灵活运用，其内核在于监听变化

  watch: {
      变量(newName, oldName) {
      console.log(newName)
      console.log(oldName)
      }
      //可以得到新的数据newName和旧的数据oldName
  }

一些注意事项

我在完成实习项目的时候，有个需求是这个组件需要监听父组件传来的数据，又要把最后得到的数据传回到父组件，我耿直的加了一个判断条件就直接跑代码了，结果就是死循环。
其原理是watch先监听到父级传来的数据，然后我在input框内加了一些东西，这时候他返回给父级，然后又会监听到父级的数据，从而陷入循环。v-model时候需要多多注意，记得加条件结束监听。

最后有啥不对的地方欢迎大佬们指正