上节已经说了如何运行一个独立页面版本的Vue程序。那么我们就要先来看看Vue程序的生命周期，了解一下代码到底运行了多少个步骤。
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
beforeCreate(创建前)
created(创建完成)
beforeMount(加载前)
mounted(加载后)
beforeUpdate(更新前)
updated(更新完成)
beforeDestroy(销毁前)
destroyed(销毁后)
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
运行我们的 index.html 的代码来仔细看看
孤狼 | 
2022-07-28 23:51:36 | 
1608°C | 
0条评论 ]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 生命周期</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="msg">
<div>{{num}}</div>
<button v-on:click="up">更新</button>
</div>
<script>
let ndata={num:'555'};
const v=new Vue({
el:"#msg",
data:ndata,
methods:{
up: function(){
console.log("执行更新");
this.num='999';
}
},
beforeCreate:function(){
console.log("创建前执行");
},
created:function(){
console.log("创建完成执行");
},
beforeMount:function(){
console.log('加载前执行');
},
mounted:function(){
console.log('加载后执行');
},
beforeUpdate:function(){
console.log('更新前执行');
},
updated:function(){
console.log('更新完成执行');
},
beforeDestroy:function(){
console.log('销毁前执行');
},
destroyed:function(){
console.log('销毁后执行');
}
});
</script>
</body>
</html>
赞赏一个鸡腿
