vue教程-计算属性（computed） vs 侦听属性（watch）-马育民老师

# 区别

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

原文出处：http://malaoshi.top/show_1IX2eveZiMXw.html