Vue为app-bg容器添加动态类绑定后，触发错误时容器消失的异常

异常核心成因拆解 #

1. 初始版本app-bg容器消失的触发逻辑 #

• 动态类绑定的表达式在错误场景下触发未捕获的运行时类型错误，直接中断Vue的组件渲染流程，导致整个待渲染的.app-bg容器没有被插入到页面DOM中。
• 具体触发链路：城市查询失败进入catch分支时，weather字段始终保持初始的null，但模板里的类绑定没有做任何空值保护，直接执行weather.weather[0].icon的嵌套属性读取操作——对null值读取嵌套属性会直接抛出TypeError。Vue在渲染过程中遇到这类未捕获的同步错误时，会直接终止当前组件的渲染挂载流程，不会继续生成后续的DOM内容。
• 此前没有加动态类绑定时，模板中不存在对null值的嵌套属性读取，就算error触发，渲染流程也能完整走完，错误页面可以正常展示。

2. 调整为计算属性后出现isNight: (error during evaluation)的原因 #

• 两处写法错误直接导致计算属性求值失败：
  • 第一处是计算属性使用箭头函数定义，箭头函数的this不会绑定到当前Vue组件实例，执行时根本无法读取到this.weatherIcon的值，直接触发求值异常。
  • 第二处是没有对weatherIcon的初始空值做保护，组件初始化、axios请求尚未返回时，weatherIcon是初始的null，此时直接执行this.weatherIcon.slice(2)同样会抛出TypeError，导致计算属性求值失败。
• 哪怕修正了this指向的问题，只要请求失败场景下weatherIcon依然为null、没有空值兜底，计算属性还是会持续抛错，渲染中断、DOM消失的问题依然存在。

对应修复方案 #

• 所有嵌套属性读取操作必须增加空值保护，避免对null/undefined值执行属性读取：
  1. 计算属性不要使用箭头函数定义，确保this正确绑定到组件实例
  2. 计算属性内增加空值兜底：没有拿到合法icon字符串时，直接返回默认值
  3. 类绑定表达式只引用计算属性/方法的返回值，不要在模板内直接编写无保护的嵌套取值逻辑

正确的代码参考：

computed: {
  isNight() {
    // 空值保护：无合法icon时直接返回默认值，避免抛错
    if (!this.weatherIcon) return false
    const iconSuffix = this.weatherIcon.slice(2)
    return iconSuffix === 'n'
  }
}

模板类绑定参考：

<div :class="['app-bg', { nightBg: isNight }]">

注意：Vue的渲染流程对运行时错误的容错性较低，只要渲染过程中出现未被捕获的JS异常，就会中断整个组件的DOM生成流程，出现页面元素缺失的问题。所有依赖异步数据的模板绑定逻辑，都必须提前做好空值兜底。

内容的提问来源于stack exchange，提问作者supernova