当前位置：网站首页>17.生命周期

17.生命周期

2022-07-23 18:53:00 【风落不归处】

生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段

生命周期函数：是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行

注意：生命周期强调的是时间段，生命周期函数强调的是时间点

1.1组件生命周期函数的分类

1.2生命周期图示

1.3详解

1. Init Events & Lifecycle（初始化事件与生命周期）环节

在new Vue() => beforeCreate这个阶段：初始化生命周期、事件；但是数据代理还没有开始：在这个环境new Vue传入的data:{xxx}，vm还没有收到，vm._data还不存在
这个环境之后，vm实例会调用beforeCreate钩子

2.new Vue() => beforeCreate

此时：组件的props、data、methods尚未被创建，都处于不可用状态
在数据监测（数据代理、数据劫持）之前
经过初始化事件与生命周期环节，此时vm身上还没有_data

(1).验证（代码截取关键部分）

new Vue({
	el:'#root',
	    data:{
            num: 1
		},
		methods: {
            test() {
                console.log("test")
            }
		},
        beforeCreate() {
            console.log("beforeCreate")
            console.log(this)
            debugger
        }
})

证明：beforeCreate生命周期钩子执行了，且data、props、methods都未生成
vm身上无_data、method test()方法也没有、props为undefined

3.beforeCreate => created（Init injections & reactivity环节）

初始化：数据监测、数据代理，监测数据变化、监测数组变化，给对象里的属性匹配get、set方法的，对数组的那些方法进行二次包装，一旦完成了就调用created生命周期函数

此时：可以通过vm访问到data、methods、props,但模板结构还未生成
在数据监测、数据代理之后

（1）验证

new Vue({
    el: "#root",
    data: {
        num: 1
    },
    methods: {
        test() {
            console.log("test")
        }
    },
    beforeCreate() {
        console.log("beforeCreate")
    },
    created() {
        console.log("created")
        console.log(this)
        debugger
    }
})

可以看见，先输出了：beforeCreate、created
且vm身上有_data、get、set、test()、props（这里为undefined，其实是因为没定义props，props也会生成）

4.Has "el" options ？

在执行完created生命周期函数之后，会先去判断：有没有el配置项，也就是new Vue的时候有没有传el配置项。

(1)传了：走YES路线，会进行下一个步骤，到Has "template" option?

(2)没传：走No路线，到 when vm.$mount(el) is called
这里又有两种情况:
① 写了vm.$mount(el)，会进行下一个步骤，到 Has "template" option?
②没写vm.$mount(el)，直接报错

5.Has "template" option ?

如果在new Vue实例时，写了template配置项，那么会进行 Compile template into render function：基于数据和模板在内存中编译生成HTML结构
这些操作基于的代码如下（创建vm实例，未涉及到子组件）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
</html>
<script type="text/javascript">
    new Vue({
        el: "#root",
        data: {
            num: 1
        },
        methods: {
            test() {
                console.log("test")
            }
        },
        beforeCreate() {
            console.log("beforeCreate")
        },
        created() {
            console.log("created")
            console.log(this)
            debugger
        }
    })
</script>