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

2022 年 7 月 25 日
本文字数：2271 字
阅读完需：约 7 分钟

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适用场景

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.jsconst router = new VueRouter({    routes: [{        path: 'article/:articleId'        component: Article,        //props: (route) => {articleId: route.params.articleId} //原文返回对象没加小括号包裹，具有二义性        props: (route) => ({articleId: route.params.articleId})    }]})
// your componentsetup(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 }    );}