Vue中的computed和watch的区别
Vue项目开发中，有这么两个属性比较容易混淆，如果不特别注意，用法比较相似，这两个属性就是computed和watch，其实这两个还是有很大差别，下面就讲讲这两个属性的用法及不同
先说说为什么比较像，我们看下面代码。
-
<template>
-
<div>
-
<input type="text" v-model="a" />
-
<div>a={{ a }}</div>
-
<div>b={{ b }}</div>
-
<div>c={{ c }}</div>
-
</div>
-
</template>
-
<script>
-
export default {
-
data() {
-
return {
-
a: 1,
-
c: 0
-
}
-
},
-
watch: {
-
a(val) {
-
console.log(val)
-
this.c = val + '数据'
-
}
-
},
-
computed: {
-
b: function() {
-
return this.a + '数据'
-
}
-
}
-
}
-
</script>
通过代码和gif可以看到当我输入框在变的情况下，b和c数据始终保持一致，这种效果项目中可能会用到。所以说很多人容易混淆，分不清用法。接下来就说说他们的用法和不同。
1 computed：计算属性
computed官方定义计算属性，模板内使用表达式是非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。
-
<template>
-
<div>
-
<input type="text" v-model="a" />
-
<br />
-
<button @click="setb()">设置b</button>
-
<div>a={{ a }}</div>
-
<div>b={{ b }}</div>
-
</div>
-
</template>
-
<script>
-
export default {
-
data() {
-
return {
-
a: ''
-
}
-
},
-
computed: {
-
b: {
-
get: function() {
-
console.log('获取b')
-
return this.a
-
},
-
set: function(val) {
-
console.log('设置b值')
-
console.log('传入值：' + val)
-
console.log('b值：' + this.b)
-
}
-
}
-
},
-
methods: {
-
setb() {
-
this.b = 1
-
}
-
}
-
}
-
</script>
当我们点击按钮“设置b”时，我们会给b设置一个值“1”，通过set方法可以获取到设置的值，但是我们打印b值，其实是没有变化的。computed里的数据有get和set方法，但是我们常用的是get方法，一般很少用set方法。
从上面可以看出，computed支持缓存，属性值会默认走缓存，只有基于data中声明过或者父组件传递的props中的数据通过计算得到的值发生改变，才会重新进行计算。
强调一点，使用computed的数据不能在data中声明，否则会提示错误，并且函数也不在执行。
2 watch：监听属性
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
-
<template>
-
<div>
-
<input type="text" v-model="a" />
-
<div>a={{ a }}</div>
-
<div>c={{ c }}</div>
-
</div>
-
</template>
-
<script>
-
export default {
-
data() {
-
return {
-
a: '',
-
c: ''
-
}
-
},
-
watch: {
-
a(val) {
-
console.log(val)
-
this.c = val + '数据'
-
}
-
}
-
}
-
</script>
上面的代码是，监听a，如果a发生变化，就在a的后面加上“数据”，把值保存给c。watch监听不支持缓存，数据发生变化，会直接触发相应的操作，监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；具体内容请参考另外一篇文章
注：监听的数据必须是data中声明的或者父组件传递过来的数据。
3 总结
Computed特点：
需要主动调用，具有缓存能力只有数据再次改变才会重新渲染，否则就会直接拿取缓存中的数据。
Watch特点：
无论在哪只要被绑定数据发生变化Watch就会响应，这个特点很适合在异步操作时用上。
文章来源: blog.csdn.net，作者：NMGWAP，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/NMGWAP/article/details/125067090
- 点赞
- 收藏
- 关注作者
评论（0）