刘勇虎的官方网站

目录：

• 一、Webpack
• 二、Webpack 5 移除 Node.js 核心模块 Polyfill
• 三、Vue 3 中 $listeners 被移除
• 四、Vue 中使用 JSON.stringify 判断对象变化的局限性
• 五、Vue 3 + Vite 打包后路径引用错误
• 六、Vue 3 中 toRaw 方法影响响应性
• 七、Vue 3 响应式数据在 v-for 中无法更新

一、Webpack

1. 设置反向代理（proxy）

   • 在 vue.config.js 中配置 devServer.proxy 是开发阶段解决跨域问题的有效方法。
   • 示例代码中 /priceParList 是请求路径前缀，会自动匹配到目标服务器地址 http://localhost:3000。

2. 设置反向代理失败

   • 如果代理未生效，请检查：
     • 请求地址是否与代理配置中的前缀匹配。
     • 是否遗漏了端口号（如：/api 不会匹配到 http://localhost/api，除非明确指定）。
     • 网络请求是否使用 HTTPS，可能需要额外配置 secure: false。

3. Vue Router 传参

   • params 和 query 只能传递基本类型数据（字符串、数字等），如果需要传递对象，可以先使用 JSON.stringify() 序列化，再在接收方用 JSON.parse() 还原。
   • 注意：通过 URL 传递的数据应尽量避免敏感信息。

4. Vue CLI 怎么兼容 ES6+

   • Vue CLI 默认使用 Babel 编译 ES6+ 语法以支持旧浏览器。
   • 配置项说明：
     • targets.browsers: 指定目标浏览器范围。
     • useBuiltIns: 控制 polyfill 引入方式，推荐使用 'usage' 以减少冗余代码。
     • corejs: 推荐使用版本 3，因为它更全面且模块化更好。

5. 转译 node_modules 中的代码

   • 如果第三方库依赖了 ES6+ 特性，可以通过 transpileDependencies 配置来强制编译这些包。
   • 使用正则表达式或数组形式指定依赖名，例如：['some-es6-library'] 或 /node_modules\/some-es6-library/

6. 打包导出项分析

   • Webpack 打包后的代码中可能会包含 __webpack_require__.d()，这是用于定义 exports 的函数。
   • 如果你发现某些变量没有正确导出，可以检查源码中是否正确使用了 export 语句。

二、Webpack 5 移除 Node.js 核心模块 Polyfill

• 问题描述

  • Webpack 5 不再默认为 Node.js 核心模块（如 path, fs, os）提供 polyfill，这可能导致某些第三方库构建失败。

• 解决方案

  • 安装 node-polyfill-webpack-plugin 插件，并在 vue.config.js 中引入该插件。
  • 示例配置中使用了 defineConfig 来确保类型安全和更好的 IDE 支持。

三、Vue 3 中 $listeners 被移除

• 背景

  • Vue 3 中不再支持 $listeners，所有事件监听器都被整合到 vnode.props 中。

• 替代方案

  • 可以通过访问父组件的 vnode.props 属性来判断某个事件是否存在并触发自定义逻辑。
  • 示例代码中使用了 instanceRef.value.$parent.$.vnode.props.onSearchAction 来检测事件是否存在。

四、Vue 中使用 JSON.stringify 判断对象变化的局限性

• 问题

  • 在 watch 中使用 JSON.stringify 判断对象变化时，若对象层级较深，可能无法准确识别变更。

• 解决方案

  • 使用 { deep: true } 配置选项，使 watch 监听深层变化。
  • 注意：在深度监听模式下，新值和旧值是同一个引用，不能直接比较。

• 示例

  const state = reactive({ count: 0 });
  watch(
    () => state,
    (newValue, oldValue) => {
      // newValue === oldValue
    },
    { deep: true }
  );
  

五、Vue 3 + Vite 打包后路径引用错误

• 问题描述

  • 构建成功但运行时报错 Uncaught TypeError: assign is not a function，通常发生在引入某些依赖时。

• 解决方案

  • 删除冲突的依赖或调整构建配置。
  • 若多个第三方库同时引入相同依赖，尝试使用 external 配置排除重复引入。

六、Vue 3 中 toRaw 方法影响响应性

• 问题

  • toRaw 会返回原始对象，但会丢失响应性。若在计算属性中使用它处理 props，则可能导致更新失效。

• 解决方案

  • 使用 cloneDeep 替代 toRaw，确保保留响应性的同时操作副本数据。

• 示例

  const paginationState = computed(() => {
    const pagination = cloneDeep(props.pagination) as any;
    if (pagination.size <= 0) {
      delete pagination.size;
    }
    return {
      ...defaultPagination(),
      ...pagination,
    };
  });
  

七、Vue 3 响应式数据在 v-for 中无法更新

• 问题

  • 使用 v-for 渲染响应式数据时，若直接修改数组索引或 length，Vue 无法检测到变化。

• 解决方案

  • 使用 Vue 提供的变异方法（如 push, pop, splice）来修改数组。
  • 或者使用 Vue.set 显式通知 Vue 数据变化。

• 示例

  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  

  // 正确做法
  items.push(newItem);
  // 或
  Vue.set(items, index, newItem);