vue计算属性和watch的区别

computed

使用场景:适用于重新计算比较费时不用重复数据计算的环境。所有 gettersetterthis 上下文自动地绑定为 Vue 实例。如果一个数据依赖于其他数据,那么把这个数据设计为computed
计算属性 computed 是基于data中数据进行处理的,data数据变化,他也跟着变化
data中数据没有发生改变时,我们调用computed中函数n次,只会进行缓存(执行一次)
每个计算属性都包含两个setget 属性

watch

使用场景:数据变化时执行异步或开销较大的操作,可以随时修改状态的变化
watch:类似于监听机制+事件机制。
在大部分情况下我们都会使用computed,但如果要在数据变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择。watch为一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。
watcher 更像是一个 data 的数据监听回调,当依赖的 data 的数据变化,执行回调,在方法中会传入 newValoldVal。可以提供输入值无效,提供中间值 特场景。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情,使用watch

示例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
<div class="hello">
{ {fullName} }
<button @click="setNameFun">click</button>
</div>
</template>

<script>
export default {
data() {
return {
firstName: '飞',
lastName: "旋"
}
},
props: {
msg: String
},
methods: {
setNameFun() {
this.firstName = "大";
this.lastName = "熊"
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
firstName(newval,oldval) {
console.log(newval)
console.log(oldval)
}
}
}
</script>
总结
  1. 如果一个数据依赖于其他数据,那么把这个数据设计为computed的

  2. 如果你需要在某个数据变化时做一些事情,使用watch来观察这个数据变化


本文转载自百川的博客,原文地址:https://www.hellolbc.me/archives/162/