Vue3 watch和watchEffect的用法

最新推荐文章于 2024-09-12 16:17:49 发布

快起来搬砖了

最新推荐文章于 2024-09-12 16:17:49 发布

阅读量308

点赞数

分类专栏： Vue3 vue.js 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_44590591/article/details/124618974

版权

vue.js 同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

11 篇文章 4 订阅

订阅专栏

本文详细介绍了Vue.js中watch和watchEffect的使用及区别。watchEffect在初始化时自动捕获依赖，并在依赖变化时重新执行回调，而watch则需要显式指定依赖和回调。此外，文章通过示例代码展示了它们在实际应用中的差异，强调了watchEffect更注重执行过程，而computed更关注计算结果。

摘要由CSDN通过智能技术生成

watch和watchEffect都起到监听作用，但是他们在使用和写法上面有所不同
watch使用：https://blog.csdn.net/weixin_44590591/article/details/124598751
watchEffect使用：
watch和watchEffect的区别

**watch：**既要指明监视的属性，也要指明监视的回调

watchEffect：

特点：不需要手动传入依赖、每次初始化时会执行一次回调函数来自动获取依赖无法获取到原值，只能得到变化后的值

watchEffect和computed相似

 但computed注重的计算出来的值(回调函数的返回值)，所以必须要写返回值
 而watchEffect更注重的是过程（(回调函数的函数体)，所以不用写返回值

<template>
  <div>
      <div>姓名：{{person.name}}</div>
      <div>年龄：{{person.age}}</div>
      <div>薪资：{{person.job.joblist.money}} K</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
    <button @click="person.job.joblist.money ++">提薪</button>
  </div>
 </template>

<script>
import { reactive,watchEffect } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
    //watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
    watchEffect(() => {
      const obj1 = person.name;
      const obj = person.job.joblist.money;
      console.log("watchEffect==>" + obj);
      console.log("watchEffect==>" + obj1);
    });
    return {
      person,
    };
  },
};
</script>