计算属性是惰性的,只有依赖的数据发生变化时才会重新计算。这可能会导致失焦事件先触发,获取到的计算属性值还未更新的情况。要解决这个问题,有两种方法:1. 在失焦事件中加入 setTimeout,等计算属性重新计算后再获取其值。

js
computed: {
  fullName() { /* ... */ }  
},
methods: {
  onBlur() {
    setTimeout(() => {
      let fullName = this.fullName;  // 此时已重新计算,拿到最新值
      // 使用 fullName ...
    }, 0);
  }
}

setTimeout 的延时时间设置为 0,是为了放到队列末尾,等编译器完成计算属性的重新计算后再执行。2. 监听计算属性,在它变化时手动触发失焦事件。

js
computed: {
  fullName() { /* ... */ }  
},
watch: {
  fullName() {
    this.onBlur();  // 监听到变化时手动触发失焦事件
  }  
},
methods: {
  onBlur() {
    let fullName = this.fullName;  // 此时已重新计算,拿到最新值
    // 使用 fullName ...
  }
} 

监听计算属性 fullName,当它变化时立即手动调用 onBlur 方法,这样就可以保证在失焦事件中获取到计算属性的最新值。这两种方法的原理都是:确保在失焦事件执行时,计算属性已完成更新,以获取其最新计算的值。setTimeout 延时执行失焦事件,等计算属性完成更新;
watch 监听计算属性变化,手动触发失焦事件。所以选择方法主要根据个人喜好,两者实现原理是类似的。