升级Vue 3.3后，我们遇到了一次惊心动魄的线上故障。

本文是这次故障的完整复盘，包括故障发生的过程、原因分析、解决方案，以及从中得到的经验教训。

一、背景

1. 为什么升级

我们项目用的是Vue 3.2，看到Vue 3.3发布了，决定升级。

  • Vue 3.3有很多新特性
  • 更好的TypeScript支持
  • defineModel宏
  • 性能优化
  • 觉得升级能带来好处

于是，我们开始了升级工作。

2. 升级过程

升级过程看起来很顺利。

  • 修改package.json
  • npm install
  • 本地测试
  • 基本功能正常
  • 就上线了

当时觉得，升级很简单。

3. 上线初期

上线初期，一切正常。

  • 页面能打开
  • 功能正常
  • 没有报错
  • 我们松了一口气

但没想到，问题在后面。

二、故障发生

1. 第一次报警

上线后第二天，监控报警了。

  • 有用户反馈页面白屏
  • 错误日志大量增加
  • 都是同一个错误
  • 我们立刻开始排查

那一刻，气氛紧张起来。

2. 错误信息

错误信息是这样的：

TypeError: Cannot read properties of undefined (reading 'value')
  • 某个组件报错
  • 说value是undefined
  • 但本地测试没问题
  • 只有线上有问题
  • 很奇怪

这个错误，让我们一头雾水。

3. 影响范围

影响范围在扩大。

  • 越来越多的用户遇到白屏
  • 主要集中在某些页面
  • 这些页面用了新特性
  • 我们意识到问题严重了

必须尽快解决。

三、排查过程

1. 第一步：回滚

第一步，先回滚。

  • 线上问题严重
  • 先回滚到旧版本
  • 恢复服务
  • 再慢慢排查

回滚后，服务恢复正常。

2. 第二步：复现问题

回滚后，开始复现问题。

  • 在测试环境复现
  • 但测试环境没问题
  • 只有线上有问题
  • 很奇怪

后来发现，是特定条件下才会触发。

3. 第三步：定位代码

经过仔细排查，定位到了问题代码。

const model = defineModel()
// ...
watch(model, (val) => {
    console.log(val.value)  // 这里报错
})

问题出在defineModel的使用上。

4. 第四步：分析原因

分析原因：

  • defineModel返回的是一个ref
  • 直接用watch监听model
  • 在某些情况下，model.value是undefined
  • 访问val.value就报错了
  • 这是我们对defineModel的理解有误

defineModel返回的ref，在组件未挂载时可能是undefined。

四、原因分析

1. 根本原因

根本原因：对Vue 3.3新特性理解不深。

  • defineModel是新特性
  • 我们没有仔细看文档
  • 想当然地用了
  • 结果踩坑了
  • 新特性需要认真学习

2. 直接原因

直接原因：代码没有做空值判断。

// 错误写法
watch(model, (val) => {
    console.log(val.value)
})

// 正确写法
watch(model, (val) => {
    if (val) {
        console.log(val.value)
    }
})
  • 没有考虑到undefined的情况
  • 直接访问value
  • 导致报错

3. 为什么本地没发现

为什么本地测试没发现？

  • 本地数据和线上不同
  • 本地测试路径不完整
  • 没有覆盖所有场景
  • 测试不够充分
  • 这是测试的问题

4. 为什么监控没及时发现

为什么监控没及时发现？

  • 上线初期用户少
  • 问题没有立即暴露
  • 等用户多了才发现
  • 监控告警有延迟
  • 这是监控的问题

五、解决方案

1. 紧急修复

紧急修复方案：

  • 加空值判断
  • 修复报错
  • 重新上线
  • 监控确认

紧急修复后，问题解决了。

2. 彻底修复

彻底修复方案：

  • 重新学习defineModel的用法
  • 按照官方文档正确使用
  • 审查所有用到新特性的代码
  • 确保没有类似问题
  • 补充测试用例

3. 预防措施

预防措施：

  • 升级前仔细阅读文档
  • 新特性先在小范围试用
  • 完善测试用例
  • 加强监控告警
  • 制定升级规范

六、经验教训

1. 新特性要认真学

第一个教训：新特性要认真学。

  • 不要想当然
  • 仔细看官方文档
  • 理解原理再用
  • 不要只看表面
  • 新特性可能有坑

2. 升级要谨慎

第二个教训：升级要谨慎。

  • 不要急着升级
  • 先在测试环境充分测试
  • 小范围灰度发布
  • 监控要跟上
  • 有问题及时回滚

3. 测试要充分

第三个教训：测试要充分。

  • 覆盖所有场景
  • 包括边界情况
  • 自动化测试
  • 手动测试
  • 测试不能省

4. 监控要完善

第四个教训：监控要完善。

  • 错误监控
  • 性能监控
  • 用户行为监控
  • 告警要及时
  • 能快速定位问题

5. 回滚要准备好

第五个教训：回滚要准备好。

  • 上线前准备回滚方案
  • 确保能快速回滚
  • 回滚后要验证
  • 回滚不是失败
  • 是保障

七、Vue 3.3新特性的正确用法

1. defineModel的正确用法

经过这次故障，我们重新学习了defineModel。

<script setup>
// 正确用法
const model = defineModel()

// 读取
console.log(model.value)

// 修改
model.value = 'new value'

// 监听
watch(model, (val) => {
    console.log(val)  // val就是值，不是ref
})
</script>
  • defineModel返回一个ref
  • 用.value访问值
  • watch的回调参数是值，不是ref
  • 要注意空值情况

2. 其他新特性

Vue 3.3还有其他新特性：

  • 更好的TypeScript支持
  • defineSlots
  • defineOptions
  • 更完善的宏函数
  • 性能优化

每个新特性，都要认真学习。

3. 升级检查清单

我们总结了Vue升级检查清单：

  • 阅读官方升级指南
  • 检查breaking changes
  • 测试所有功能
  • 测试新特性
  • 准备回滚方案
  • 灰度发布
  • 监控告警

八、写在最后

这次Vue 3.3升级故障，是一次惊心动魄的经历。

从顺利上线，到报警，到排查，到修复，到复盘，我们学到了很多。新特性要认真学，升级要谨慎，测试要充分，监控要完善，回滚要准备好。

2023年了，前端技术发展很快，新版本层出不穷。但不管技术怎么变，工程素养是不变的：认真学习，谨慎操作，充分测试，完善监控。这些，是避免故障的关键。

最后，用一句话总结："新特性不是拿来就用的，要认真学习，理解原理。升级不是小事，要谨慎对待，做好准备。故障不可怕，可怕的是不从故障中学习。"

希望我们的复盘，能帮你避免类似的问题。