区别
计算属性(computed)的函数必须有返回值;侦听属性(watch)不需要
计算属性(computed)能实现的功能,侦听属性(watch)都能实现,可能会啰嗦些
侦听属性(watch)能实现的功能,计算属性(computed)不一定能实现,可以实现异步
侦听属性例子
侦听属性可以实现异步功能(计算属性无法实现),如:延时1秒后执行
<div id="app">
输入出生年份:<input type="text" v-model="birthday"><br>
年龄:<span>{{age}}</span>(表达式只写监听属性名,会自动调用 监听方法)<br>
年龄:<span>{{age}}</span><br>
年龄:<span>{{age}}</span><br>
年龄:<span>{{age}}</span>(计算属性会缓存结果,如:显示4次年龄,初始化时只执行1次监听方法)
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
birthday:'',
age:''
},
watch:{
birthday:function(newValue,oldValue){
setTimeout(() => {
console.log("birthday值从 "+oldValue+" 改为 "+newValue)
this.age=new Date().getFullYear() - this.birthday.substr(0,this.birthday.indexOf("-"))
}, 1000);
}
}
})
</script>