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í)行順序

推薦文章

1. 詳解vue生命周期--https://segmentfault.com/a/1190000011381906
2. 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的三個屬性

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
  }
})