2022-30周 项目问题整理

新知识

1、git submodule 切换

前面刚学习了submodule的使用，就遇到有项目的module需要切换

remove old + add new

remove使用命令：git rm submodulename

2、好文学习

vue2.7+vite+ts实践：

vue3的proxy对象对IE的不支持，通常导致外部web vue2，内部系Web或工具类用vue3的分化；
vite支持vue3，加快服务器启动和打包速度，可配合 @vitejs/plugin-vue2插件（https://github.com/vitejs/vite-plugin-vue2）手动调整为 vue2;

//vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';

export default defineConfig({
  plugins: [
    vue(),
  ],
}  

@vitejs/plugin-legacy这个插件 配置在 避免打包以module模块引入不支持其他浏览器；

// vite.config.ts
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults']
    })
  ]
}

eslint-plugin-vue需要升级到9.x版本，同时ts配置文件加上下面的代码，否则标签中的变量会报未定义的错误。

//tsconfig.json
"vueCompilerOptions": {
	"target": 2.7
}

broswerlist 配置兼容停止维护的浏览器targets: ['> 0.01%, last 10 versions, Firefox ESR']；

如何有效的阅读前端需求

需求做久了，精彩出现的问题会是：细节沟通、急促排期、冷不丁的bug；
一般都是可以通过编码来解决，bug的引入时间引入人就往往是开发阶段开发者；
仔细思考，这些问题的原因往往是：需求逻辑扩展路径及错误兜底；

规范建模理解需求，check list：

• 明确为谁服务
• 明确需求的意义，可以做出更好的程序设计
• 明确软件的用户（用户习惯）
• 明确的系统用例（详细流程）
• 对每个系统用户（功能点），有明确的用例规约，包括以下内容：

• 前置条件和后置条件（在什么情况下触发，最后达到什么目的）
• 涉众（什么人会参与到这个用例）
• 基本路径（最顺利的交互路径）
• 扩展路径（处理意外的路径）
• 补充约束（用户输入信息的验证条件，软件可以运行的平台，质量要求等等）

UML图完整描述业务需求；

软件的目标是业务现状的改进，分为三种模式。
模式一：物流变成信息流（现金交易）
模式二：改善信息流转（多系统转一个系统）
模式三：封装领域逻辑（用软件系统代替人脑）

阿布思考法，就是遇到一个问题是，先假设自己拥有充足的资源，我会怎么实现这个需求？然后在回到现实中，用自己有限的资源，去山寨这个理想的方案。

思考：
阿布思考法很有道理，设想丰盈的资源状态，才能更好地了解到目前受到的限制以及设想解决办法，去考虑对比优劣，一点点的优化都会在脑海中变得清晰。
UML图虽然有个画图时间，但对于梳理业务逻辑是非常有必要的，也能清晰的反馈到产品对需求的理解是否有出入，评估的时候考虑这部分进去很有必要；

问题

2、[Vue warn]: Unhandled error during execution

检查代码，一般是忘记引入一些钩子函数了；

3、replaceAll is not a function

某字符替换功能已上线一个月了，突然有用户反馈如上报错，初以为调用replaceAll的变量不是字符串，但验证了有空串的兼容，且自己无法复现，因此考虑环境问题，发现该函数是 chrome v85及以上支持，用户用的是 v79的；
不管怎么说，任何函数 try…catch；

4、vue3 async setup页面显示空白

在正确渲染组件之前进行一些异步请求是很常见的事，但是太久没写竟有些忘记；空白就想到可能是没有编译，问题处在async异步上，看了下官方文档，果然找到解决方法：Suspense
在其父节点添加Suspense组件（异步组件），该组件有两个插槽：default 是在异步组件加载完成之后显示， fallback 代表异步组件加载中显示；

// 官方提供的对内置组件的使用还是很直观优秀的
<router-view v-slot="{ Component }">
  <template v-if="Component">
    <transition mode="out-in">
      <keep-alive>
        <suspense>
          <component :is="Component"></component>
          <template #fallback>
            <div>
              Loading...
            </div>
          </template>
        </suspense>
      </keep-alive>
    </transition>
  </template>
</router-view>

另外，setup异步时，生命周期钩子需要写在await函数的前面，不然会出现告警：onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.