什么是生命周期？

生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；
在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

通俗说就是Vue实例从创建到销毁的过程，就是生命周期

什么是生命周期钩子函数都有哪些？分别是什么意思？

  1. 组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载，无法访问到数据和真实的dom，一般不做操作
  2. 挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
  3. 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...
  4. 当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
  5. 当更新完成后，执行updated（据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom）
  6. 经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等,组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

什么是钩子函数？

  1. beforeCreate created[可以获取数据及方法]
  2. beforeMount mounted[可以获取到真实的DOM]
  3. beforeUpdate updated[数据更新执行]
  4. beforeDestroy destroyed[销毁vue实例，不再具有双向数据绑定的特点]

图解

面试回答

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

  1. 创建前/后： 在beforeCreated阶段，vue实例的挂载元素el还没有。在created阶段,vue实例的数据对象data有了,el还没有.
  2. 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完，data.message成功渲染。
  3. 更新前/后：当data变化时，会触发beforeUpdate和updated方法。
  4. 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

代码分析

<body>
    <div id="app">
        <div>
            {{msg}}
        </div>
        <ul>
            <li v-for="a in arr"></li>
        </ul>
        <button @click="fn">点我一下</button>
    </div>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // 生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；
      在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，
在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

        // 生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；
        //生命周期的钩子函数中的this，会默认指向vue的实例
        // beforeCreate   created 
        // beforeMount    mounted
        // beforeUpdate   updated
        // beforeDestroy  destroyed
        //    function Vue(options){
        //         let a = document.querySelector(options.el);
        //         for(let key in options.data){
        //             Object.defineProperty(options.data,key,{
        //                 get(){

        //                 },
        //                 set(){

        //                 }
        //             })
        //         }
        //    }
        //     new Vue({el:"#app",data:{}})


        let vm = new Vue({
            data: {
                msg: "hello",
                arr: [1, 2, 3, 4]
            },
            // 1. 在这个钩子函数执行之前初始化事件以及生命周期
            beforeCreate() {
                // 1. 在这个钩子函数中，不能获取data中的数据
                // console.log(this.msg);
                // 2. 这个函数不能操作DOM；
                // console.log(document.getElementsByTagName("li"))
            },
            // 给Vue的实例注入数据，进行数据监听
            created() {
                // 在created发送请求
                // 1. 可以获取到data中的数据
                // 2. 不能操作DOM的
                //console.log(this.msg);
                // console.log(document.getElementsByTagName("li"))

                axios.get("./carts.json").then(data => {
                    // 异步的；
                    this.arr = data.data;
                    console.log(2);

                })
            },
            methods: {
                getData() {

                },
                fn() {
                    this.msg = "world"
                }
            },
            // 执行之前，判断是否有el,template;编译
            beforeMount() {
                // console.log(document.getElementsByTagName("li"))
            },
            // 挂载完毕
            mounted() {
                // debugger
                // 挂载： 把VUE实例生成的虚拟的DOM转成真实的DOM，放在了页面中，这就是挂载；
                // 编译出的DOM把原有的DOM替换完毕；
                // 可以获取最终的DOM元素
                // let d = {type:"div",a:"1",chidlren:[{type:"span",children:[]}]}
                console.log(document.getElementsByTagName("li"));
                //console.log("mounted","初始化");
            },
            // 当数据更新时，会调用beforeUpdate 和updated钩子函数；上面四个不再运行
            beforeUpdate() {
                console.log("beforeUpdate", "更新之前");
                console.log(this.msg)
                // 更新数据之前执行
            },
            updated() {
                console.log("beforeUpdate", "更新之后");
                // 数据更新，虚拟的DOM更新，然后更新真实的DOM；最后触发这个函数
            },
            // 销毁之前
            beforeDestroy() {
                // 销毁之前
                // 清除定时器
                console.log("beforeDestroy");

            },
            // 销毁之后
            destroyed() {
                console.log("destroyed");
                // 销毁子组件，销毁观察者，事件监听者
                // 元素的事件还在，但是更改数据不会再让视图进行更新了；
            }
        }).$mount("#app");
        // vm.$destroy();
        // console.log(vm);
        // 在项目中，你遇到过什么问题，怎么解决的？
        // 准备
    </script>
</body>

</html>

Vue的DOM异步渲染

<body>
    <div id="app">
        <ul>
            <li v-for="a in arr">{{a}}</li>
        </ul>
        {{sum}}
    </div>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            data:{
                 arr:[1,2,3]
            },
            created(){
                // 此时并没有编译模板
// 如果在created改变数据，那么编译进行一次；如果在mounted中改数据，会再次编译模板；
                console.log(100);
            },
            beforeMount(){ 
                console.log(200);
//this.arr=[1,2,3,4];// 开始编译模板编译原有数据编译3个li,存在内存中，
当数据更新时，立即将内存中的模板编译成4li;最后挂载到真实的DOM上；不会引发beforeUpdate函数的调用
            },
            computed:{
                sum(){
                    // 在挂载的过程中,执行的这个函数
                    console.log(1);
                    return 100;
                }
            },
            // 编译模板
            // 在mounted之前改数据，不会调用beforeUpdate这个函数；
            // DOM 已经挂载完毕
            mounted(){
                console.log(300);
                this.arr=[1,2,3,4];
// 开始编译模板编译原有数据编译3个li,存在内存中，并且直接挂载到了真实DOM中，当数据更新时，
立即将内存中的模板编译成4li;再次把最新挂载到真实的DOM上；会引发beforeUpdate函数的调用
// VUE中DOM的更新是异步的；
// 如何在mounted中操作最新的DOM呢？
// $nextTick需要传入一个回调函数，会当真实的DOM再次更新完成，会立即调用这个回调函数；
                this.$nextTick(()=>{
                    let oLis = document.getElementsByTagName("li")
                    console.log(oLis.length);
                });
            },
            beforeUpdate(){
                console.log("beforeUpdate");
            }
        }).$mount("#app");
    </script>
</body>
</html>

生命周期（其他三个钩子函数）

component 和keep-alive【component 和keep-alive 都是内置组件，在VUE代码已经内置好的组件】

闭合标签使用组件

1、component : 内置组件，根据is属性来显示对应的组件;is属性的属性值保持和组件名字一致；然后可以显示对应的组件

component: 每次能动态显示一个组件，当切换下一个组件时，当前组件要销毁
<component is=“second”>

keep-alive : keep: 保持 alive:活力


2、VUE项目的优化： keep-alive

keep-alive : keep: 保持 alive:活力
<keep-alive>
keep-alive:用于缓存组件，如果该组件还会再启用，那么可以使用keep-alive进行组件缓存和优化，提高性能，缓存的组件不需要销毁，也不需要再创建
<component v-bind:is=“one”> //如果是动态属性，那么会去data中取值
</keep-alive>


三个钩子函数详解

  1. 当keep-alive 缓存组件才会有的生命周期的钩子函数
  2. activated deactivated
  3. errorCaptured 当子孙组件出错时，会调用这个钩子函数
// keep-alive 缓存组件 生命周期的钩子函数 activated deactivated
// 生命周期的钩子函数
activated() {
// 当缓存组件有被显示出来时，会触发这个钩子函数
console.log(100);
},
deactivated() {
// 当缓存的组件隐藏时，会触发这个钩子函数；
console.log(200);
},
// 当子孙组件出错时，会调用这个钩子函数
errorCaptured(a, b, c) {
// 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
console.log(a);
console.log(b);
console.log©;
console.log(“子组件报错”)
},

代码段

<body>
    <div id="app">
        <button @click="fn">点一点</button>
        <!-- // component : 内置组件，根据is属性来显示对应的组件;
    is属性的属性值保持和组件名字一致；然后可以显示对应的组件
        // 如果是动态属性，那么会去data中取值 -->
        <!-- <component is="second"></component> -->
        <keep-alive>
            <!-- keep-alive:用于缓存组件，如果该组件还会再启用，
            那么可以使用keep-alive进行组件缓存和优化，提高性能，缓存的组件不需要销毁，
也不需要再创建 -->
            <component v-bind:is="one"></component>
        </keep-alive>

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // component 和keep-alive 都是内置组件，在VUE代码已经内置好的组件；
        // 闭合标签使用组件
        // component: 每次能动态显示一个组件，当切换下一个组件时，当前组件要销毁
        // keep-alive : keep: 保持  alive:活力 
        // VUE项目的优化： keep-alive
        let kkk = {
            data() {
                return {
                    a: 'cc'
                }
            },
            template: "<div>{{a}}</div>"
        }
        let first = {
            destroyed() {
                console.log("销毁")
            },
            components: {
                kkk
            },
            // keep-alive 缓存组件 生命周期的钩子函数  activated  deactivated
            // 生命周期的钩子函数
            activated() {
                // 当缓存组件有被显示出来时，会触发这个钩子函数
                console.log(100);
            },
            deactivated() {
                // 当缓存的组件隐藏时，会触发这个钩子函数；
                console.log(200);
            },
            // 当子孙组件出错时，会调用这个钩子函数
            errorCaptured(a, b, c) {
                // 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、
发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
                console.log(a);
                console.log(b);
                console.log(c);
                console.log("子组件报错")
            },
            template: "<div>我是老大<kkk></kkk></div>"
        };
        let second = {
            template: "<div>我是老二</div>"
        }
        let third = {
            template: "<div>我是老三</div>"
        }
        let vm = new Vue({
            el: "#app",
            data: {
                one: "first"
            },
            methods: {
                fn() {
                    let ary = ["first", "second", "third"];
                    let index = ary.indexOf(this.one);
                    if (index < 2) {
                        this.one = ary[index + 1];
                    } else {
                        this.one = ary[0];
                    }
                    // 
                    // switch (this.one) {
                    //     case "first":
                    //         this.one = "second"
                    //         break;
                    //     case "second":
                    //         this.one = "third"
                    //         break;
                    //     default:
                    //         this.one = "first"
                    //         break;
                    // }
                }
            },
            components: {
                first,
                second,
                third
            },

        });
    </script>
</body>

 本文参考文章：宅男呀的Vue生命周期（11个钩子函数）

Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

6个实例带你解读TinyVue 组件库跨框架技术

avatar 华为云开发者联盟
cover

华为云FunctionGraph构建高可用系统的实践

avatar 华为云开发者联盟
cover

11个Python循环技巧

avatar 华为云开发者联盟