vue.js 的 watch 适用场景记录 以及其中的immediate适用场景和注意事项

补充：

1. immediate 只在前后端不分离的环境中用的较多，例如 php 和 django 等服务端直接渲染出来的 vue.js 代码，直接将初始数据写在父组件里面，作为 prop 参数传递给子组件时，因为挂载等原因，直接忽略掉了这批服务端渲染的初始数据，造成初始数据没有被渲染；
2. 而在正常前后端分离开发中，immediate 几乎没有什么用户，也无需掌握；
3. watch 和 computed 能够互相转换，将多个变量变成一个对象，用 watch deep 进行监听的效果，可以多个变量被 computed 监听是一样的，但是一个对象的监听更方便一些

但凡来面试的，如果说没用过watch，那么这个前端就不用招了，理论上只有两种可能，第一种，从未写过复杂逻辑，第二种，从未封装过组件；而两种情况都不能要；

watch 和 computed

computed解决的是多个变量处理一个问题；

watch解决的是单个变量处理多个变量或问题，刚好与computed形成互补形态，如果没有用过watch，那么computed用的也少，更可能的是用函数来取缔computed这种高效处理方式，使得代码写的比较臃肿；

watch 最多应用场景

就是组件！

开发组件目的有两个：

1，一个页面的功能逻辑太多了，有上千行，需要自己一块块的拆分开来，方便未来好维护，不然每次都从上到下看几千行，万一改哪里，还影响全局，导致代码维护极其困难；

2，就是复用代码，同一个下拉选择框，需要处理的逻辑较多，并且多处使用，便可以抽离成组件；

watch在组件中起到作用：

承上启下的功能

组件有特点，从外引入参数，自内返回处理结果，这个从外引入时 ，就大量用到了watch

编辑时启用immediate

对于 immediate:true 面试的好多人都不知道这干啥的，这里直接指出，这是编辑时用到的，当然你也可以在created中处理，但是很多编辑功能，watch都不仅仅处理一次，因此created单独再写一份watch逻辑则显得臃肿，直接在watch中写逻辑。

immediate:true 会导致一个问题

immediate会让watch执行顺序提升至created之前，这个可是坑点，如果你在immediate中修改了初始data值，就会导致created获取的值是修改过的值，导致一些人瞬间懵逼。

平时养成好习惯在mounted函数中加载初始数据，用无意识方式避开created这个问题，此外，既然已采用watch方式，created尽量不要去用了，直接将逻辑存放在watch逻辑中处理。

不要将逻辑放在created中处理，设置全局变量init:false，在watch中进行初次判断，之后把init:true，避免二次处理