vue中的data,computed,methods,created,mounted用法及說(shuō)明
vue中的data,computed,methods,created,mounted
介紹一下vue的基本結(jié)構(gòu)中各分類的含義以及他們的執(zhí)行順序
含義及執(zhí)行順序
1.首先created是最先執(zhí)行的,它是一個(gè)生命周期,也叫鉤子函數(shù),用于頁(yè)面還沒(méi)加載完畢時(shí)發(fā)送請(qǐng)求,初始化data里的值。
2.data一般用來(lái)存放vue中的變量,通過(guò)return將數(shù)據(jù)返回到created中
3.methods用來(lái)寫(xiě)相關(guān)模塊的函數(shù)以及功能的實(shí)現(xiàn),格式為async+方法名,通常通過(guò)發(fā)送請(qǐng)求請(qǐng)求到后臺(tái)數(shù)據(jù)
4.computed是界于created和mounted之間發(fā)生的,此時(shí)正是頁(yè)面進(jìn)行渲染的時(shí)候
5.mounted是加載完dom操作后才會(huì)觸發(fā),它和created一樣只會(huì)執(zhí)行一次,此時(shí)頁(yè)面已經(jīng)渲染完成,通常用于存放需要渲染的內(nèi)容
下面通過(guò)代碼段來(lái)簡(jiǎn)單描述
export default{ ? ? data(){ ? ? ? datas:[], //這里的data是一個(gè)空數(shù)組用來(lái)存放從后端獲取到的數(shù)據(jù) } ? ? methods:{ ? ? ? ?async getDatas(){ ? ? ? ? let res = await get("/index/carousel/findAll");//發(fā)送請(qǐng)求 ? ? ? ? this.datas = res.data;//將請(qǐng)求到的數(shù)據(jù)返回到空數(shù)組里 } } ? ? created(){ ? ? ?this.getDatas()//生命周期 還沒(méi)加載時(shí)發(fā)送請(qǐng)求 } }
不一定要每個(gè)都用到,根據(jù)自身需求而應(yīng)用
vue2頁(yè)面和mixins中相同的data created mounted computed watch methods優(yōu)先級(jí)
data
頁(yè)面中定義的 data 會(huì)覆蓋 mixins 中同名的 data
created、mounted
先執(zhí)行 mixins 中生命周期函數(shù),再執(zhí)行頁(yè)面中的生命周期函數(shù)。
watch
先執(zhí)行 mixins 中的 watch 監(jiān)聽(tīng),再執(zhí)行頁(yè)面中同名的 watch 監(jiān)聽(tīng)。
computed
頁(yè)面中定義的 computed 屬性會(huì)覆蓋 mixins 中同名的 computed 屬性。
methods
頁(yè)面中定義的 methods 覆蓋mixins中同名的 methods 。
演示代碼如下
頁(yè)面 html 代碼
<template> <div> <el-input v-model="value"></el-input> <el-button type="primary" @click="onSubmit">submit</el-button> <div>{{ text }}</div> </div> </template>
頁(yè)面 js 代碼
export default { components: { DetailsTab, DataTab, }, mixins: [testMixin], data() { return { pageData: 'this is page data', commonData: 'this is common data in page', value: '', } }, watch:{ value() { console.log('page watch value'); }, }, computed: { text() { const text = `The input value is ${this.value}, this text is from page computed`; console.log(text); return text; }, }, created() { console.log('page created'); }, mounted() { console.log('page mounted'); console.log(this.pageData); console.log(this.commonData); console.log(this.mixinsData); }, methods: { onSubmit() { console.log('page methods'); }, }, }
mixins 代碼
export default { data() { return { mixinsData: 'this is mixins data', commonData: 'this is common data in mixins', } }, watch:{ value() { console.log('mixins watch value'); }, }, computed: { text() { const text = `The input value is ${this.value}, this text is from mixins computed`; console.log(text); return text; }, }, created() { console.log('mixins created'); }, mounted() { console.log('mixins mounted'); }, methods: { onSubmit() { console.log('mixins methods'); }, }, }
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue腳手架搭建及創(chuàng)建Vue項(xiàng)目流程的詳細(xì)教程
Vue腳手架指的是vue-cli,它是一個(gè)快速構(gòu)建**單頁(yè)面應(yīng)用程序(SPA)**環(huán)境配置的工具,cli是(command-line-interfac)命令行界面,下面這篇文章主要給大家介紹了關(guān)于Vue腳手架搭建及創(chuàng)建Vue項(xiàng)目流程的相關(guān)資料,需要的朋友可以參考下2022-09-09Vue動(dòng)態(tài)設(shè)置img的src不生效的問(wèn)題解決
本文主要介紹了Vue動(dòng)態(tài)設(shè)置img的src不生效的問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用
這篇文章主要為大家介紹了Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)
這篇文章主要介紹了使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue實(shí)現(xiàn)簡(jiǎn)單的跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的跑馬燈效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10