Vue学习【3】—— Vue生命周期和生命周期函数

什么是生命周期？

Vue实例从创建到销毁的过程，叫做生命周期。
生命周期分为三个阶段：创建阶段、运行阶段、销毁阶段

什么是生命周期函数（钩子函数）

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

钩子函数有什么用

这给了用户在不同阶段添加自己的代码的机会。

举例说明Vue钩子函数

页面中写一个div

  <div id="app">
    <h3 id="h3">{{ msg }}</h3>
    <input type="button" value="修改msg" @click="msg='No'" >
  </div>

创建一个Vue实例

var  vm = new Vue({
      el : '#app',
      data : {
        msg: 'ok',
      },
      methods: {
        show () {
          console.log('执行了show方法')
        }
      },
      beforeCreate() {},
      created(){},
      beforMounte(){},
      mounted(){},
      beforUpdate(){},
      updated(){},
      beforDestroy(){},
      destroyed(){}
})

beforeCreate() {
    console.log(this.msg);   //undefined
    this.show();  //this.show is not a function
}

在beforeCreate()阶段，data和methods未被初始化

---

created() {
   //如果要使用 data 和 methods 最早只能在 create 中
   console.log(this.msg);
   this.show();
}

在 create 中，data 和 methods中的数据都初始化好了

---

beforeMount() {
  console.log(document.getElementById('h3').innerHTML);  //{{msg}}
},

模板已经在内存中编译完成，但是尚未把模板渲染到页面中,页面中的元素还没被真正替换，只是之前写的模板字符串

---

mounted() {
  // console.log(document.getElementById('h3').innerHTML);
},

内存中的模板已经真实的挂载到页面中，用户已经能看到渲染好的页面了
只要执行完了 mounted 就表示整个 Vue 实例被初始化完毕，此时组件已经脱离了创建阶段，到了运行阶段

---

//运行阶段
<input type="button" value="修改msg" @click="msg='No'" 
beforeUpdate() {
  console.log("界面内容：" + document.getElementById('h3').innerHTML);
  console.log("data中的数据：" + this.msg);
},

执行 beforeUpdate 的时候，页面数据还是旧的，但是 data 中的数据是最新的，页面尚未和最新数据同步

---

updated() {
  console.log("界面内容：" + document.getElementById('h3').innerHTML);
  console.log("data中的数据：" + this.msg);
},

updated事件执行的时候，表示页面和data数据已经保持同步了

创建阶段的钩子函数

beforCreate：data 和 methods中的数据都没初始化
created：data 和 methods中的数据都初始化好了，如果要使用 data 和 methods 最早只能在 create 中
beforeMount：模板已经在内存中编译完成，但是尚未把模板渲染到页面中。页面中的元素还没被真正替换，只是之前写的模板字符串
mounted：内存中的模板已经真实的挂载到页面中，用户已经能看到渲染好的页面了。mounted是实例创建期间的最后一个生命周期函数，表示实例已经被完全创建好了

运行阶段的钩子函数

beforUpdate：页面数据还是旧的，但是 data 中的数据是最新的，页面尚未和最新数据同步
updated：updated事件执行的时候，表示页面和data数据已经保持同步了

销毁阶段的钩子函数

beforDestroy
destroyed

Vue生命周期图示