vue組件生命周期詳解
更新時(shí)間：2017年11月07日 10:02:12 作者：匿名的girl
這篇文章主要為大家詳細(xì)介紹了vue組件生命周期，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue組件生命周期的具體代碼，供大家參考，具體內(nèi)容如下
分為4個(gè)階段：
create/mount/update/destroy
每一個(gè)階段都對(duì)應(yīng)著有自己的處理函數(shù)
create: beforeCreate created
初始化
mount: beforeMount mounted
和掛載相關(guān)的處理
update: beforeUpdate updated
根據(jù)要更新的數(shù)據(jù) 做邏輯判斷
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>
<!--點(diǎn)擊的時(shí)候isShow進(jìn)行取反 -->
<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('準(zhǔn)備創(chuàng)建組件');
},
created: function () {
console.log('組件創(chuàng)建完畢');
},
beforeMount: function () {
console.log('組件的模板準(zhǔn)備掛載到DOM');
},
mounted: function () {
console.log('掛載完畢');
},
beforeUpdate: function () {
console.log('準(zhǔn)備更新了');
},
updated:function(){
console.log('更新完成');
},
beforeDestroy: function () {
console.log('準(zhǔn)備destroy');
},
destroyed: function () {
console.log('destroy完成');
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs",
isShow:true
}
})
</script>
</body>
</html>
生命周期練習(xí)，需要那階段寫(xiě)那個(gè)階段
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>生命周期練習(xí)</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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
<keep-alive> 是一個(gè)抽象組件,用于將其內(nèi)部的組件保留在內(nèi)存中,而不會(huì)重新渲染,這意味著當(dāng)組件在<keep-alive> 內(nèi)部切換時(shí),其狀態(tài)將被保留,而不是被銷(xiāo)毀和重新創(chuàng)建,這篇文章主要介紹了Vue中的keep-alive緩存組件的理解,需要的朋友可以參考下2024-01-01
vue基于Element構(gòu)建自定義樹(shù)的示例代碼
本篇文章主要介紹了vue基于Element構(gòu)建自定義樹(shù)的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了Vue傳值-三種常用傳值示例，主要介紹了父組件向子組件進(jìn)行傳值，子組件向父組件傳值和非父子組件進(jìn)行傳值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了vue中appear的用法,需要的朋友可以參考下2017-08-08
vue項(xiàng)目webpack中配置src路徑別名及使用方式
這篇文章主要介紹了vue項(xiàng)目webpack中配置src路徑別名及使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇Vue前后端不同端口的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue.js彈出模態(tài)框組件開(kāi)發(fā)的示例代碼
本篇文章主要介紹了Vue.js彈出模態(tài)框組件開(kāi)發(fā)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
過(guò)濾器vue.filters的使用方法實(shí)現(xiàn)
這篇文章主要介紹了過(guò)濾器vue.filters的使用方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09![vue新手入門(mén)出現(xiàn)function () { [native code] }錯(cuò)誤的解決方案](http://img.jbzj.com/images/xgimg/bcimg8.png)
vue新手入門(mén)出現(xiàn)function () { [native code]&nbs
這篇文章主要介紹了vue新手入門(mén)出現(xiàn)function () { [native code] }錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
響應(yīng)式就是當(dāng)對(duì)象本身(對(duì)象的增刪值)或者對(duì)象屬性(重新賦值)發(fā)生變化時(shí),將會(huì)運(yùn)行一些函數(shù),最常見(jiàn)的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下2022-11-11