1、watch和beforeUpdate,updated有什么不同？
beforeUpdate钩子函数和updated钩子函数间的生命周期
当vue发现data中的数据发生变化，会触发对对应组件的重新渲染，当数据改变后调用beforeupdata，当渲染完成后调用updated钩子函数。
注：通过试验证明，在mounted钩子函数中执行修改data的操作会触发beforeUpdate，而它之前的函数中只要不是可以跳出主线程的数据操作，都不会触发beforeUpdate。例如使用setTimeout会使其中代码跳出主线程到异步线程中，所以它的执行会在mounted之后，所以会触发beforeUpdate。
2、vue 生命周期+watch、computed、methods执行顺序
推荐文章
- 详解vue生命周期--https://segmentfault.com/a/1190000011381906
- watch、computed、methods三者区别--https://blog.csdn.net/qq_45846359/article/details/108671907
watch、computed、methods执行顺序
页面初始化时： 会执行一次computed，watch初始化时不会执行，methods只有调用的时候才会执行。
渲染完成后，触发methods： methods -> watch -> computed
watch、computed、methods三者区别
https://blog.csdn.net/qq_45846359/article/details/108671907
watch：是监听某一个值的变化，初始化时不会监听；如果要在数据变化的同时进行异步操作或者是比较大的开销时，推荐watch
computed：是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。有缓存，如果计算的值没有发生改变，是会走缓存的；而且一定要return。（只是需要动态值用computed）
methods：每调用一次，就会执行一次。在重新渲染的时候每次都会被重新的调用；
Computed 与 methods 对比
1、computed是属性调用，而methods是函数调用
2、computed带有缓存功能，而methods不会被缓存
属性调用：
- computed定义的方法我们是以属性访问的形式调用，{{computedTest}}
- methods定义的方法，我们必须要加上()来调用，{{methodTest()}}
缓存功能：
- computed计算属性具有缓存：只有当计算属性所依赖的属性发生改变时，才会重新去计算
- methods不会被缓存：方法每次都会去重新计算结果。
3、vue中watch的三个属性
基本用法：
当firstName值变化时，watch监听到并且执行
<div>
<p>FullName: {{fullName}}</p>
<p>FirstName: <input type="text" v-model="firstName"></p>
</div>
new Vue({
el: '#root',
data: {
firstName: 'Dawei',
lastName: 'Lou',
fullName: ''
},
watch: {
firstName(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
}
}
})
handler方法和immediate属性：
上面的例子是值变化时候，watch才执行，我们想让值最初时候watch就执行就用到了handler和immediate属性
watch: {
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
immediate: true
}
}
deep属性（深度监听，常用于对象下面属性的改变）：
<div>
<p>obj.a: {{obj.a}}</p>
<p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
new Vue({
el: '#root',
data: {
obj: {
a: 123
}
},
watch: {
'obj.a': {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
// deep: true
}
})
