• 欢迎光临~

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

开发技术 开发技术 2022-07-25 次浏览

vue2 的watch回顾

我们先回顾一下vue2中watch

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

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

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

如果在data中没有相应的属性的话,是不能watch的,这点和computed不一样。

适用场景:

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

watch实现原理

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

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 监听路由变化

  • https://router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup

  • https://router.vuejs.org/zh/api/#routelocationraw

  • https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html# 响应路由参数的变化

 

 

组件内路由导航守卫

使用组件内路由导航守卫 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

页面跳转传了 params 但是无效

  • 传 params 的时候要传 name

  • 加入 { immediate: true, deep: true } 就可以了

 

参考文章:

Vue3 监听路由变化 https://trycoding.fun/JavaScript/vue3-watch-route/

Vue3.0 中监听路由参数的改变方法大全 https://blog.csdn.net/qq_41777791/article/details/113100730

https://medium.com/js-dojo/watch-vue-route-params-query-with-composition-api-97b3c8c402e

 


转载本站文章《vue2升级vue3:composition api中监听路由参数改变》,
请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8860.html

程序员灯塔
转载请注明原文链接:vue2升级vue3:composition api中监听路由参数改变
喜欢 (0)