computed和watch在实际开发中用的还是蛮多的,2句话概括他们. 需要通过依赖数据得到一个值用computed,依赖数据变化执行一些操作用watch.
computed
写法1.回调形式
<template>
count:{{ count }} <button @click="count += 1">count+1</button>
<br />
计算computedCount的值:{{ computedCount }}
</template>
<script setup>
import { ref, computed } from 'vue';
const count = ref(1);
const computedCount = computed(() => {
return count.value * 2 + 1;
});
</script>
通过回调return结果
写法2,get,set形式
对象形式,可以get,和set中取值和计算
<script setup>
import { ref, computed } from 'vue';
const count = ref(1);
const computedCount = computed({
get: () => {
// 3. 当 count 的值被修改后，触发 get 方法
return count.value + 10; // 95 + 10 = 105，所以newcount 的值是 105
},
set: (param) => {
// 2. 下方定时器中赋值的 100 ,会作为参数传递到 set 方法 ，
count.value = param - 5; // count.value 被修改 100 - 5 = 95 ，所以 name 的值是95
}
});
setTimeout(() => {
computedCount.value = 100;
}, 3000); // 1. 三秒后给 computedCount 赋值 最终是105
</script>
可以在get中return最终结果,可以在set中进行其他操作
watch帧听
vue2中 watch参数是一个对象 我们需要将监听的函数写在handler里,vue3里参数有3个,1是观察的对象,2是监听回调,3是配置项
<template>
count:{{ count }} <button @click="count += 1">count+1</button>
<br />
newCount:{{ newCount }}
<br />
oldCount:{{ oldCount }}
</template>
<script setup>
import { ref, watch } from 'vue';
const count = ref(1);
const newCount = ref();
const oldCount = ref();
watch(
() => count.value,
(newValue, oldValue) => {
console.log(newValue, oldValue);
newCount.value = newValue;
oldCount.value = oldValue;
},
{ immediate: true }
);
</script>
总结
computed是计算属性,目的是获取一个值.必须有return,有缓存,当数据依赖不变是,他不会重新计算.比如我们表单的提交按钮可以计算所有的必填项是否填写. watch是监听,目的是执行一些操作,当依赖数据变化时执行自己的代码
