在使用vue3开发了几个项目后的总结

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页面

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

结语

长路漫漫，且行且珍惜