watchEffect()函数的使用

watchEffect() 函数的作用是接收函数作为参数，并立即执行该函数，当该函数依赖的数据发生变化时，重新运行该函数。

（1）使用ref创建响应式数据。（2）使用watchEffect()函数监听响应式数据。（3）单击按钮修改响应式数据值，代码如下。

<template>
  <div>
    <h1>watchEffect 的使用</h1>
    <button @click="btnFn">修改 num 值</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";

export default {
  setup() {
    var num = ref(10);

    // 1．在 watchEffect() 函数中传入函数
    // 2．会立即执行函数
    watchEffect(() => {
      console.log(num.value);
    });

    // 3．当函数中的依赖数据发生改变时，会重新执行 watchEffect 传入的函数
    var btnFn = () => {
      num.value = 20;
    };

    return {
      num,
      btnFn,
    };
  },
};
</script>

运行结果：运行程序，首先执行一次 console.log(num.value)，单击按钮修改 num 值后，再次执行 console.log(num.value)。