vue-生命週期

生命週期流程圖

生命鉤子函數/周期函數

圖中紅色標紅的函數

created() {
    
}
mounted() {
    
}
複製代碼

生命週期函數中的this默認綁定到該vue實例，因此不要使用箭頭函數，會出現this綁定錯誤。

生命週期各個階段

beforeCreate

<div id="app">hello world</div>

var vm=new Vue({
    el:'#app',
    template:'<div>hello vue</div>'
    data:{
        a:1
    },
    beforeCreate() {
        console.log('beforeCreate') // beforeCreate
        console.log(this) // Vue$3
        console.log(this.$el) // undefined
        console.log(this.a) // undefined
    }
})
複製代碼

beforeCreate(): 可獲取vue實例，data數據未綁定，el未掛載。因此不要在此函數內對數據作任何修改，由於數據undefined。

created

<div id="app">hello world</div>

var vm=new Vue({
    el:'#app',
    template:'<div>hello vue</div>'
    data:{
        a:1
    },
    created() {
      console.log('created') // created
      console.log(this) //Vue$3
      console.log(this.$el) // undefined
      console.log(this.a) // 1
    }
})
複製代碼

created(): 數據已掛載，el未掛載，適合初始化數據。

beforeMount

1. 沒有el屬性
   當沒有el屬性時，該函數不會被調用，只有當調用$mount函數時纔會被調用。

var vm=new Vue({
    data:{
        a:1
    },
    beforeMount() {
      console.log('beforeMount') // 沒有任何輸出
    }
})

vm.$mount('#app')
// beforeMount 
複製代碼

2. 沒有template屬性
   沒有template屬性時，el外部的html被當成template進行渲染

var vm=new Vue({
    el:'#app',
    data:{
        a:1
    },
    beforeMount() {
      console.log('beforeMount') // beforeMount
      console.log(this) // Vue$3
      console.log(this.$el) // <div id="app">hello world</div>
      console.log(this.a) // 1
    }
})
複製代碼

3. 有 template屬性

var vm=new Vue({
    el:'#app',
    template:'<div>hello vue</div>'
    data:{
        a:1
    },
    beforeMount() {
      console.log('beforeMount') // beforeMount
      console.log(this.$el) // 注意！！ <div id="app">hello world</div>
    }
})
複製代碼

beforeMount: 渲染template，但el仍未掛載

mounted

var vm=new Vue({
    el:'#app',
    template:'<div>hello vue</div>'
    data:{
        a:1
    },
    mounted() {
      console.log('mounted') // mounted
      console.log(this.$el) // 注意！！ <div>hello vue</div>
    }
})
複製代碼

mounted(): 掛載el，將el標識的dom元素整個替換成template渲染成的dom元素。

beforeUpdate/updated

當綁定的數據變化時，先調用beforeUpdate函數，任何更新虛擬dom，從新渲染，而後調用updated。
注意：只有綁定在模板裏渲染的數據變更纔會調用這兩個函數。

var vm=new Vue({
    el:'#app',
    template:'<div>hello vue</div>',
    data:{
        a:1
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    updated() {
      console.log('updated')
    }
})
vm.a=2 // 沒有任何輸出

var vm=new Vue({
    el:'#app',
    template:'<div>hello vue！！！{{a}}</div>',
    data:{
        a:1
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    updated() {
      console.log('updated')
    }
})
vm.a=2 // beforeUpdate updated
複製代碼

beforeDestroy/destroyed

調用vm.$destory()後調用beforeDestroy(),移除監聽器、數據解綁、銷燬子實例後調用destroyed()