Vue3的watch、watchEffect以及computed
作者:互联网
一、Watch监听
语法:watch(监听源 | [多个], (val, oldVal) => {}, {immediate?: false, deep: false})
watch写法上支持一个或者多个监听源,这些监听源必须只能是getter/effect
函数,ref数据,reactive对象,或者是数组类型
以下为watch的简单运用
<script>
interface ObjItf {
count: number;
}
let obj = {
count: 1,
};
// reactive声明响应式数据,用于声明引用数据类型
let state = reactive<ObjItf>(obj);
// toRefs解构响应式数据
let { count } = toRefs<ObjItf>(state);
watch(count, (newVal: number, oldVal: number): void => {
console.log(newVal, oldVal);
});
</script>
二、watchEffect监听
它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
以下是简单的例子:
<script>
let num = ref(0);
watchEffect(() => {
console.log(num.value);
});
setTimeout(() => {
num.value++;
}, 1000);
</script>
watch 和 watchEffect的区别
-
两者都可以监听
data
属性变化; -
watch
需要明确监听哪个属性; -
而
watchEffect
会根据其中的属性,自动监听其变化。
三、computed计算属性的用法
<template>
<div>我是count:{{ count }}</div>
<div>我是num:{{ num }}</div>
<div><button @click="num++">按钮</button></div>
</template>
<script setup lang="ts">
let num = ref(0);
let count = computed(() => {
return num.value + 2;
});
</script>
标签:count,computed,watch,watchEffect,num,let,监听 来源: https://www.cnblogs.com/pyk55cc/p/16200425.html