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í)，需要那階段寫那個(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>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue路由跳轉(zhuǎn)的方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
Vue實(shí)現(xiàn)雙token無感刷新的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)雙token無感刷新,雙token機(jī)制,尤其是指在OAuth 2.0授權(quán)協(xié)議中廣泛使用的access token（訪問令牌）和refresh token（刷新令牌）組合,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
vite+vue3中使用mock模擬數(shù)據(jù)問題
這篇文章主要介紹了vite+vue3中使用mock模擬數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue實(shí)現(xiàn)虛擬滾動(dòng)渲染成千上萬條數(shù)據(jù)
本文主要介紹了vue實(shí)現(xiàn)虛擬滾動(dòng)渲染成千上萬條數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Vue實(shí)現(xiàn)跑馬燈樣式文字橫向滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)跑馬燈樣式文字橫向滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
詳解從react轉(zhuǎn)職到vue開發(fā)的項(xiàng)目準(zhǔn)備
這篇文章主要介紹了詳解從react轉(zhuǎn)職到vue開發(fā)的項(xiàng)目準(zhǔn)備，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
本篇文章主要介紹了詳解Vue 方法與事件處理器 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
在我們?nèi)粘ｉ_發(fā)中,有些組件里面加載非常慢,導(dǎo)致我們路由跳轉(zhuǎn)的時(shí)候回出現(xiàn)卡頓情況,這篇文章主要介紹了Vue3:?Suspense異步加載組件,需要的朋友可以參考下2023-12-12
近期學(xué)習(xí)vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2.x的父子組件之間的傳值并沒有太大的區(qū)別,下面這篇文章主要給大家介紹了關(guān)于vue3父組件和子組件如何傳值的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue3.0 vue-router4.0打包后頁面空白的解決方法
本文主要介紹了vue3.0 vue-router4.0打包后頁面空白的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02