vue-生命周期

生命周期流程图

生命钩子函数/周期函数

图中红色标红的函数html

created() {
    
}
mounted() {
    
}
复制代码

生命周期函数中的this默认绑定到该vue实例，因此不要使用箭头函数，会出现this绑定错误。vue

生命周期各个阶段

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