vue watch 里的 deep 和 immediate的实战应用
背景immediatedeep关于deep 和 immediate 的基础概念，参见官方文档API — Vue.js
这里说一下deep 和 immediate 在实战中的一个应用场景：
背景
页面有一个从父组件接受到的params属性值，代表向后端发送请求的参数，我需要监听params属性值，一旦父组件传进来的params发生变化就重新向后端发送请求更新数据。
props: {params: {type: Object,default: () => ({city: "",time: "",username: "",status: {a: []b: {}}......})}}
watch: {params:{immediate:true,deep:true,handler(nv, ov) {if (nv.startTime && nv.endTime) {this.queryOrderList()}}}}
this.queryOrderList就是发送请求的函数。
immediate
当页面初始化，params被创建时，此时是不会触发handler的，背后的逻辑就是：刚刚才创建变量params，它还是一张白纸呢，在这张白纸上写写画画才算是"改变"，才需要handler。
immediate的作用就是打破这个逻辑，即：当页面初始化，params被创建时，也会触发handler。
那么我们为什么需要immediate呢？
params是父组件传递进来的用户输入的参数，比如说我需要根据一定的筛选条件查询一个信息，地点在"杭州"，时间是".2.5"，用户名是"admin"，这些标红的都是params对象的属性，是要封装成JSON发送给后端的。当页面初始化的时候，params里的属性都是空值，此时我想把空值传给后端(表示无筛选条件)获取所有的数据，此时就需要用到immediate了。
deep
params属性的类型是什么？Object，属于javascript里的引用类型，params这个字符串本身指向的是堆空间的一个地址，在这块地址上存放params对象的具体内容。默认情况下，watchparams这个变量，监听的是栈空间中的params本身，也就是它指向的地址是否变化。如果我把params赋值成null，那么此时watch的handler就会响应。
但是堆空间中params指向的对象，它有自己的属性，比如city,time,username，甚至于status还会嵌套数组对象a和普通对象b，这些属性的改变会影响params本身指向的地址吗？答案是不会的(如果params的属性占用内存过大可能会引起地址重新分配，但这不在讨论范围内)。
既然如此，只监听栈空间中的params本身，本质上就是在监听它指向的堆空间的地址，是无法监听到子元素的变化的，deep属性就解决了这个问题，采用递归的方式遍历监听params的每一个子元素。
这样，每当用户输入的city,time,username等等属性改变时，就会触发handler，发送this.queryOrderList请求。
如果觉得《vue watch 里的 deep 和 immediate》对你有帮助，请点赞、收藏，并留下你的观点哦！
