2022.05.13

受控组件和非受控组件

受控组件和非受控组件

vue 的事件修饰符有哪些

.sync 代表什么意思

<!-- 父组件给子组件传入一个setNum函数 -->
<child :num="numParent" @setNum="(res) => numParent = res"></child>

//子组件通过调用这个函数来实现修改父组件的状态
methods: {
    changNum(){
      this.$emit('setNum',666)
}

如果是使用 sync

<!-- 父组件给子组件传入一个setNum函数 -->
<child :num.sync="numParent">

//子组件通过调用这个函数来实现修改父组件的状态
methods: {
    changNum(){
      this.$emit('update:num',666)
}

• update：固定部分，vue 约定俗成的，注意必须添加 update：的前缀才能正确触发事件

• num 是要修改的参数的名称，是我们手动配置的，与传入的参数名字对应起来

此时，子组件只需要触发 changeNum 函数就能执行父组件中的 setNum 函数从而改变父组件中 numParent 的值

实现父子组件双向绑定 vue 为了考虑组件的可维护性，是不允许子组件改变父组件传的 props 值，父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit 向父组件通信，通过这种间接的方式改变父组件的 data，从而实现子组件改变 props 值

深拷贝怎么解决循环引用的处理

解决方案： 我们只需要在每次对复杂数据类型进行深拷贝前保存其值，如果下次又出现了该值，就不在进行拷贝，直接截止。

可以采用 ES6 中的 WeakMap 或者 Map 数据结构来存储每一次的复杂类型的值。

深浅拷贝

// test
const seven = {
  name: "seven",
};
const juejin = {
  name: "juejin",
  relative: seven,
};
seven.relative = juejin;
const newObj = deepClone(seven);
console.log(newObj);
// { name: 'seven', relative: { name: 'juejin', relative: null } }

发布部署 一整套的流水线打包流程

1. 代码提交与触发自动化构建

我们项目是托管到 gitlab 上面的，所以我们可以通过 gitlab 的 webhook 来触发自动化构建，当我们在 gitlab 上面提交代码的时候，gitlab 会向我们配置的 webhook 地址发送一个请求，我们可以在这个请求中获取到提交的代码信息，然后进行自动化构建。

具体实现上，我们在 GitLab 项目设置中配置了 webhook，指向 Jenkins 服务器的触发 URL。当开发人员向特定分支（如 master 或 release）提交代码或创建合并请求时，GitLab 会自动触发构建流程。我们还设置了分支保护规则，要求代码必须经过 Code Review 和 CI 检查才能合并到主分支。

2. 自动化构建

我们可以通过 Jenkins 来进行自动化构建，Jenkins 是一个开源的自动化构建工具，我们可以在 Jenkins 上面配置我们的构建任务，当 gitlab 向我们的 webhook 地址发送请求的时候，我们可以在这个请求中获取到提交的代码信息，然后通过 Jenkins 的 API 来触发我们的构建任务，Jenkins 会根据我们的配置来进行构建，构建成功后会生成一个构建产物。

在 Jenkins 中，我们使用 Jenkinsfile 定义了完整的构建流程，包括：

• 拉取最新代码

• 安装依赖（使用缓存加速）

• 运行单元测试

• 构建前端资源（webpack 打包优化，如代码分割、Tree Shaking）

• 生成构建报告

我们还针对构建速度进行了优化，如使用并行构建、增量构建等技术，将构建时间从原来的 15 分钟缩短到了 5 分钟以内。

3. 代码质量检查

为确保代码质量，我们在流水线中集成了多种代码检查工具：

• ESLint 和 Prettier：检查代码风格和格式问题

• SonarQube：进行静态代码分析，检测潜在的 bug、安全漏洞和代码气味

• Jest 单元测试：确保代码功能正常，并生成测试覆盖率报告

• Lighthouse：检查前端性能、可访问性和最佳实践

我们设置了质量门禁，如果代码不符合预定标准（如测试覆盖率低于 80%、存在严重 bug 或安全漏洞），构建会自动失败并通知开发团队。这确保了只有高质量的代码才能进入下一阶段。

4. 部署到测试环境

代码质量检查通过后，系统会自动部署到测试环境：

• 使用 Docker 容器化应用，确保环境一致性

• 通过 Kubernetes 进行部署，实现零停机更新

• 自动执行数据库迁移脚本

• 部署完成后，触发自动化 E2E 测试（使用 Cypress）

我们实现了环境隔离，每个功能分支都可以部署到独立的测试环境，便于并行测试不同功能。测试环境的 URL 会自动发送到对应的 GitLab 合并请求评论中，方便测试人员和产品经理查看。

5. 部署到生产环境

生产环境部署采用了更严格的控制流程：

• 需要手动确认才能部署到生产环境

• 使用蓝绿部署策略，先部署到备用环境，验证无误后切换流量

• 实施灰度发布，逐步将用户流量从旧版本迁移到新版本

• 使用 AWS CloudFront 或阿里云 CDN 分发静态资源，提高加载速度

• 前端资源使用版本化命名，确保缓存更新

我们的部署过程还包括自动化的数据备份，确保在出现问题时能够快速恢复。整个部署过程通常在 10-15 分钟内完成，最大限度减少了用户影响。

6. 通知与监控

部署完成后，我们有完善的通知和监控机制：

• 通过企业微信/钉钉机器人自动通知团队部署状态

• 使用 Prometheus 和 Grafana 监控应用性能和服务器状态

• 接入 Sentry 捕获前端错误，实时获取用户端异常

• 设置关键指标（如响应时间、错误率）的告警阈值

• 使用 ELK 栈集中管理日志，便于问题排查

我们建立了一个专门的监控大屏，实时显示系统健康状况和关键业务指标，确保团队能够及时发现并解决问题。

7. 回滚机制

为应对可能的部署问题，我们实现了快速回滚机制：

• 一键回滚功能，可在 Jenkins 界面直接触发

• 保留最近 5 个版本的部署包，支持回滚到任意历史版本

• 数据库变更采用向后兼容设计，确保回滚时数据一致性

• 自动化回滚测试，验证回滚过程的可靠性

在实际运营中，我们的回滚时间控制在 3 分钟以内，最大限度减少了故障影响时间。我们还建立了完善的事故响应流程，包括问题定级、响应团队组建和事后复盘机制。

8. 持续优化

我们不断优化整个流水线流程：

• 定期分析构建和部署数据，识别瓶颈并优化

• 引入基础设施即代码（IaC）理念，使用 Terraform 管理云资源

• 实施构建缓存策略，减少重复工作

• 定期进行演练，确保团队熟悉部署和回滚流程

通过这些持续优化，我们将平均部署时间从最初的 30 分钟减少到了现在的 15 分钟，同时将部署成功率提高到了 99.5%以上。

这套完整的流水线不仅提高了我们的开发效率，也大大增强了产品的稳定性和可靠性，为用户提供了更好的体验。