触发时机
watch: 被 watch 的值变化的时候执行一个函数
methods: getMessage() 出现在视图里的时候,或视图更新的时候调用 getMessage
computed: 两个调试同时满足的时候:一、依赖的属性变化了 二、message 出现在视图里了或视图更新了
使用形式
watch 的值需要用 data 承载,本身返回值没有用
methods 的返回值可以直接展示在视图,但是要加括号
computed 不能加括号
先看下面这段代码:
<div id="app">
<button @click='value+=1'>+1</button>
<button @click='value-=1'>-1</button>
<div>
{{value}}
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
value: 1,
}
},
methods: {
}
})
</script>
我们想实现一个需求:当value大于5,就显示警告
1, 用methods来实现:
<div id="app">
<button @click='value+=1'>+1</button>
<button @click='value-=1'>-1</button>
<div>
{{value}} {{getMessage()}}
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
value: 1,
}
},
methods: {
getMessage() {
return this.value>5? '警告':''
}
}
})
</script>
2,用watch来实现:
<div id="app">
<button @click='value+=1'>+1</button>
<button @click='value-=1'>-1</button>
<div>
{{value}} {{message}}
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
value: 1,
message: ''
}
},
watch: {
value() {
if(this.value > 5) {
this.message = '警告'
}
}
},
// methods: {
// getMessage() {
// return this.value>5? '警告':''
// }
// }
})
</script>
3,用computed来实现:
<div id="app">
<button @click='value+=1'>+1</button>
<button @click='value-=1'>-1</button>
<div>
{{value}} {{message}}
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
value: 1,
}
},
computed: {
message() {
return this.value>5 ? '警告': ''
}
},
// watch: {
// value() {
// if(this.value > 5) {
// this.message = '警告'
// }
// }
// },
// methods: {
// getMessage() {
// return this.value>5? '警告':''
// }
// }
})
</script>
可以看到,三种方式都可以实现同一个需求。
不同点:
使用形式的不同:
1,watch 的值需要用 data 承载,本身返回值没有用
2,methods 的返回值可以直接展示在视图,但是要加括号
3,computed 不能加括号
触发时机的不同:
1,watch: 被 watch 的值变化的时候执行一个函数
2,methods: getMessage() 出现在视图里的时候,也可以在事件的回调里面使用
3,computed:当其依赖的属性变化时就会自动执行
以下来自vue官网:
1,三种两种方式的最终结果确实是完全相同的
2,对于任何复杂逻辑,你都应当使用计算属性。因为计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。如果依赖的值没变,你访问message会立即返回之前计算的结果
3,相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
4,我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。
5,什么时候使用watch?虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。