vue的生命周期

vue的生命周期

前言

​ 一个vue实例从创建->挂载->更新->销毁的这整个过程，称为该实例的生命周期。用户可以在不同阶段通过生命周期钩子函数，来添加自己的代码。每个阶段有一对钩子，下面按顺序详解。

生命周期钩子

一、创建

1. beforeCreate：此时data和methods中的数据还没有初始化

   <div id="app"></div>
   

   new Vue({
       el: '#app',
       data: {
           msg: '厕所打你'
       },
       methods: {
           print() {
               console.log('你给我等着')
           }
       },
       beforeCreate: function() {
           console.log(this.msg)//undefine
           console.log(this.print())
           //TypeError: this.print is not a function
       }
   })
   

2. created：此时data和methods中的数据已经初始化完成，所以要调用methods中的方法，或者操作data中的数据，最早也要在created中

   <div id="app"></div>
   

   new Vue({
       el: '#app',
       data: {
           msg: '厕所打你'
       },
       methods: {
           print() {
               console.log('你给我等着')
           }
       },
       created: function() {
           console.log(this.msg)//厕所打你
           console.log(this.print())//你给我等着
       }
   })
   

二、挂载

1. beforeMount：此时模板已经编译好了，但是还没有挂载到页面，所以用户只能看到标签里原始的内容

   <div id="app">{{msg}}</div>
   

   new Vue({
       el: '#app',
       data: {
           msg: '厕所打你'
       },
       beforeMount: function() {
         console.log(document.getElementById("app").innerHTML)
         //{{msg}}
       }
   })
   

2. mounted：此时模板已经被挂载到页面，用户就能看到渲染好的内容了

   <div id="app">{{msg}}</div>
   

   new Vue({
       el: '#app',
       data: {
           msg: '厕所打你'
       },
       beforeMount: function() {
         console.log(document.getElementById("app").innerHTML)
         //厕所打你
       }
   })
   

三、更新

​ 只有当vue实例中的data数据发生改变时，才会触发以下两个生命周期事件

1. beforeUpdate：此时data数据已经改变了，但是页面内容还没有更新

   <div id="app">
   	<button @click="msg='你过来啊'">修改msg</button>
   	<h2 id="h2">{{msg}}</h2>
   </div>
   

   new Vue({
       el: '#app',
       data: {
           msg: '厕所打你'
       },
       beforeUpdate: function() {
           console.log('beforeUpdate被执行了并且msg现在被改为:'+this.msg)
           //beforeUpdate被执行了并且msg现在被改为:你过来啊
           console.log('但是此时页面的内容仍然为：'+document.getElementById("h2").innerHTML)
           //但是此时标签的内容仍然为：厕所打你
       }
   })
   

2. updated：此时页面内容已经被更新

   <div id="app">
   	<button @click="msg='你过来啊'">修改msg</button>
   	<h2 id="h2">{{msg}}</h2>
   </div>
   

   new Vue({
       el: '#app',
       data: {
           msg: '厕所打你'
       },
       updated: function() {
           console.log('updated被执行了并且msg现在被改为:'+this.msg)
           //updated被执行了并且msg现在被改为:你过来啊
           console.log('此时页面的内容也被更新为：'+document.getElementById("h2").innerHTML)
           //此时页面的内容也被更新为：你过来啊
       }
   })
   

四、销毁

1. beforeDestroy：此时实例的data和methods，以及指令还可以使用
2. destroyed：此时实例已被销毁