监视属性中可以开启异步任务：
当计算属性中添加异步操作时会导致页面读取不到数据，
computed: { | |
fullName() { | |
setTimeout(() => { | |
return this.firstName + '-' + this.lastName; | |
}, 1000) | |
} | |
}, |
页面展示：
是由于 return 这个返回值交给的是 setTimeout 里的函数，即粉色框内容交给了红色框。所以 fullName 是没有办法拿到值的，页面也无法展示。
注意：
1. 所被 vue 管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或组件实例对象
2. 所有不被 vue 管理的函数（定时器的回调函数，ajax 的回调函数，Promise 的回调函数等），最好写成箭头函数，这样 this 的指向才是 vm 或组件实例对象
在 watch 中某个监听属性下的定时器任务中打印 this，指向的是 vue 实例。箭头函数没有自己的 this，向上一级查找，找到 firstName，是被 vue 所管理的，所以 this 指向 vm。
watch: { | |
firstName(newVal) { | |
setTimeout(() => { | |
console.log('this', this) | |
this.fullName = newVal + '-' + this.lastName; | |
}, 1000) | |
}, | |
lastName(newVal) { | |
this.fullName = this.firstName + '-' + newVal | |
} | |
}, |
如果将定时器写成普通函数，this 指向 window
watch: { | |
firstName(newVal) { | |
setTimeout(function() { | |
console.log('this', this) | |
this.fullName = newVal + '-' + this.lastName; | |
}, 1000) | |
}, | |
lastName(newVal) { | |
this.fullName = this.firstName + '-' + newVal | |
} | |
}, |
