<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的生命周期</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg = ‘no‘">
<h3 id="h3">{{ msg }}</h3>
</div>
<script>
var vm = new Vue({
el: ‘#app‘,
data: {
msg: "ok"
},
methods: {
show() {
console.log(‘执行了show方法‘)
}
},
/*创建的四个事件*/
/*实例创建前-在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化*/
beforeCreate() {
// console.log(this.msg);
// this.show()
},
/*实例创建后-在created生命周期执行的时候，data和methods中的数据被初始化*/
created() {
// console.log(this.msg);
// this.show()
},
/*模板挂载前-在beforeMount生命周期执行的时候，表示模板在内存中编译完成,但还未渲染到页面中*/
beforeMount() {
// console.log(document.getElementById(‘h3‘).innerText);
},
/*模板挂载后-在mounted生命周期执行的时候，将模板渲染到页面中,如果需要操作DOM节点，最早可以在这里进行*/
mounted() {
// console.log(document.getElementById(‘h3‘).innerText);
},
/*运行的两个事件*/
/*数据更新前-在beforeUpdate生命周期执行的时候,将数据更新,但页面还没有被更新*/
beforeUpdate() {
// console.log(‘页面数据:‘ + document.getElementById(‘h3‘).innerText);
// console.log(‘data数据:‘ + this.msg);
},
/*数据更新后-在updated生命周期执行的时候,将数据更新到页面中*/
updated() {
// console.log(‘页面数据:‘ + document.getElementById(‘h3‘).innerText);
// console.log(‘data数据:‘ + this.msg);
},
/*销毁的两个事件*/
/*销毁实例前-在beforeDestroy生命周期执行的时候, 实例进入销毁阶段,但功能还可以使用*/
beforeDestroy() {
},
/*销毁实例后-在destroyed生命周期执行的时候,实例被销毁,功能不能使用*/
destroyed() {
}
});
</script>
</body>
</html>
原文：https://www.cnblogs.com/kinblog/p/11939240.html