Vue生命周期详细图解
（课程笔记，非原创）
图例
代码例
<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
},本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019.09.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
