vue3中如何实现多个侦听器(watch)

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

开水没有春天

1195人浏览 · 2024-03-21 14:36:42

开水没有春天 · 2024-03-21 14:36:42 发布

<body>
<div id="app">
    <input type="button" value="更改名字" @click="change">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            food: {
                id: 1,
                name: '冰激凌'
            }
        },
        methods: {
            change() {
                this.food.name = '棒棒糖'
            }
        },
        watch: {
        	// 第一种方式：监听整个对象，每个属性值的变化都会执行handler
        	// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
            food: {
                // 每个属性值发生变化就会调用这个函数
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true,
                // 深度监听 属性的变化
                deep: true
            },
            // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
            // 函数执行后，获取的 newVal 值和 oldVal 值不一样
            'food.name'(newVal, oldVal) {
                console.log('oldVal:', oldVal)   // 冰激凌
                console.log('newVal:', newVal)   // 棒棒糖
            }
        }
    })
</script>
</body>

immediate（立即处理进入页面就触发）
deep（深度监听）

https://cn.vuejs.org/guide/essentials/watchers.html

<script setup lang = "ts">
import { ref, reactive, watch } from 'vue'

const person = reactive({
  name: 'zhangsan',
  age: 18,
  school: {
    address: 'jinan'
  }
})

const updatePerson = () => {
  person.name = 'lisi'
  person.school.address = 'beijing'
}

watch(
  [() => person.name, () => person.school.address],
  (newInfo: string[], oldInfo: string[]) => {
    console.log(newInfo) // ['lisi', 'beijing']
    console.log(oldInfo) // ['zhangsan', 'jinan']
  },
  { deep: false }
)
</script>

<template>
  <h3>{{ person.name }}</h3>
  <h3>{{ person.school.address }}</h3>
  <button @click="updatePerson">修改人员信息</button>
</template>

https://blog.csdn.net/qq_52421092/article/details/131067716

<script>
import { toRefs, watch, reactive } from 'vue'
export default {
    setup() {
        const state = reactive({
            money: 100,
            car: {
                rand: "宝马",
            }
        })
    }
    watch(
        [() => state.money, () => state.car],
        (newVal, oldVal) => {
            console.log("变化了", newVal, oldVal)  // newVal新值是一个数组， 值顺序就是侦听的顺序  oldVal一样
        },
        {
            deep: true,
            immediate: false
        }
    )
    return {
        ...toRefs(state)
    }
}
</script>

在这里插入图片描述

三、watchEffect
不用指明监视哪个属性,监视的回调用到哪个属性，就去监视哪个属性

watch可以访问新值和旧值，watchEffect不能访问。
watch需要指明监听的对象，也需要指明监听的回调。
watchEffect不用指明监视哪一个属性,监视的回调函数中用到哪个属性,就监视哪个属性。
watch只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行。

GitHub 加速计划 / vu / vue

109

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：4 个月前 )

9e887079 [skip ci] 1 年前

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

AI 浪潮终章奏凯！GitCode & 文心大模型 & 智源研究院 AI 应用开发大赛圆满落幕

AtomGit开源社区

1.8B 体积、33 种语言互译｜腾讯混元 HY-MT1.5-1.8B 多语言机器翻译模型上线

在跨语言交流日益频繁的今天，阅读外语菜单、处理多语言邮件、与不同语言背景的人沟通，已经成为很多人日常工作与生活的一部分。过去，这类需求往往依赖联网翻译工具，而如今，—— 一部设备即可支持的相互翻译。当 AI 不再只是“逐字直译”，而是开始理解语境、风格与语言之间的细微差异，机器翻译就真正具备了今天为大家介绍一款高质量、多语言、支持端侧部署的机器翻译模型 ——，现已上线 AtomGit AI 社区，