7. Vue的生命周期

一、实例生命周期

实例生命周期如图所示：

二、生命周期钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

钩子函数	说明
beforeCreate	创建实例对象之前执行
created	创建实例对象之后执行
beforeMount	页面挂载成功之前执行
mounted	页面挂载成功之后执行
beforeUpdate	组件更新之前执行
updated	组件更新之后执行
beforeDestoy	实例销毁之前执行
destroyed	实例销毁之后执行

2.1 实例创建

2.1.1 beforeCreate钩子函数

实例完全被创建出来之前运行beforeCreate钩子函数,其中this.$el和this.$data为undefined,还未初始化。

<div id="app">{
  {msg}}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
    
        el:'#app',
        data:{
    
            msg:"张三"
        },
        beforeCreate:function () {
    
            console.log("实例创建之前");
            console.log(this.$el,"el");
            console.log(this.$data,"data");
        }
    });
</script>

输出结果：

实例创建之前
undefined "el"
undefined "data"

2.1.2 created钩子函数

实例被创建出来之后执行created钩子函数,其中this.$data已存在，即数据已经绑定到了对象实例，但是this.$el为undefined（即还没有挂载对象）

<div id="app">{
  {msg}}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
    
        el:'#app',
        data:{
    
            msg:"张三"
        },
        created:function () {
    
            console.log(