vue生命周期

vue实例的生命周期

生命周期概念 :

从Vue实例创建,运行,到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期

生命周期函数 === 生命周期事件 === 生命周期钩子 ===钩子函数

实例生命周期 === 组件生命周期

生命周期分类

1. 创建阶段

• 数据响应阶段
  • beforeCreate() : 执行的时候,data和methods还没有被创建,只有默认的事件和钩子函数
  • created() : 执行的时候,data和 methods已经被创建出来了,可以使用了
    • 使用场景 : 发送ajax请求 ; 操作data中的数据 ; 获取本地存储数据 (操作数据)
• 编译模板阶段(找模板,编译到内存)
• DOM渲染(挂载数据)阶段
  • beforeMount() :执行的时候,模板在内存中已经渲染为了DOM树,但是还没有挂载到页面上
  • mounted() :执行的时候,内存中渲染的DOM树,已经挂载到了页面,页面上就可以显示了 , mounted执行完,实例从创建阶段 -> 运行阶段
    • 使用场景 : 发送ajax请求;操作DOM (操作DOM)

2. 运行(更新)阶段

• beforeUpdate() :数据更新之前触发,data里的数据是最新的,但是页面上的数据是旧的

• updated(): data 和 页面上的数据都完成了更新,界面重新渲染成功 updated执行完,表示实例运行阶段结束–> 销毁阶段

3.销毁阶段

• beforeDestroy(): 实例还可以用,还没有开始销毁
• destroyed(): 实例销毁后调用,啥都没了
• 注意点:
  • vue会主动清理自己的内容(data ,指令等等),不清理其他的
  • 自己手动清理自己手写的定时器,操作dom等等(在销毁之前清理)

其他知识

• vm.$mount('#app')手动创建边界
• vm.$destroy() 手动销毁

vue实例的完整生命周期图示

<div id="app">
    {{msg}}
    <input type="button" value="修改msg" @click='msg="修改啦"'>
</div>

//new Vue({})  创建一个空的vue实例对象,对象身上只有默认的事件和钩子函数
const vm = new Vue({
    el:'#app',
    data:{
        msg:'OK'
    },
    methods:{
        fn(){
            console.log( 'methods存在' )
        }
    },
    beforeCreate(){
        ////执行的时候,data和methods还没有被创建,只有默认的事件和钩子函数
        console.log( '第一个钩子函数 beforeCreate' )
        console.log( '界面   '+document.getElementById('app').innerText ) //{{msg}}
        console.log( this.msg )  //undefined
        this.fn()//报错
    },
    created(){
        // //执行的时候,data和methods已经被创建好了,可以使用了
        console.log( '第二个钩子函数  created' )
        console.log( '界面   '+document.getElementById('app').innerText )//{{msg}}
        console.log( 'data的msg属性    ' + this.msg ) //ok
        this.fn() 
    },
    beforeMount(){
        // //执行的时候,模板在内存中已经渲染为了DOM树,但是还没有挂载到页面上
        console.log( '第三个钩子函数  beforeMount' )
        console.log( '界面   '+document.getElementById('app').innerText )//{{msg}}
        console.log( 'data的msg属性    ' + this.msg ) //ok
        this.fn()

    },
    mounted(){
        // //执行的时候,内存中渲染的DOM树,已经挂载到了页面,页面上就可以显示了 
        console.log( '第四个钩子函数  mounted' )
        console.log( '界面   '+document.getElementById('app').innerText )//ok
        console.log( 'data的msg属性    ' + this.msg ) //ok
        this.fn()
    },

    //实例创建完成 ---> 执行阶段
    beforeUpdate(){
        //只有数据发生改变,该事件才会被触发,data里的数据是最新的,但是页面上的数据是旧的
        console.log( '第五个钩子函数  beforeUpdate' )
        console.log( '界面   '+document.getElementById('app').innerText )//ok
        console.log( 'data的msg属性    ' + this.msg ) //修改啦
    },
    updated(){
        //页面上的数据已经最新的,和data里的数据保持一致
        console.log( '第六个钩子函数  updated' )
        console.log( '界面   '+document.getElementById('app').innerText )//修改啦
        console.log( 'data的msg属性    ' + this.msg ) //修改啦
    },

    //实例从执行阶段 --> 销毁阶段
    beforeDestroy(){
        console.log( '第七个钩子函数  beforeDestroy' )
        console.log( '界面   '+document.getElementById('app').innerText )//ok
        console.log( 'data的msg属性    ' + this.msg ) //修改啦
    }

})