今天在看生命周期有关的内容的时候看到了一篇不错的博客,写的非常的通俗易懂。
博客转自:https://www.cnblogs.com/wo1ow1ow1/p/11057700.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../js/vue.js" charset="utf-8"></script>
<body>
<div id="app">
<h3 id="w3">{{ msg }}</h3>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data:{
msg:'ok'
},
methods:{
show(){
console.log("执行了show方法")
}
},
beforeCreate() { // 这是我们第一个遇到的生命周期函数, 表示实例完全被创建之前, 会执行它
// console.log(this.msg) // 输出undefined
// this.show() //输出this.show is not a function
// 注意: 在 beforeCreate 生命周期函数被执行的时候, data 和 methods 中的 数据都还没有初始化
},
created() { //这是我们遇到的第二个生命周期函数
// console.log(this.msg) //输出ok
// this.show() // 输出 "执行了show方法"
// 在 created 中, data 和 methods 都已经初始化好了!
// 如果要调用 methods 中的方法, 或者操作 data 中的数据, 最早, 只能在 created 中操作
},
beforeMount() { //这是我们遇到的第三个生命周期函数, 表示 模板已经在内存中编译完成了, 但是尚未把 模板渲染到 页面中
// console.log(document.getElementById("w3").innerText) // 输出 {{ msg }}
// 在 beforeMount 执行的时候, 页面中的元素, 还没有被真正替换过来, 只是之前写的一些模板字符串
},
mounted() { //这是我们遇到的第四个生命周期函数, 表示 内存的模板, 已经真是的挂载到了页面上, 用户可以已经看到渲染好的页面
console.log(document.getElementById("w3").innerText) // 输出 ok
// 注意: mounted 是 实例创建期间的最后一个生命周期函数, 当执行完 mounted 就表示, 实例已经被完全创建好了, 此时,
// 如果没有其它操作的话, 这个实例, 就静静的 躺在我们的内存中, 一动不动
}
})
</script>