Vue3?setup的注意點及watch監(jiān)視屬性的六種情況分析
一，setup須知
1.1setup的執(zhí)行時間
1.setup的執(zhí)行時間要比beforCreate執(zhí)行要早
export default {
name: "Demo",
beforeCreate(){
console.log('beforeCreate已執(zhí)行');
},
setup() {
console.log('setup已執(zhí)行');
let person = reactive({
name: "小明",
age: 20,
});
return {
person,
};
},
};1.2.steup參數(shù)
setup的參數(shù)
1.props: 值為對象，包含: 組件外部傳遞過來，且組件內(nèi)部聲明接收了的屬性
2.context:上下文對象
①attrs:值為對象，包含: 組件外部傳遞過來，但沒有在props配置中聲明的屬性,相當于 this.$attrs
export default {
name: "Demo",
props:['msg','age'],
setup(props) {
console.log(props);
let person = reactive({
name: "小明",
age: 20,
});
return {
person,
};
},
};
②slots: 收到的插槽內(nèi)容,相當于 this.$slots。
在App中定義插槽
<template v-slot:qwe> <span>123</span> </template> <template v-slot:ewq> <span>321</span> </template>
在子組件中獲取到插槽
console.log(context.slots); // 得到插槽
③emit: 分發(fā)自定義事件的函數(shù),相當于 this.$emit。
在App中寫一個自定義事件并且傳給組件
<Demo @hi="Hello" msg="山魚" age=10> </Demo>
setup() {
function Hello(){
console.log('你好！');
}
return {
Hello
}
}然后去到子組件使用context.comit獲取到自定義事件
function point(){
context.emit('hi',666)
}
5TgxPT2v-1681788304084)]
```js
function point(){
context.emit('hi',666)
} 與Vue2中的computed配置功能一致
import { reactive,computed} from "vue";
export default {
name: "Demo",
setup() {
let person = reactive({
firstName: "小",
lastName: "明",
});
// 計算屬性的簡寫形式，不考慮修改，是只讀的
/*person.fullName= computed(()=>{
return person.firstName+'-'+person.lastName
}) */
// 計算屬性的完整形式（可以讀改）
person.fullName= computed({
get(){
return person.firstName +'-'+person.lastName
},
set(value){
const arr = value.split('-')
person.firstName = arr[0]
person.lastName = arr[1]
}
})
return {
person,
};
},
};二，watch監(jiān)視屬性
有兩種watch，分別是單個屬性數(shù)據(jù)監(jiān)視，和多個屬性數(shù)據(jù)監(jiān)視
watch中的三個參數(shù)分別為，監(jiān)視的對象，監(jiān)視的函數(shù)，監(jiān)視屬性的配置
監(jiān)視ref所定義的數(shù)據(jù)
①監(jiān)視屬性監(jiān)視ref的一個響應(yīng)式的值
watch(sum, (newvalue, oldvalue) => {
console.log('當前值為'+newvalue, '以前值為'+oldvalue);
});②監(jiān)視ref所定義的多個響應(yīng)式數(shù)據(jù)
watch([sum,msg], (newvalue, oldvalue) => {
console.log('當前值為'+newvalue, '以前值為'+oldvalue);
});監(jiān)視reactive所定義的數(shù)據(jù)
①監(jiān)視reactive定義的數(shù)據(jù)的變化
使用reactive定義的數(shù)據(jù)無法使用watch正確的獲取newValue
并且會強制開啟深度監(jiān)視
watch(person,(newValue, oldValue) => {
console.log('person變化了',newValue,oldValue)
})②監(jiān)視reactive所定義的響應(yīng)式數(shù)據(jù)的某個屬性
watch(()=>person.name,(newValue,oldValue)=>{
console.log('person.name發(fā)生了變化',newValue,oldValue)
})③監(jiān)視reactive所定義的響應(yīng)式數(shù)據(jù)的某些屬性
watch([()=>{person.age},()=>{person.name}],(newValue,oldValue)=>{
console.log('person.name發(fā)生了變化',newValue,oldValue)
})④特殊形況
注：該情況監(jiān)視的是recative所定義的對象中的某個屬性，所以deep可以開啟
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person.name發(fā)生了變化',newValue,oldValue)
}, {deep: true})到此這篇關(guān)于Vue3 setup的注意點及watch監(jiān)視屬性的六種情況分析的文章就介紹到這了,更多相關(guān)vue3 watch監(jiān)視屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue3中setup語法糖下父子組件間傳遞數(shù)據(jù)的方式
- Vue3.2中setup語法糖的使用教程分享
- vue3中＜script?setup＞?和?setup函數(shù)的區(qū)別對比
- vue3在setup中使用mapState解讀
- Vue3中關(guān)于setup與自定義指令詳解
- Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)詳解
- Vue3?setup?的作用實例詳解
- Vue3?setup添加name的方法步驟
- Vue3的setup在el-tab中動態(tài)加載組件的方法
- vue3.0?setup中使用vue-router問題
- vue3中setup語法糖下通用的分頁插件實例詳解
- vue3?setup語法糖各種語法新特性的使用方法(vue3+vite+pinia)
- vue3 setup的使用和原理實例詳解
相關(guān)文章
這篇文章主要為大家詳細介紹了vue-awesome-swiper滑塊插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
Vue首屏加載過慢出現(xiàn)長時間白屏的實現(xiàn)
本文主要介紹了Vue首屏加載過慢出現(xiàn)長時間白屏的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家介紹了調(diào)用createApp?時Vue工作過程原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
Vue3.2(21年8月10日)相比于Vue3新增了語法糖,減少了代碼冗余,下面這篇文章主要給大家介紹了關(guān)于Vue3.2語法糖使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue-cli3配置與跨域處理方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
vue與iframe頁面數(shù)據(jù)互相通信的實現(xiàn)示例
這篇文章主要給大家介紹了vue與iframe頁面數(shù)據(jù)互相通信的實現(xiàn)示例,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
vue3+vite使用History路由模式打包部署項目的步驟及注意事項
這篇文章主要介紹了vue3+vite使用History路由模式打包部署項目的步驟及注意事項,配置過程包括在Vue項目中設(shè)置路由模式、調(diào)整打包配置以及Nginx服務(wù)器的配置,正確的部署配置能夠確保應(yīng)用順利運行,提升用戶體驗,需要的朋友可以參考下2024-10-10
Vue中的transition封裝組件的實現(xiàn)方法
這篇文章主要介紹了Vue中的transition封裝組件的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue使用echarts如何實現(xiàn)雙柱狀圖和雙y軸的柱狀圖
這篇文章主要介紹了vue使用echarts如何實現(xiàn)雙柱狀圖和雙y軸的柱狀圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了Vue-Element-Admin前端接入SSO的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04