1、正常的順序執行

create      // 執行時掛載階段還沒有開始，模版還沒有渲染成html，所以無法獲取元素。created鉤子函數主要用來初始化數據。
beforeMount // 這一步的時候，模版已經在內存中編譯好了，但是尚未掛載到頁面中去。
computed    // 是在DOM執行完成后立馬執行（如：賦值）
mounted     // 鉤子函數一般用來向后端發起請求，拿到數據后做一些業務處理。該函數在模版渲染完成后才被調用。DOM操作一般是在mounted鉤子函數中進行。
watch       // 用于檢測vue實例上數據的變動


默認加載的時候先computed再watch，不執行methods；等觸發某一事件后，則是：先methods再watch。
methods方法有一定的觸發條件，如click等。
所有方法都應該在methods里定義，在mounted或created里面使用this調用，用這種方法實現初始化。

如果watch 加了 immediate: true, 就是watch先執行，否則就是created 先執行，如果有computed ，vue默認先computed 再執行watch

2、設置了watch immediate：true 他的優先級會提到最前面

watch:immediate
create
beforeMount
computed
mounted
watch

3、設置了watch immediate：true，監聽的是計算屬性的值 他的優先級應該會提到最前面，但是vue默認先computed 再執行watch

computed:(watch監聽的)
watch:immediate
create
beforeMount
computed
mounted
watch

官網的生命周期圖中，init reactivity是晚于beforeCreate但是早于created的。
watch加了immediate: true，應當同init reactivity周期一同執行，會早于created執行。
而正常的watch，則是mounted周期后觸發data changes的周期執行，晚于created。

1、immediate（立即執行）
watch 的一個特點是，默認最初綁定的時候是不會執行的，要等到值改變時才執行監聽計算。
設置immediate為true后，被監聽值初始化的時候就會執行監聽函數，也就頁面上的數據還未變化的時候。
比如當父組件向子組件動態傳值時，子組件props首次獲取到父組件傳來的默認值時，也需要執行函數，此時就需要將immediate設為true

2、deep（深度監聽）
當需要監聽對象的改變時，此時就需要設置deep為true，不論其被嵌套多深，改變對象中的屬性值能夠觸發監聽，改變整個監聽值也會觸發。
deep的意思就是深入觀察，監聽器會一層層的往下遍歷，給對象的所有屬性都加上這個監聽器，但是這樣性能開銷就會非常大了，任何修改obj里面任何一個屬性都會觸發這個監聽器里的 handler。
優化，我們可以是使用字符串形式監聽。

watch: {
  name: {
    handler(newName, oldName) {
      console.log(newName, oldName);
    },
    immediate: true,
    deep: true
  }
}