夏天，他把手中的魔法棒轻轻一挥，带给咱们一片充满活力的蓝色。你瞧，蓝蓝的天空飘着朵朵白云，远处，蔚蓝的大海在夏风的吹拂下，卷起层层浪花。
先来看看官网的介绍:
主要有八个生命周期，分别是:
beforeCreate、created、beforeMount、mounted、beforeupdate、updated 、beforeDestroy和destroyed，分别对应八个不同的时期，另外还有两个activated和deactivated生命周期是对应Keep-Alive组件的
关于这八个生命周期的具体用法官网介绍的很详细了，飞机入口:点我点我 ，另外还有一张比较直观图形介绍，飞机入口:点我点我
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<button @click="test1()">测试(更新操作)</button>
<button @click="test2()">测试(销毁操作)</button>
</div>
<script>
Vue.config.productionTip=false;
Vue.config.devtools=false;
new Vue({
el:'#app',
data:{message:"Hello World!"},
beforeCreate:function(){ console.log('beforeCreate'); },
created:function(){ console.log('created'); },
beforeMount:function(){ console.log('beforeMount'); },
mounted:function(){ console.log('mounted'); },
beforeUpdate:function(){ console.log('beforeUpdate'); },
updated:function(){ console.log('updated'); },
beforeDestroy:function(){ console.log('beforeDestroy'); },
destroyed:function(){ console.log('destroyed'); },
methods:{
test1:function(){this.message="Hello Vue!";},
test2:function(){this.$destroy();},
}
})
</script>
</body>
</html> 到此这篇关于Vue.javascript源码分析(九)基础篇生命周期详解就介绍到这了。你不能决定生命的长短，但你可以控制它的质量；你不能左右天气，但你可以改变心情；你不能改变容貌，但你可以展现笑容；你不能控制他人，但你可以掌握自己；你不能预知明天，但你可以掌握今天；你不能样样胜利，但你可以事事尽心。更多相关Vue.javascript源码分析(九)基础篇生命周期详解内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
