vue3开发问题记录

1.cra 创建vue3 项目控制台warning

控制台warning Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

在vue.config.js 中添加以下配置

  
  chainWebpack: (config) => {
    // 解决 vue3 cra创建项目 控制台warning Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.
    // https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags
    config.plugin("define").tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: "true",
        __VUE_PROD_DEVTOOLS__: "false",
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",
      });
      return definitions;
    });
  },
});

2. 使用echarts 绘制柱状图，增加dataZoom, 拖拽，无法根据拖拽区域显示柱状图

代码记录：优快云

修改echarts 实例定义变量从ref 修改为shallowRef， ref 会监听所有的变量，可能会导致性能问题；