Vue生命周期

vue生命周期

vue生命周期有11个，常用的有8个，它们都是钩子函数

1. beforeCreate 刚刚创建vm(数据监视层)，没有创建view（视图层）和model（数据层），dom没有加载，data也没有加载
2. created vm（数据监视层）初始化结束。data数据加载完毕，dom未加载。此时methods中的方法，可以放在这里执行
3. beforeMount 加载dom元素，但数据没有渲染
4. mounted dom加载完成，数据挂载结束，虚拟dom加载完成
5. beforeUpdate 修改数据时触发，数据已经修改但页面没有重新渲染
6. update 数据修改完，页面也重新渲染
7. beforeDestroy 销毁之前
8. destroyed 销毁完成以后，销毁所有指令，销毁view与数据之间的联系

用法 我们需要在页面加载到特定的时期进行操作，就可以使用以上的钩子，例如，我想在数据销毁之前，进行一个询问，可以这样进行：

html代码

    <div id="app">
        <div id="box">
            <div>
                <button @click="names='acomp'">李不白</button>
                <button @click="names='bcomp'">白不易</button>
            </div>
            <component :is="names"></component>

        </div>
    </div>

js代码

    Vue.component("acomp", {
        template: `<div>李不白</div>`,
   });
   
    Vue.component("bcomp", {
        template: `<div>白不易</div>`,
        beforeDestroy() {
        // 销毁之前
        alert("你确定？")
        console.log("b-beforeDestroy", this.$el, this.$data);
        },
   });
    new Vue({
        el: '#app',
        data() {
            return {
                num: 10,
                names: "acomp"
            }
        },
        })

从组件a跳转到组件b，会触发六个钩子函数：组件a的销毁前后，组件b的创建前后和挂载前后