计算属性是惰性的,只有依赖的数据发生变化时才会重新计算。这可能会导致失焦事件先触发,获取到的计算属性值还未更新的情况。要解决这个问题,有两种方法: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 监听计算属性变化,手动触发失焦事件。所以选择方法主要根据个人喜好,两者实现原理是类似的。