Vue 计算属性和监听属性（侦听器）之间的区别
这里结合 姓名案例 来理解 计算属性 和 监听属性（侦听器）之间的区别
姓名案例 计算属性 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例_计算属性实现</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="fistName"> <br><br>
名：<input type="text" v-model="lastName"> <br><br>
全名：<span>{{fullName}}</span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data() {
return {
fistName: '张',
lastName: '三'
}
},
computed: {
fullName() {
return this.fistName + '-' + this.lastName
}
}
})
</script>
</body>
</html>
姓名案例 监听属性（侦听器） 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例_监听属性实现</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="fistName"> <br><br>
名：<input type="text" v-model="lastName"> <br><br>
全名：<span>{{fullName}}</span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data() {
return {
fistName: '张',
lastName: '三',
fullName: '张-三'
}
},
watch: {
fistName(val) {
this.fullName = val + '-' + this.lastName
},
lastName(val) {
this.fullName = this.fistName + '-' + val
}
}
})
</script>
</body>
</html>
对比 计算属性 和 监听属性（侦听器）二者
// 计算属性
const vm = new Vue({
el: '#root',
data() {
return {
fistName: '张',
lastName: '三'
}
},
computed: {
fullName() {
return this.fistName + '-' + this.lastName
}
}
})
// 监听属性（侦听器）
const vm = new Vue({
el: '#root',
data() {
return {
fistName: '张',
lastName: '三',
fullName: '张-三'
}
},
watch: {
fistName(val) {
this.fullName = val + '-' + this.lastName
},
lastName(val) {
this.fullName = this.fistName + '-' + val
}
}
})
对比二者发现 监听属性 的代码是命令式且重复的，而 计算属性 好得多了
现在加上一个需求，输入 姓氏 后延迟一秒再显示全名
使用 监听属性 是这样实现的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>姓名案例_监听属性实现_延迟一秒显示</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="fistName"> <br><br>
名：<input type="text" v-model="lastName"> <br><br>
全名：<span>{{fullName}}</span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data() {
return {
fistName: '张',
lastName: '三',
fullName: '张-三'
}
},
watch: {
fistName(val) {
setTimeout(() => {
this.fullName = val + '-' + this.lastName
}, 1000);
},
lastName(val) {
this.fullName = this.fistName + '-' + val
}
}
})
</script>
</body>
</html>
但是 计算属性 却不行
总结
Vue 计算属性和监听属性（侦听器）之间的区别
- 计算属性 能完成的功能，监听属性 都可以完成
- 监听属性 能完成的功能，计算属性 不一定可以完成，如 监听属性可以进行异步操作
备注
被 Vue 管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或 组件实例
不被 Vue 管理的函数（定时器的回调函数、ajax 的回调函数、promise 的回调函数），
最好写成箭头函数，这样 this 的指向才是 vm 或 组件实例
