vue2中的watch和computed
时间: 2023-05-03 16:00:15 浏览: 120
watch和computed都是Vue2中常用的响应式数据属性。watch用于监控数据变化并执行相应的操作,常常用于组件内部需要响应式地监听某个数据的变化,并在数据变化时执行一些操作的场景;computed则是计算属性,用于声明一个依赖其它响应式数据的动态属性,常常用于一个属性需要根据其它属性的值来计算得到的场景。两者在使用上有一些区别,需要根据具体场景来选择使用哪种属性。
相关问题
vue3中watch和computed用法
在 Vue 3 中,`watch` 和 `computed` 的用法和 Vue 2 中略有不同。
## watch
### 监听单个响应式数据
在 Vue 3 中,你可以使用 `watch` 函数来监听一个响应式数据的变化。例如:
```javascript
import { watch } from 'vue';
// 在 setup 函数中使用 watch
setup() {
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`count 从 ${oldValue} 变为 ${newValue}`);
});
return { count };
}
```
在上面的例子中,我们使用 `watch` 函数监听了 `count` 的变化,并在回调函数中输出了新旧值。
### 监听多个响应式数据
如果需要监听多个响应式数据的变化,你可以传入一个对象,对象的属性名是需要监听的数据,属性值是回调函数。例如:
```javascript
import { watch, ref } from 'vue';
// 在 setup 函数中使用 watch
setup() {
const count1 = ref(0);
const count2 = ref(0);
watch({
count1: (newValue, oldValue) => {
console.log(`count1 从 ${oldValue} 变为 ${newValue}`);
},
count2: (newValue, oldValue) => {
console.log(`count2 从 ${oldValue} 变为 ${newValue}`);
}
});
return { count1, count2 };
}
```
### 监听非响应式数据
如果需要监听非响应式数据的变化,你可以使用 `watchEffect` 函数。例如:
```javascript
import { watchEffect } from 'vue';
// 在 setup 函数中使用 watchEffect
setup() {
let count = 0;
watchEffect(() => {
console.log(`count 变为 ${count}`);
});
return { count };
}
```
## computed
在 Vue 3 中,你可以使用 `computed` 函数来创建计算属性。例如:
```javascript
import { computed, ref } from 'vue';
// 在 setup 函数中使用 computed
setup() {
const count = ref(0);
const doubleCount = computed(() => {
return count.value * 2;
});
return { count, doubleCount };
}
```
在上面的例子中,我们创建了一个计算属性 `doubleCount`,它的值是 `count` 的两倍。当 `count` 改变时,`doubleCount` 也会自动更新。
需要注意的是,计算属性的返回值必须是一个响应式数据。如果返回的是普通数据,那么计算属性就没有意义了。
vue中的watch与computed
在Vue中,watch和computed都是用来观察数据变化的。但是它们的作用不同,watch是用来响应数据的变化并进行相应的操作,而computed是用来计算一些基于响应式数据的数据的。另外,computed是有缓存的,当响应式数据没有变化时,computed的值也不会重新计算,这可以提高性能。
阅读全文