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參數
setup的參數
1.props: 值為對象，包含: 組件外部傳遞過來，且組件內部聲明接收了的屬性
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: 收到的插槽內容,相當于 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ā)自定義事件的函數,相當于 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，分別是單個屬性數據監(jiān)視，和多個屬性數據監(jiān)視
watch中的三個參數分別為，監(jiān)視的對象，監(jiān)視的函數，監(jiān)視屬性的配置
監(jiān)視ref所定義的數據
①監(jiān)視屬性監(jiān)視ref的一個響應式的值
watch(sum, (newvalue, oldvalue) => {
console.log('當前值為'+newvalue, '以前值為'+oldvalue);
});②監(jiān)視ref所定義的多個響應式數據
watch([sum,msg], (newvalue, oldvalue) => {
console.log('當前值為'+newvalue, '以前值為'+oldvalue);
});監(jiān)視reactive所定義的數據
①監(jiān)視reactive定義的數據的變化
使用reactive定義的數據無法使用watch正確的獲取newValue
并且會強制開啟深度監(jiān)視
watch(person,(newValue, oldValue) => {
console.log('person變化了',newValue,oldValue)
})②監(jiān)視reactive所定義的響應式數據的某個屬性
watch(()=>person.name,(newValue,oldValue)=>{
console.log('person.name發(fā)生了變化',newValue,oldValue)
})③監(jiān)視reactive所定義的響應式數據的某些屬性
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})到此這篇關于Vue3 setup的注意點及watch監(jiān)視屬性的六種情況分析的文章就介紹到這了,更多相關vue3 watch監(jiān)視屬性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
- vue3中setup語法糖下父子組件間傳遞數據的方式
- Vue3.2中setup語法糖的使用教程分享
- vue3中＜script?setup＞?和?setup函數的區(qū)別對比
- vue3在setup中使用mapState解讀
- Vue3中關于setup與自定義指令詳解
- Vue3中的setup語法糖、computed函數、watch函數詳解
- 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的使用和原理實例詳解
相關文章
這篇文章主要介紹了ElementUI之Message功能拓展詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
vue實現(xiàn)將自己網站(h5鏈接)分享到微信中形成小卡片的超詳細教程
在微信小程序中,可以很簡單的分享一個頁面,比微信H5簡單多了,下面這篇文章主要給大家介紹了關于vue實現(xiàn)將自己網站(h5鏈接)分享到微信中形成小卡片的超詳細教程,需要的朋友可以參考下2023-02-02
vue項目中v-model父子組件通信的實現(xiàn)詳解
vue.js，是一個構建數據驅動的 web 界面的庫。Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數據綁定和組合的視圖組件。下面這篇文章主要給大家介紹了關于vue項目中v-model父子組件通信實現(xiàn)的相關資料，需要的朋友可以參考下。2017-12-12
這篇文章主要為大家詳細介紹了Vue.js表單控件實踐,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
使用Webpack提升Vue.js應用程序的4種方法（翻譯）
這篇文章主要介紹了使用Webpack提升Vue.js應用程序的4種方法（翻譯），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要為大家詳細介紹了vue原生方法自定義右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在vue+element ui框架里實現(xiàn)lodash的debounce防抖
今天小編就為大家分享一篇在vue+element ui框架里實現(xiàn)lodash的debounce防抖，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue組件實現(xiàn)列表自動無限循環(huán)的方法
最近剛好有個功能需要實現(xiàn)列表的無限循環(huán)滾動,這篇文章主要給大家介紹了關于vue組件實現(xiàn)列表自動無限循環(huán)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
今天來說說權限管理，因為網上已經有很多關于這方面的很多內容，下面這篇文章主要給大家介紹了關于vue權限問題的完美解決方案，需要的朋友們下面來一起學習學習吧2019-05-05
這篇文章主要為大家詳細介紹了vue的axios和mock.js，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02