Vue生命周期详细图解

• 2019 年 10 月 8 日
• 笔记

（课程笔记，非原创）

图例

代码例

<div id="app">      <input type="button" value="修改msg" @click="msg='No'">      <h3 id="h3">{{ msg }}</h3>  </div>  // 创建 Vue 实例，得到 ViewModel  var vm = new Vue({              el: '#app',              data: {                  msg: 'ok'              },              methods: {                  show() {                      console.log('执行了show方法')                  }              },

beforeCreated 第一个生命周期函数 表示实例完全被创建出来之前，会执行它 此时data 和 methods 中的 数据都还没有没初始化

beforeCreate() {      console.log(this.msg) //获取不到      this.show() //获取不到  }

created 第二个生命周期函数 data 和 methods 都已经被初始化好了 如果要调用 methods 中的方法，或者操作 data 中的数据，最早只能在 created 中操作

created() {      console.log(this.msg) // ok      this.show() //执行了show方法  },

beforeMount 第三个生命周期函数 表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中 如果要调用 methods 中的方法，或者操作 data 中的数据，最早只能在 created 中操作 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串

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

mounted 第四个生命周期函数 表示内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动

mounted() {      console.log(document.getElementById('h3').innerText) // ok  },

beforeUpdate 界面没被更新，但是数据已更新

 beforeUpdate() {      console.log(document.getElementById('h3').innerText) // ok      console.log('data 中的 msg 数据是：' + this.msg) //No  },

updated 界面没被更新，但是数据已更新 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的

updated() {      console.log(document.getElementById('h3').innerText) // No      console.log('data 中的 msg 数据是：' + this.msg) //No  },