2020-09-13 浅谈： Vue watch监听deep、immediate属性
Vue watch 用于监测数据变化，可以方便开发中对于数据的变化做出一些处理。关于deep、immdiate属性场景使用总结如 下，如有疏漏，烦请指正。
watch监听只有在数据变化时才会执行监听函数。父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，此时也需要执行watch监听函数。则需设置immediate：true.
需要监听复杂数据（对象）内部属性的变化时，设置deep属性。Vue会递归的侦听数据和属性的变化（性能消耗较大）。也就是给所有数据和属性添加handler执行函数。
监听notes对象，未添加deep:
执行效果
监听notes对象，，添加deep属性：
性能优化
鉴于deep属性Vue性能消耗较大，对于要监听数据中某个属性的响应时，可以只给对应属性添加deep。如下示例，只需侦听属性b的响应变化。
vue-watch监听动态表单的数据
也就是说，我们要监听的是ruleForm对象中的domains属性，此时需要用到深度监听
此时，ruleForm的属性一发生变化，就会被watch属性监听到，对应的值就会发生变化。
还有一个比较容易理解的写法：
vue中如何监听vuex中的数据变化
首先通过计算属性来获取vuex中的数据
再通过watch来监听计算属性中的值来获取变化
通常我们在vue文件中监听数据的变更，尤其是vuex中数据的变更非常方便，通过watch函数可以很便捷的拿到数据变更前后的值，并作出相应的处理。
但是，当我们需要在诸如js等文件中监听到数据的变更就会很不容易，所幸，vue官网提供了解决思路
watch(fn: Function, callback: Function, options?: Object): Function
vuex的实例方法，接收两个参数：
第一个参数为fn，响应式地侦听 fn 的返回值，当值改变时调用回调函数。fn 接收 store 的 state 作为第一个参数，其 getter 作为第二个参数；
第二个参数为一个可选的对象参数表示 ，类似于vue的watch的回调函数，表示新旧值。
当我们不想监听时，可以通过定义变量接收该方法的返回值函数，调用该函数即可停止监听。
优点：我们可以监听我们某个特定需要的值，并非常方便的类似vue文件中那样拿到新旧变化值
弊端：当我们需要知道很多的值的变更情况时就得写大量的监听方法（可以考虑封装成方法或类）
用法示例：
1.在相应的js文件引入store
2.调用store的watch实例方法，第一个函数参数返回一个需要监听的state中的值（比如我想监听vuex中的pathName的变化情况，就返回该值）
3.第二个参数同vue的watch，接收2个参数代表新旧值
4.通过变量watchFun接收watch的返回值，调用该方法会停止监听
如上，就是如何在js等非vue文件中监听vuex数据的变化方式。
就如文中提到的缺点，当数据量过大时，写多次监听闲的不友好，可以考虑订阅mutation的方式管理大量数据。