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>