做个引例吧：人的一生经历生、老、病、死的一个过程，
同样vue的实例的也要经历一个创建、挂载、更新、销毁的一个过程，只不过这个生命周期的钩子是double的；
下面是代码可以自行验证：
<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>
<metahttp-equiv=”X-UA-Compatible”content=”ie=edge”>
<title>Vue实例生命周期函数</title>
<scriptsrc=”../script/vue.js”></script>
</head>
<body>
<divid=”app”ref=”app”></div>
<script>
//生命周期函数就是vue实例在某个时间点会自动执行的函数
varvm=newVue({
el:”#app”,
template:”<div>{{name}}</div>”,
data:{
name:”liuting”,
},
beforeCreate:function(){
console.log(“创建之前:”);
console.log(this.$el);
},
created:function(){
console.log(“创建之前:”);
console.log(this.$el);
},
beforeMount:function(){
console.log(“挂载前:”);
console.log(this.$el);
},
mounted:function(){
console.log(“挂载完成：”);
console.log(this.$el);
},
beforeUpdate:function(){
console.log(‘=即将更新渲染=’);
letname=this.$refs.app.innerHTML;
console.log(‘name:’+name);
},
updated:function(){
console.log(‘=更新成功=’);
letname=this.$refs.app.innerHTML;
console.log(‘name:’+name);
},
beforeDestory:function(){
console.log(“销毁前：”);
},
destoryed:function(){
console.log(“销毁完成：”);
}
});
</script>
</body>
</html>
原文链接：vsformac.com/1-%E8%AF%B4…
