在使用vue3开发了几个项目后的小技巧分享

最新推荐文章于 2024-09-02 17:14:49 发布

冬久久

最新推荐文章于 2024-09-02 17:14:49 发布

阅读量541

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_45236510/article/details/119460818

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文总结了Vue3中的关键特性，包括reactive的使用，如何保持解构后的响应式，以及VueRouter4中创建独立router-view的方法。此外，还介绍了vue3中替代$bus的mitt库，以及全局组件封装的最佳实践。最后，提供了在setup和非setup中调用全局方法的示例。

摘要由CSDN通过智能技术生成

vue3使用总结

reactive
通过reactive定义的响应式数据，解构出来后会丢失响应；需要使用toRefs，为源响应式对象上的property新创建一个 ref

  const testReactiveVal = reactive({ name: '渣渣辉' , desc: '一刀99999'});
  const { name, desc } =  testReactiveVal; // name, desc丢失响应式
  const { name, desc } =  toRef(testReactiveVal); // 保持响应式

reset数据并保持响应式

  const baseData = { name: '渣渣辉' , desc: '一刀99999'};
  const testReactiveVal = reactive(baseData);
  // reset数据
  // testReactiveVal = reactive(baseData); //   如果这么写数据改变ui不会改变,
  Object.assign(testReactiveVal, baseData);

vueRouter4中创建一个单纯的新的router-view页面
应用场景：大型项目中，经常会创建子路由，而父路由又只有个router-view的页面；通过这个方式可以不用写那个index.vue文件，也不用在router中引入；

  import { h, resolveComponent } from 'vue';

  const RouteView = {
    render: () => h(resolveComponent('router-view')),
  };

  // 使用
  {
    path: '/chat',
    component: RouteView,
    redirect: '/chat/user',
    children: [],
  }

顺便提一下vueRouter3中：

const RouteView = {
  name: 'RouteView',
  render: h => h('router-view')
}

vue3没有$bus，代替方法使用mitt
因为vue2是new Vue()出来的，是Vue的实例，所以可以在Vue的原型链上挂上$bus，实例能访问到；但是vue3是Vue.createApp出来的；
mitt使用示例

  // 推荐，可以在App.vue中定义，也可以在一个单独的js文件中定义，看你个人习惯
  export const emitter = mitt();  // 这样定义用的时候需要import emitter from '@/App.vue'

  // 不推荐，也可在挂在 app上;
  const app = createApp(App);
  const emitter = mitt();
  app.$bus = emitter;  // 这样的话在setup中需要通过getCurrentInstance获取实例，

全局组件的封装，如gLoading,gTips等等
通过provide/reject，以及原型链实现便捷的调用

  import { createApp, inject } from 'vue';
  import GLoading from './GLoading.vue';

  const provideKey = 'gLoading';
  const proveideKey2 = 'gTips';

  export default {
    install(app) {
      const comp = createApp(GLoading);
      const div = document.createElement('div');
      const instance = comp.mount(div);
      app.provide(provideKey, {
        gLoadingShow() { instance.show(); },
        gLoadingHidden() { instance.hidden(); },
      });
      app.provide(proveideKey2, {
        gTipsSuccess: (...args) => instance.showTips('success', ...args),
        gTipsFail: (...args) => instance.showTips('fail', ...args),
      });

      document.body.appendChild(div);
      app.config.globalProperties.$gLoading = {
        show() { instance.show(); },
        hidden() { instance.hidden(); },
      };
      app.config.globalProperties.$gTips = {
        success: (...args) => instance.showTips('success', ...args),
        fail: (...args) => instance.showTips('fail', ...args),
      };
    },
  };

  export const useGLoading = function () {
    return inject(provideKey);
  };

  export const useGTips = function () {
    return inject(proveideKey2);
  };

在main.js中

  import GLoading from '@/components/gLoading';
  app.use(GLoading);

然后用的时候

  // setup中
  import { useGTips } from '@/components/gLoading';
  setup() {
    const { gTipsFail } = useGTips();
    gTipsFail('error');
  }
  // 在非setup中
  this.$gGtipsFail('error');

结语

长路漫漫，且行且珍惜