vue3的watchEffect函数

<template>
  <h1>我是watchEffect</h1>
  <p>名称：{
   
   { data.name }}</p>
  <p>年龄：{
   
   { data.age }}</p>
  <p>薪资：{
   
   { data.job.salary }}k</p>
  <p>职位：{
   
   { data.job.position }}</p>
  <button @click="data.job.salary += 10">涨薪1万</button>
  <div style="margin-bottom: 100px"></div>
</template>

watchEffect函数
1.watchEffect函数中用到哪个属性就监听哪个属性的变化
2.watchEffect函数和computed对比：
computed注重返回结果，需要返回值
watchEffect注重过程，不需要返回值
3.里面的属性改变时候就会重新执行watchEffect函数
4.watchEffect函数支持取消异步api的请求

const stop = watchEffect(() => {
      // 异步api调用，返回一个操作对象
      const apiCancel = apiRequest(props.userID)
      onInvalidate(() => {
        // 取消异步api的调用。
        apiCancel.cancel()
      })
    })

5.停止watchEffect监听
执行stop()

用法示例

<script>
import { reactive } from "@vue/reactivity";
import { watchEffect } from "@vue/runtime-core";
export default {
  setup() {
    const data = reactive({
      name: "测试vue3",
      age: 4,
      job: {
        salary: 30,
        position: "资深前端工程师",
      },
    });
  
    watchEffect(() => {
      data.name = "我叫李白";
      console.log("哈哈哈999", data.job.salary);
    });

    return { data };
  },
};
</script>