1、watch和beforeUpdate,updated有什么不同衔峰？
beforeUpdate鉤子函數(shù)和updated鉤子函數(shù)間的生命周期
當(dāng)vue發(fā)現(xiàn)data中的數(shù)據(jù)發(fā)生變化，會觸發(fā)對對應(yīng)組件的重新渲染奋早，當(dāng)數(shù)據(jù)改變后調(diào)用beforeupdata距淫，當(dāng)渲染完成后調(diào)用updated鉤子函數(shù)。
注：通過試驗證明砸泛，在mounted鉤子函數(shù)中執(zhí)行修改data的操作會觸發(fā)beforeUpdate，而它之前的函數(shù)中只要不是可以跳出主線程的數(shù)據(jù)操作蛆封，都不會觸發(fā)beforeUpdate唇礁。例如使用setTimeout會使其中代碼跳出主線程到異步線程中，所以它的執(zhí)行會在mounted之后惨篱，所以會觸發(fā)beforeUpdate盏筐。
2、vue 生命周期+watch砸讳、computed琢融、methods執(zhí)行順序
推薦文章
- 詳解vue生命周期--https://segmentfault.com/a/1190000011381906
- watch、computed簿寂、methods三者區(qū)別--https://blog.csdn.net/qq_45846359/article/details/108671907
watch漾抬、computed、methods執(zhí)行順序
頁面初始化時： 會執(zhí)行一次computed常遂，watch初始化時不會執(zhí)行纳令，methods只有調(diào)用的時候才會執(zhí)行。
渲染完成后克胳，觸發(fā)methods： methods -> watch -> computed
watch平绩、computed、methods三者區(qū)別
https://blog.csdn.net/qq_45846359/article/details/108671907
watch：是監(jiān)聽某一個值的變化漠另，初始化時不會監(jiān)聽捏雌；如果要在數(shù)據(jù)變化的同時進行異步操作或者是比較大的開銷時，推薦watch
computed：是自動監(jiān)聽依賴值的變化笆搓，從而動態(tài)返回內(nèi)容性湿，主要目的是簡化模板內(nèi)的復(fù)雜運算。有緩存砚作，如果計算的值沒有發(fā)生改變窘奏，是會走緩存的；而且一定要return葫录。（只是需要動態(tài)值用computed）
methods：每調(diào)用一次，就會執(zhí)行一次领猾。在重新渲染的時候每次都會被重新的調(diào)用米同；
Computed 與 methods 對比
1骇扇、computed是屬性調(diào)用，而methods是函數(shù)調(diào)用
2面粮、computed帶有緩存功能少孝，而methods不會被緩存
屬性調(diào)用：
- computed定義的方法我們是以屬性訪問的形式調(diào)用，{{computedTest}}
- methods定義的方法熬苍，我們必須要加上()來調(diào)用稍走，{{methodTest()}}
緩存功能：
- computed計算屬性具有緩存：只有當(dāng)計算屬性所依賴的屬性發(fā)生改變時，才會重新去計算
- methods不會被緩存：方法每次都會去重新計算結(jié)果柴底。
3婿脸、vue中watch的三個屬性
基本用法：
當(dāng)firstName值變化時，watch監(jiān)聽到并且執(zhí)行
<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才執(zhí)行狐树，我們想讓值最初時候watch就執(zhí)行就用到了handler和immediate屬性
watch: {
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
// 代表在wacth里聲明了firstName這個方法之后立即先去執(zhí)行handler方法，如果設(shè)置了false鸿脓，那么效果和上邊例子一樣
immediate: true
}
}
deep屬性（深度監(jiān)聽抑钟，常用于對象下面屬性的改變）：
<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
}
})
