Vue之8个生命周期函数

一丶创建阶段

1.beforeCreate

在组件实例初始化完成之后立即调用。

也就是实例初始化完成、props 解析之后、data 和 computed 等选项处理之前立即调用。

此时无法访问到实例的状态，methods，computed等。

let vm = new Vue({
            el:"#app",
            data:{
                myname:"kerwin"
            },
            beforeCreate(){
                console.log(this.myname,this.a)//undefined undefined
            },
            methods:{
                a(){
                    console.log("aaa");
                }
            }
        })

2.created

在组件实例处理完与状态相关的选项后调用。

此时data，methods，computed，watch已经设置完成。

可以在这个函数中进行初始化状态和挂载一些属性到当前实例等操作，这里挂载的属性不会被拦截。就是说页面上如果显示了这个属性。属性值改变了，页面上不会更新。

let vm = new Vue({
            el:"#app",
            data:{
                myname:"kerwin"
            },
            created(){
                this.text="bbb"
                console.log(this.myname,this.a);//"kerwin" f a()
            },
            methods:{
                a(){
                    console.log("aaa");
                }
            }
        })

3.beforeMount

组件被挂载之前调用。调用这个函数的时候，已经完成了其响应状态的设置，但还没有创建DOM节点。还没有上树。能拿到解析之前的DOM节点。

    <div id="app">
        {{myname}}
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                myname:"kerwin"
            }
            beforeMount(){
                console.log(document.getElementById("app").innerHTML)//{{myname}}
                console.log(this.$el)//<div id="app">{{myname}}</div>
            }
    </script>

4.mounted

组件被挂载之后（上树）调用。

所有同步子组件都已经被挂载。其自身的DOM树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件DOM数也在文档中。此时可以拿到真实的DOM节点。

在mounted函数里可以进行以下操作：

1.依赖DOM创建之后才做初始化工作的插件（swiper）

2.订阅：bus.$on

3.加载页面时的Ajax请求

    <div id="app">
        {{myname}}
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                myname:"kerwin"
            },
            mounted(){
                console.log(document.getElementById("app").innerHTML)//kerwin
            }
        })
        
    </script>

创建阶段的这些函数只会执行一次。

二丶更新阶段

1.beforeUpdate

在组件的状态改变，或DOM结构发生改变时调用。

可以访问到更新DOM之前的DOM状态。可以记录老的DOM的某些状态，比如滚动条的位置等。

2.updated

状态改变之后，更新完DOM树之后调用。在updated里访问节点才是最安全的。

    <div id="app">
        {{myname}}
        <ul>
            <li v-for="item in datalist" :key="item">{{item}}</li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                myname:"kerwin",
                datalist:[]
            },
            mounted(){
                console.log(document.getElementById("app").innerHTML)//kerwin
                setTimeout(()=>{
                    this.datalist=[111,222,333]
                    //创建虚拟dom，diff算法对比---状态立即更新，dom结构异步更新
                    console.log(document.querySelectorAll("li").length)//0
                },2000)
            },
            beforeUpdate(){
                console.log(document.querySelectorAll("li").length)//0
            },
            updated(){
                console.log(document.querySelectorAll("li").length)//3
            }
        })
        
    </script>

只要有任何状态发生改变就会调用这两个函数。

注意：不要在updated中改变组件的状态，否则会无限循环。

三丶销毁阶段

1.beforeDestroy (Vue3:beforeUnmount)

组件销毁之前调用。调用这个函数是组件实例任然保留着之前的所有功能。

2.destroyed (Vue3:unmounted)

组件销毁完之后调用。所有的子组件已经被销毁，所有的相关响应式作用（渲染作用以及计算属性，方法，侦听器等）都已经停止。

因为在销毁组件之后，组件里开起的定时器，给window等绑定的事件或者与服务器的连接任然存在。所以可以在这两个函数中进行定时器的清除，事件的解绑，服务器断开连接等操作。

    <div id="app">
        <child v-if="isCreate"></child>
        <button @click="isCreate=false">销毁child组件</button>
    </div>
    <script>
        Vue.component("child",{
            data(){
                return {
                    time:1000
                }
            },
            template:`
            <div>
                倒计时{{time}}
            </div>
            `,
            created(){
                //挂载id属性到当前组件
                this.id=null
            },
            mounted(){
                this.id=setInterval(()=>{
                    //console.log("111");
                    this.time--
                },1000)
                window.onresize=function(){
                    console.log("window-onresize");
                }
            },
            beforeDestroy(){
                window.onresize=null
            },
            destroyed(){
                clearInterval(this.id)
            }
        })
        let vm=new Vue({
            el:"#app",
            data:{
                isCreate:true
            }
        })
    </script>

生命周期函数图示：