vue-05生命周期

2021-11-07 08:00:24 阅读：153 来源： 互联网

标签：初始化生命周期 console created 05 Vue vue mounted

生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等，称为Vue实例的生命周期。

使用生命周期钩子
在Vue实例的生命周期过程中会运行一些叫做生命周期钩子的函数，这给用户在不同阶段添加自己代码的机会。

范例：异步获取列表数据

// 模拟异步数据调用接口 
function getCourses() { 
    return new Promise(resolve => { 
        setTimeout(() => { 
            resolve(['web全栈', 'web高级']) 
        }, 2000);
    })
}

const app = new Vue({ 
    // created钩子中调用接口 
    async created() { 
        const courses = await getCourses() 
        this.courses = courses 
    }, 
}

created还是mounted？

探讨生命周期

从一道面试题开始

关于Vue的生命周期，下列哪项是不正确的？(B)[单选题]
A、Vue 实例从创建到销毁的过程，就是生命周期。
B、页面首次加载会触发beforeCreate, created, beforeMount, mounted, beforeUpdate, updated。
C、created表示完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来。
D、DOM渲染在mounted中就已经完成了。

测试代码

<!DOCTYPE html> 
<html> 
    <head>
        <title>Vue源码剖析</title> 
        <script src="vue.js"></script> 
    </head> 
    <body>
        <div id="demo"> 
            <h1>初始化流程</h1>
            <p>{{foo}}</p>
        </div> 
        <script> 
            // 创建实例 
            const app = new Vue({ 
                el: '#demo', 
                data:{
                    foo: 'foo' 
                },
                beforeCreate(){
                    console.log('beforeCreate')
                }, 
                created(){
                    console.log('created '+this.$el)
                }, 
                beforeMount(){
                    console.log('beforeMount')
                }, 
                mounted(){ 
                    setTimeout(() => { 
                        this.foo = 'foooooo' 
                    }, 2000); 
                    console.log('mounted '+this.$el)
                }, 
                beforeUpdate(){
                    console.log('beforeUpdate')
                }, 
                updated(){
                    console.log('updated')},
            });
        </script> 
    </body> 
</html>

生命周期图示

生命周期图示、生命周期列表（网页链接，记得改下）

结论：

三个阶段：初始化、更新、销毁

初始化：beforeCreate、created、beforeMount、mounted

更新：beforeUpdate、updated

销毁：beforeDestroy、destroyed

使用场景分析

{ 
    beforeCreate(){} // 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务 
    
    created(){} // 组件初始化完毕，各种数据可以使用，常用于异步数据获取 

    beforeMounted(){} // 未执行渲染、更新，dom未创建 
    
    mounted(){} // 初始化结束，dom已创建，可用于获取访问数据和dom元素 

    beforeUpdate(){} // 更新前，可用于获取更新前各种状态 

    updated(){} // 更新后，所有状态已是最新 

    beforeDestroy(){} // 销毁前，可用于一些定时器或订阅的取消 

    destroyed(){} // 组件已销毁，作用同上 

}

标签：初始化,生命周期,console,created,05,Vue,vue,mounted
来源： https://www.cnblogs.com/zhangzchun/p/14472388.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-05生命周期

生命周期