与此形成鲜明对比的是另一位巨星——葡萄牙队的c罗。上赛季他虽说有42个进球，但经统计，他的效率不到10%。在这个习惯统计学的社会，c罗的42球从深层分析充满了水分。此外，他的球场道德也属于低劣派，假摔贯穿全场，无处不在，江湖人送外号 "跳水运动员 "，桃色风波更是五花八门，而两者后果呢？看看吧：梅西凭借着08—09赛季带领巴萨取得西甲、国王杯、欧洲冠军联赛三冠王，取得433分，获得金球奖，而c罗只有他的一半不到！
本文实例为大家分享了vue组件生命周期的具体代码，供大家参考，具体内容如下
分为4个阶段：
create/mount/update/destroy
每一个阶段都对应着有自己的处理函数
create: beforeCreate created
初始化
mount: beforeMount mounted
和挂载相关的处理
update: beforeUpdate updated
根据要更新的数据 做逻辑判断
destroy:beforeDestroy destroyed
清理工作
代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>生命周期</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!--点击的时候isShow进行取反 -->
<button @click="isShow = !isShow">切换是否显示组件</button>
<my-component v-if="isShow"></my-component>
</div>
<script>
Vue.component("my-component",{
template:`
<div>
<button @click="handleClick">Click Me</button>
<h1>component:{{count}}</h1>
</div>
`,
data:function(){
return {
count:0
}
},
methods:{
handleClick:function(){
this.count++;
}
},
beforeCreate: function () {
console.log('准备创建组件');
},
created: function () {
console.log('组件创建完毕');
},
beforeMount: function () {
console.log('组件的模板准备挂载到DOM');
},
mounted: function () {
console.log('挂载完毕');
},
beforeUpdate: function () {
console.log('准备更新了');
},
updated:function(){
console.log('更新完成');
},
beforeDestroy: function () {
console.log('准备destroy');
},
destroyed: function () {
console.log('destroy完成');
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs",
isShow:true
}
})
</script>
</body>
</html>
生命周期练习，需要那阶段写那个阶段
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>生命周期练习</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
data:function(){
return {
myOpacity:0
}
},
template:` <h1 v-bind:style="{opacity:myOpacity}">透明度将改变
</h1>`,
mounted:function(){
setInterval(function(){
this.myOpacity += 0.1;
if(this.myOpacity>1){
this.myOpacity = 0;
}
}.bind(this),1000)
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
本文vue组件生命周期详解到此结束。心常用则活，不用则窒。常用则细，不用则粗。小编再次感谢大家对我们的支持！
