集体踩坑 vue3+pinia 1个月后整体评分：
vue3
上手容易 ★★★★☆ 写过react的上手更容易
开发敌对 ★★★★☆ 局部插件版本独自管制

pinia
上手容易 ★★★★★ 写过vuex的上手更容易
开发敌对 ★★★★★ 类型申明敌对

以下记录体验新玩具的一些应用感触与一些开发中遇到的坑。

感触

  • 之前始终习惯vue class style component,当初换成 defineComponent更相似于react function component.整体开发上没有受影响
  • pinia在 组件setup生命周期里useStore()创立间接应用，包含vue-router也用useRouter的形式,整体上手复杂度和Vuex的import大同小异。
  • 在类型申明上pinia更具劣势，可能在vue组件tsx中取得很好的类型申明提醒，前提是在pinia store中都要手动标注。特地是action的返回类型。
  • pinia store的申明比vuex缩小了mutation的模型局部。在store建数据模型时能够更正当的形象业务模型，也防止了action-mutation能力批改state的麻烦。当然这样也有害处，原我的项目中简单的mutation相当于要独自抽离成filter之类的概念，但这种filter也不会很多，间接批改state还是比拟不便的，除非前后端的数据转换特地多。
  • 当把 attrs,slots,emit 写成setup生命周期入参时，好像又回到了angular scope依赖注入的感觉，对开发影响不大，只是每个文件多了一行而已，写法从this.$xxx改成间接写emit之类的反而更简短。
  • 如果是复制模板文件很容易遗记改defineComponent里的name参数，也就是组件名称。对业务不影响但在vue-devtool里会显示成雷同的组件名称，不容易排查。

遇到的坑

  1. 对 vue-svg-loader 锁版本

    • 应用"vue-svg-loader": "0.17.0-beta.2"

    • 配置 vue.config.js如下：

      chainWebpack: (config) => {// vue-svg-loaderconst svgRule = config.module.rule("svg");svgRule.uses.clear();svgRule.delete("type");svgRule.delete("generator");svgRule.use("vue-loader").loader("vue-loader").end().use("vue-svg-loader").loader("vue-svg-loader");},

  2. 对pinia 锁版本

    • 应用"pinia": "^2.0.0-rc.0"

  3. vue3 和目前的浏览器插件devtool 有抵触，

    • 须要下载beta版的vue-devtool (BUGFIX Vue.js devtools 5.0.0 beta 3 fix)

    • 如果嫌2个vue devtool切换不不便，能够自行装置vue-devtool,并配置到html模板；例如：

       <% if (process.env.NODE_ENV==='development') { %> <script src="http://localhost:8098"></script> <% } %>

  4. vue router 新写法匹配其余路由

    { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFoundPage,  },

  5. css module反对：

    • 配置vue.config.js

      css: {requireModuleExtension: true,loaderOptions: {css: { modules: {   localIdentName: NODE_ENV === "development" ? "[path]-[local]" : "[local]-[hash:4]", },},}, },