区别

• 计算属性（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>