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