vue2升级vue3：composition api中监听路由参数改变

原创

周陆军博客

发布于 2022-07-25 22:58:55

1.3K0

发布于 2022-07-25 22:58:55

文章被收录于专栏：前端博客前端博客

vue2 的watch回顾

我们先回顾一下vue2中watch

《watch性能优化：vue watch对象键值说明-immediate属性详解》

《vue中methods/watch/computed对比分析，watch及computed原理挖掘》

watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。 如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样。适用场景：

watch实现原理

this.$watch()手动注入比如我们可以手动注入监听器，只有一定条件时，才需要监听，这个也可以大大的提升性能 created()?{ ??this.debounceEvent?=?debounce( ????this.demoEvent, ????this.curretnDelay, ??); ??//?只有图表编辑页面，才需要监听 ??if?(this.$route.name?===?'chartDialog')?{ ????this.$watch('dataOptions',?{ ??????handler()?{ ????????//?只有图表编辑页面，才需要监听 ????????this.renderData(true); ????????console.log('watch?dataOptions'); ??????}, ??????deep:?true, ????}); ??} }

vue2 的watch不再赘述

vue3?composition api 监听路由变化

组件内路由导航守卫

使用组件内路由导航守卫 onBeforeRouteUpdate

setup(){
???onBeforeRouteUpdate(?to?=>{
???//?console.log(to.params,?to.query)
???})
}

推荐使用这个方法

导航守卫-全局后置钩子

路由守卫中监听路由参数，再使用计算属性导出，可全局使用

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);
}

在页面内使用

export?default?defineComponent({
?setup()?{
???const?params?=?useRouteParam();
???const?spaceId?=?params.value.space_uid;
?}
}

z'合并时不推荐的。没有必要全局

将参数与路由解耦，注入到组件的props中去进行监听

//?router/index.js
const?router?=?new?VueRouter({
????routes:?[{
????????path:?'article/:articleId'
????????component:?Article,
????????//props:?(route)?=>?{articleId:?route.params.articleId}?//原文返回对象没加小括号包裹，具有二义性
????????props:?(route)?=>?({articleId:?route.params.articleId})
????}]
})

//?your?component
setup(props)?{
???const?article?=?reactive({...});
???function?fetchArticle(id)?{
??????//assign?article..
???}
???watch(()?=>?props.articleId,?fetchArticle)
???return?{?article?};
}

需要立即执行回调函数，可以引入watchEffect

需要立即执行回调函数，可以引入watchEffect，不需要传参数直接把回调扔进去，代码简介明了（回调中自动收集依赖，不要要手动指定，且第一次回调立即触发）

import?{?watchEffect?}?from?"vue"
//?···
setup(props){
???function?initData(){
?????//?使用了props
??}
??watchEffect(initData)??//initData立即执行，且当props中依赖的数据改变时，会自动执行
}

在组件内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?}
????);
}

官方文档给的案例也是这个：https://router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup