Vue 监听属性 watchEffect

watchEffect 函数:自动收集依赖源,不用指定监听哪个数据,在监听的回调中用到哪个数据,就监听哪个数据。

而 watch 函数:既要指定监听的数据,也要指定监听的回调。

watchEffect 函数:类似于 computed 计算属性,但是 watchEffect 注重的是过程(回调函数的函数体),所以不用写返回值。

而 computed 函数:更注重计算出来的值(回调函数的返回值),所以必须要写返回值。

watchEffect 函数的使用:

html 复制代码
<template>
    <h2>计数:{{ sum }}</h2>
    <button @click="sum++">点我加1</button>
    <hr />
    <h2>姓名:{{ info.name }}</h2>
    <h2>薪资:{{ info.job.money }}</h2>
    <button @click="info.name += '风'">修改姓名</button>
    <button @click="info.job.money++">增加薪资</button>
    <hr />
    <h2>年龄:{{ info.age }}</h2>
    <button @click="info.age++">修改年龄</button>
</template>

<script>
// 引入 watchEffect 侦听属性
import { watchEffect, ref, reactive } from 'vue'
export default {
    name: "Home",
    setup() {
        // 创建 ref 数据
        let sum = ref(0);
        // 创建 reactive 数据
        let info = reactive({
            name: "张三",
            job: {
                money: 20
            },
            age: 18
        });

        // 监听所用数据的变化
        watchEffect(() => {
            const x1 = sum.value; // 使用 ref 数据
            const x2 = info.name; // 使用 reactive 数据
            const x3 = info.job.money; // 使用深层数据
            console.log('watchEffect函数用到的数据变了');
            console.log(x1, x2, x3);
        })

        // 返回数据
        return { sum, info }
    }
}
</script>

注:watchEffect 函数不需要指定监听哪个数据,只要在 watchEffect 函数中用到的数据发生了变化,watchEffect 函数就会执行。

原创作者:吴小糖

创建时间:2023.10.31

相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具5 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer085 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf5 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据5 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript