一、字面区别
Computed 是计算属性，返回一个计算结果
watch 是监测数据变化，然后执行对应的回调
二、用法区别
是否调用缓存
- computed 中的函数所依赖的属性没有变化，运行到函数时会从缓存中取；只有依赖的数据发生变化，才会重新计算
- watch 不支持缓存，在每次监听值发生变化的时候，都会执行回调，触发相应的操作。
是否支持异步
- computed 不支持异步，当computed内有异步操作时是无法监听数据变化的；
- watch 支持异步操作
是否调用return
- computed 中的函数必须要用return返回；
- watch 中的函数不是必须要用return。
第一次加载的时候做了什么
- computed 默认第一次加载的时候就开始监听；
- watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）
使用场景
- computed 当一个属性受多条属性影响时 使用computed-----用户名展示、列表展示、购物车商品结算。
- watch 当一条数据影响多条数据 ，使用watch-----搜索框。
<body>
<div id="app">
姓： <input type="text" v-model=firstName> 名：
<input type="text" v-model=lastName> 姓名：
<span>{{fullname}}</span>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
firstName: 'z',
lastName: 's'
},
computed: {
fullname() {
return this.firstName + this.lastName
}
}
})
</script>
<body>
<div id="app">
姓： <input type="text" v-model=firstName> 名：
<input type="text" v-model=lastName> 姓名：
<span>{{fullname}}</span>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
firstName: 'z',
lastName: 's',
fullname: 'zs'
},
watch: {
firstName(newval) {
this.fullname = newval + this.lastName
},
lastName(newval) {
this.fullname = this.firstName + newval
}
}
})
</script>
