vue4---vue的生命周期

Vue生命周期

生命周期：事物從誕生到消亡的過程

每個 Vue 執行個體在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模闆、将執行個體挂載到 DOM 并在資料變化時更新 DOM 等。同時在這個過程中也會運作一些叫做生命周期鈎子的函數，這給了使用者在不同階段添加自己的代碼的機會。

比如 created 鈎子可以用來在一個執行個體被建立之後執行代碼：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 執行個體
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"
           

也有一些其它的鈎子，在執行個體生命周期的不同階段被調用，如 mounted、updated 和 destroyed。

生命周期鈎子的 this 上下文指向調用它的 Vue 執行個體。

不要在選項屬性或回調上使用箭頭函數，比如

created: () => console.log(this.a) 或 
vm.$watch('a', newValue => this.myMethod())。
           

因為箭頭函數并沒有 this，this 會作為變量一直向上級詞法作用域查找，直至找到為止，經常導緻 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。

圖示：

常用：

• created： 元件建立完後在created裡面請求資料，把請求到的資料放到data裡