计算属性中不能进行异步操作：
在计算属性中我们不能进行异步操作，例如：不能使用定时器、不能处理 Ajax 请求。
<div id="APP"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名: <span>{{fullName}}</span> </div>
const vm = new Vue({ el: "#APP", data(){ return { firstName: "张", lastName: "三" } }, computed:{ fullName(){ setTimeout(() => { return this.firstName + '-' + this.lastName; },1000) } }, });
注：在计算属性内使用异步操作会导致没有内容。
侦听属性中可以进行异步操作：
在侦听属性中我们可以进行异步操作，可以使用定时器、也可以处理 Ajax 请求。
<div id="APP"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名: <span>{{fullName}}</span> </div>
const vm = new Vue({ el: "#APP", data(){ return { firstName: "张", lastName: "三", fullName: "张-三" } }, watch:{ firstName(newValue){ setTimeout(() => { this.fullName = newValue + '-' + this.lastName; },1000) }, lastName(newValue){ setTimeout(() => { console.log(this); // Vue this.fullName = this.firstName + '-' + newValue; },1000) // 这里不能使用普通函数，普通函数的 this 指向 window setTimeout(function(){ console.log(this); // window },1000) } }, });
注：在 Vue 中使用定时器必须使用箭头函数！因为箭头函数的指向是静态的，会继承外部 this 的指向，如果使用普通函数， this 将不会指向 Vue 实例，而是指向 window 对象。
重点总结：
所有被 Vue 管理的函数【data 函数、computed 中的函数、watch 中的函数等】，最好写成普通函数，这样 this 的指向才是 Vue 实例 或 组件实例对象。
所有不被 Vue 管理的函数【定时器的回调函数、Ajax 的回调函数、Promise 的回调函数】，最好写成箭头函数，这样 this 的指向才是 Vue 实例 或 组件实例对象。
原创作者 ：吴小糖
创作时间：2023.6.3
