vue2 的watch回顧
我們先回顧一下vue2中watch
《watch性能優(yōu)化：vue watch對(duì)象鍵值說(shuō)明-immediate屬性詳解》
《vue中methods/watch/computed對(duì)比分析，watch及computed原理挖掘》
watch和computed很相似，watch用于觀察和監(jiān)聽(tīng)頁(yè)面上的vue實(shí)例，當(dāng)然在大部分情況下我們都會(huì)使用computed，但如果要在數(shù)據(jù)變化的同時(shí)進(jìn)行異步操作或者是比較大的開(kāi)銷，那么watch為最佳選擇。watch為一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象。
如果在data中沒(méi)有相應(yīng)的屬性的話，是不能watch的，這點(diǎn)和computed不一樣。
適用場(chǎng)景：
watch實(shí)現(xiàn)原理
this.$watch()手動(dòng)注入
比如我們可以手動(dòng)注入監(jiān)聽(tīng)器，只有一定條件時(shí)，才需要監(jiān)聽(tīng)，這個(gè)也可以大大的提升性能
created()?{
??this.debounceEvent?=?debounce(
????this.demoEvent,
????this.curretnDelay,
??);
??//?只有圖表編輯頁(yè)面，才需要監(jiān)聽(tīng)
??if?(this.$route.name?===?'chartDialog')?{
????this.$watch('dataOptions',?{
??????handler()?{
????????//?只有圖表編輯頁(yè)面，才需要監(jiān)聽(tīng)
????????this.renderData(true);
????????console.log('watch?dataOptions');
??????},
??????deep:?true,
????});
??}
}
vue2 的watch不再贅述
vue3?composition api 監(jiān)聽(tīng)路由變化
https://router.vuejs.org/zh/api/#routelocationraw
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html# 響應(yīng)路由參數(shù)的變化
組件內(nèi)路由導(dǎo)航守衛(wèi)
使用組件內(nèi)路由導(dǎo)航守衛(wèi) onBeforeRouteUpdate
setup(){
???onBeforeRouteUpdate(?to?=>{
???//?console.log(to.params,?to.query)
???})
}
推薦使用這個(gè)方法
導(dǎo)航守衛(wèi)-全局后置鉤子
路由守衛(wèi)中監(jiān)聽(tīng)路由參數(shù)，再使用計(jì)算屬性導(dǎo)出，可全局使用
import?{?RouteParams,?LocationQueryRaw?}?from?'vue-router';
import?{?computed,?reactive?}?from?'vue';
import?router?from?'@/router/index';
const?routeData?=?reactive<{params:?RouteParams,?query:?LocationQueryRaw}>({?params:?{},?query:?{}?});
router.afterEach((route)?=>?{
??routeData.params?=?route.params;
??routeData.query?=?route.query;
});
export??function?useRouteParam()?{
??return?computed(()?=>?routeData.params);
}
export?function?useRouteQuery()?{
??return?computed(()?=>?routeData.query);
}
在頁(yè)面內(nèi)使用
export?default?defineComponent({
?setup()?{
???const?params?=?useRouteParam();
???const?spaceId?=?params.value.space_uid;
?}
}
z'合并時(shí)不推薦的。沒(méi)有必要全局
將參數(shù)與路由解耦，注入到組件的props中去進(jìn)行監(jiān)聽(tīng)
//?router/index.js
const?router?=?new?VueRouter({
????routes:?[{
????????path:?'article/:articleId'
????????component:?Article,
????????//props:?(route)?=>?{articleId:?route.params.articleId}?//原文返回對(duì)象沒(méi)加小括號(hào)包裹，具有二義性
????????props:?(route)?=>?({articleId:?route.params.articleId})
????}]
})
//?your?component
setup(props)?{
???const?article?=?reactive({...});
???function?fetchArticle(id)?{
??????//assign?article..
???}
???watch(()?=>?props.articleId,?fetchArticle)
???return?{?article?};
}
需要立即執(zhí)行回調(diào)函數(shù)，可以引入watchEffect
需要立即執(zhí)行回調(diào)函數(shù)，可以引入watchEffect，不需要傳參數(shù)直接把回調(diào)扔進(jìn)去，代碼簡(jiǎn)介明了（回調(diào)中自動(dòng)收集依賴，不要要手動(dòng)指定，且第一次回調(diào)立即觸發(fā)）
import?{?watchEffect?}?from?"vue"
//?···
setup(props){
???function?initData(){
?????//?使用了props
??}
??watchEffect(initData)??//initData立即執(zhí)行，且當(dāng)props中依賴的數(shù)據(jù)改變時(shí)，會(huì)自動(dòng)執(zhí)行
}
在組件內(nèi)watch
setup()?{
???const?article?=?reactive({...});
???function?fetchArticle(id)?{
??????//assign?article..
???}
???const?route?=?useRoute();
???watch(
??????()?=>?route.params,
??????()?=>?{
????????const?{?articleId?}?=?route.params;
????????if?(articleId)?{
??????????fetchArticle(articleId);
????????}
??????},
??????{?immediate:?true,?deep:?true?}
????);
}
官方文檔給的案例也是這個(gè)：https://router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup
頁(yè)面跳轉(zhuǎn)傳了 params 但是無(wú)效
傳 params 的時(shí)候要傳 name
加入 { immediate: true,?deep: true?} 就可以了
參考文章：
Vue3 監(jiān)聽(tīng)路由變化?https://trycoding.fun/JavaScript/vue3-watch-route/
Vue3.0 中監(jiān)聽(tīng)路由參數(shù)的改變方法大全?https://blog.csdn.net/qq_41777791/article/details/113100730
https://medium.com/js-dojo/watch-vue-route-params-query-with-composition-api-97b3c8c402e
轉(zhuǎn)載本站文章《vue2升級(jí)vue3：composition api中監(jiān)聽(tīng)路由參數(shù)改變》,
請(qǐng)注明出處：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8860.html
