一文讲清楚vue3中watch的使用

最新推荐文章于 2024-06-02 09:41:29 发布
最新推荐文章于 2024-06-02 09:41:29 发布
阅读量1.2k 收藏 23
点赞数 22
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57202548/article/details/135617671
版权
本文详细解释了如何在Vue3中使用watch函数监听不同类型的响应式数据源，包括ref包装的对象、数组，以及reactive对象，讨论了深度侦听、immediate和flush选项的应用。还介绍了如何停止侦听特定数据源。
摘要由CSDN通过智能技术生成

前言

watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组

侦听一个ref的数据值

这里先提一下，对于ref函数返回的响应式数据对象，它在模板里面使用时是不需要.value的

import { ref, watch } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let template = `
    <div>{{counter}}</div>
    <button v-on:click="counter++">+1</button>
`

export default{
    setup: function () {
        let counter = ref(0)

        watch(counter, (newValue, oldValue) =>{
            console.log(newValue, oldValue)
        })

        return {counter}
    },
    template,
}

总结：单个数据值在watch里就直接传一个ref包装后的响应式对象就好啦

侦听多个ref的数据值

我们可以通过watch侦听多个数据源的变化。

如果在同一个函数里同时改变这些被侦听的来源，侦听器只会执行一次。

import { ref, watch } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let template = `
    <div>{{name}}{{age}}</div>
    <button v-on:click="change">改变姓名年龄</button>
`

export default {
    setup: function () {
        let name = ref('李四')
        let age = ref(22)

        let change = () => {
            name.value += '~'
            age.value++
        }

        watch([name, age], ([newName, newAge], [preName, preAge]) => {
            console.log('姓名变化了', newName, preName)
            console.log('年龄变化了', newAge, preAge)
        })

        return { name, age, change }
    },
    template
}

若要使侦听器执行多次，我们可以利用 nextTick ，等待侦听器在下一步改变之前运行。

import { nextTick } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let change = async () => {
    name.value += '~'
    await nextTick()
    age.value++
}

侦听一个ref的对象

无多层嵌套的对象

import { ref, watch } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let template = ` 
    <div>{{person.name}}</div>
    <div>{{person.age}}</div>
    <button @click="person.age += 1">年龄加一</button>
`

export default {
    setup: function () {
        let person = ref({
            name: '张三',
            age: 18
        })

        // 这个侦听器无效，即控制台无输出
        watch(person, (newVal, oldVal) =>{
            console.log('侦听器1：',newVal, oldVal)
        })

        // getter函数形式，新旧值不一样
        watch(()=> ({...person.value}), (newVal, oldVal) =>{
            console.log('侦听器2：',newVal, oldVal)
        })

        return { person }
    },
    template
}

总结：无多层嵌套的对象不需要开启深度侦听，直接传一个ref响应式对象无效，需要传一个getter函数

多层嵌套的对象

import { ref, watch } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let template = `
    <div>{{person.name}}</div>
    <div>{{person.age}}</div>
    <div>{{person.scores}}</div>
    <button @click="person.scores.english+=1">英语分数加一</button>
`

export default {
    setup: function () {
        let person = ref({
            name: '张三',
            age: 18,
            scores: {
                math: 100,
                chinese: 90,
                english: 80
            }
        })

        // 这个watch无效，即控制台没任何输出
        watch(person, (newValue, oldValue) => {
            console.log('第一个侦听器：person变化了', newValue, oldValue)
        })

         // 开启深度侦听，新旧值一样
        watch(person, (newValue, oldValue) => {
            console.log('第二个侦听器：person变化了', newValue, oldValue)
        }, { deep: true })

        // 采用函数形式，这个watch无效，即控制台没任何输出
        watch(() => ({ ...person.value }), (newValue, oldValue) => {
            console.log('第三个侦听器：person变化了', newValue, oldValue)
        })

        // 采用函数形式，开深度侦听，新旧值一样
        watch(() => ({ ...person.value }), (newValue, oldValue) => {
            console.log('第四个侦听器：person变化了', newValue, oldValue)
        }, { deep: true })

        return { person }
    },
    template
}

总结：

  1. 没有开启深度侦听时，无论是直接传一个ref响应式对象，还是一个getter函数，watch皆无效；

  2. 开启深度侦听时，无论是直接传一个ref响应式对象，还是一个getter函数，新旧值一样。

侦听一个ref的数组

import { ref, watch } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let template = `
    <div>{{arr1}}</div>
    <button v-on:click='changeArr1'>改为8</button>
`

export default {
    setup: function () {
        let arr1 = ref([1, 2, 3])

        // 这个watch无效，即控制台没任何输出
        watch(arr1, (newArr1, oldArr1) => {
            console.log(newArr1, oldArr1)
        })

        // 采用函数形式，新旧值不一样
        watch(() => [...arr1.value], (newArr1, oldArr1) => {
            console.log(newArr1, oldArr1) // (3) [8, 2, 3] (3) [1, 2, 3]
        })

        let changeArr1 = () => {
            arr1.value[0] = 8
        }

        return { arr1, changeArr1 }
    },
    template
}

总结：直接传一个ref响应式对象无效，需要传一个getter函数，新旧值不一样

侦听一个 reactive的响应式对象

无多层嵌套的对象

import { reactive, watch } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let template = `
    <div>{{person.name}}{{person.age}}</div>
    <button @click="person.age+=1">年龄加一</button>
`

export default {
    setup: function(){
        let person = reactive({
            name: '张三',
            age: 18
        })
        
        // 拿不到旧值
        watch(person, (newValue, oldValue) =>{
            console.log('年龄变化了', newValue, oldValue)
        })

        // 能拿到旧值
        watch(()=>({...person}), (newValue, oldValue) =>{
            console.log('年龄变化了', newValue, oldValue)
        })

        return { person }
    },
    template
}

对于reactive的响应式对象，默认是开启深度侦听的，且通过配置深度侦听为false是无效的

reactive一般是用来侦听一个对象的，所以这里不介绍侦听单个值类型的情况

总结：直接传一个reactive响应式对象无法拿到旧值，需要传一个getter函数才能拿到旧值

多层嵌套的对象

import { reactive, watch } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let template = `
    <div>{{person.name}}</div>
    <div>{{person.age}}</div>
    <div>{{person.scores}}</div>
    <button @click="person.scores.english+=1">英语分数加一</button>
`

export default {
    setup: function () {
        let person = reactive({
            name: '张三',
            age: 18,
            scores: {
                math: 100,
                chinese: 90,
                english: 80
            }
        })

         // 新旧值一样
        watch(person, (newValue, oldValue) => {
            console.log('第一个侦听器：person变化了', newValue, oldValue)
        }, { deep: true })

        // 新旧值一样
        watch(() => ({ ...person }), (newValue, oldValue) => {
            console.log('第二个侦听器：person变化了', newValue, oldValue)
        }, { deep: true })

        return { person }
    },
    template
}

总结：直接传一个reactive响应式对象还是传一个getter函数都无法拿到旧值

侦听一个 reactive的响应式数组

import {  reactive, watch } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let template = `
    <div>{{arr2}}</div>
    <button v-on:click='arr2[0]=9'>改为9</button> <!-- 这里不用.value -->
`

export default {
    setup: function () {
        let arr2 = reactive([4, 5, 6])

        // 是否配置deep为true都是无效的，新旧值一样
        watch(arr2, (newArr2, oldArr2) =>{
            console.log(newArr2, oldArr2) // Proxy(Array) {0: 9, 1: 5, 2: 6} Proxy(Array) {0: 9, 1: 5, 2: 6}
        })

        // 采用函数形式，新旧值不一样
        watch(()=>[...arr2], (newArr2, oldArr2) =>{
            console.log(newArr2, oldArr2) // (3) [9, 5, 6] (3) [4, 5, 6]
        })

        return { arr2 }
    },
    template
}

总结：直接传入一个reactvie响应式数组，新旧值一样；传入一个getter函数，新旧值不一样

配置对象

在Vue 3的 watch 函数中，配置对象（watch API 的第三个参数）包含以下选项：

  1. immediate（boolean）:

    • 默认值：false
    • 如果设置为 true，回调函数 将在初始渲染时立即执行一次，即使侦听的数据在初始时没有发生变化。
    watch(
 () => someData,
 (newValue, oldValue) => {
   // 
 },
 {
   immediate: true,
 }
);

  2. deep（boolean）:

    • 默认值：false，对于reactive默认是true
    • 如果设置为 true，则会递归地侦听对象内部的属性变化。注意，在Vue 3中，deep 不再支持深度侦听数组。
    watch(
 () => someData,
 (newValue, oldValue) => {
   // 回调函数
 },
 {
   deep: true,
 }
);

  3. flush（string）:

    • 默认值：'pre'
    • 指定在何时触发回调函数，有三个选项：
      • 'pre'：在依赖变化之前触发。
      • 'post'：在依赖变化之后触发。
      • 'sync'：与依赖变化同步触发。

    默认情况下，用户创建的侦听器回调，都会在依赖数据变化之后， Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。通过设置flush为 ‘post’，拿到的就是更新后的DOM

    import { ref, watch } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let template = `
   <div id="count">{{count}}</div>
   <button @click="changeCount">点击</button>
   <button @click="stopWatch">停止侦听</button>
`

export default {
   setup: function () {
       let count = ref(0)

       let stopWatch = watch(count, () => {
           let div = document.querySelector('#count')
           console.log(div.innerHTML)
       }, {
           flush: 'post'
       })

       let changeCount = () => {
           count.value++
       }

       return { count, changeCount, stopWatch }
   },
   template
}

停止侦听

在Vue 3的Composition API中，你可以通过 watch 函数返回的停止函数来停止侦听。

import { ref, watch } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let template = `
    <div>{{count}}</div>
    <button @click="count++">点击</button>
    <button @click="stopWatch">停止侦听</button>
`

export default {
    setup: function () {
        let count = ref(0)

        let stopWatch = watch(count, (newVal, oldVal) => {
            console.log(newVal, oldVal)
        })

        return { count, stopWatch }
    },
    template
}

在这个例子中，watch 函数返回一个停止函数 stopWatch，然后我们可以在组件的其他地方调用它来停止侦听。在这个例子中，我们通过调用 stopWatch 方法来停止侦听。实际上，你可以在任何地方调用 stopWatch 函数，以停止对数据的侦听。

总结

watch的第一个参数的传递方式：

对于ref的响应式数据对象

  1. 单个数据值： 直接传一个ref包装后的响应式对象即可，新旧值不一样。例如：watch(counter, (newValue, oldValue) => {...})。
  2. 多个数据值： 使用watch侦听多个数据源的变化，直接将多个ref响应式对象组成的数组传递给watch，新旧值不一样。例如：watch([name, age], ([newName, newAge], [preName, preAge]) => {...})。
  3. 一个ref的对象（无多层嵌套）： 无需开启深度侦听，直接传一个ref响应式对象无效，需要传一个getter函数，新旧值不一样。例如：watch(() => ({...person.value}), (newVal, oldVal) => {...})。
  4. 一个ref的对象（多层嵌套）： 如果有多层嵌套，需要开启深度侦听，可以直接传一个ref响应式对象或者使用getter函数，新旧值一样。例如：watch(person, (newVal, oldVal) => {...}, { deep: true }) 或 watch(() => ({...person.value}), (newVal, oldVal) => {...}, { deep: true })。
  5. 一个ref的数组： 直接传一个ref响应式对象无效，需要传一个getter函数，新旧值不一样。例如：watch(() => [...arr1.value], (newArr1, oldArr1) => {...})。

对于reactive 的响应式数据对象

  1. 一个reactive的对象（无多层嵌套）：直接传一个reactive响应式对象，新旧值一样；传入一个getter函数，新旧值不一样。例如：watch(() => ({...person}), (newVal, oldVal) => {...})。

  2. 一个reactive 的对象（多层嵌套）：直接传一个reactive响应式对象还是传一个getter函数都无法拿到旧值。

  3. 一个reactive 的数组：直接传入一个reactvie响应式数组，新旧值一样；传入一个getter函数，新旧值不一样。watch(() => [...arr1], (newArr1, oldArr1) => {...})。

一般来说，我们只是用ref包装的单个数据值，reactive包装的单层对象，reactive包装的多层对象，reactive包装的数组，所以我们只需要记相应的watch使用方法就好了

小羊lbg
关注
  • 22
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3中的watch使用
Lilico_的博客
04-30 974
基本用法： <template> <div> name: {{obj.name}} <br> list: <ul> <li v-for="(item, index) in obj.list" :key="index"> {{item}} </li> </ul> <hr> <button @click="changeName">改变
vue3中使用tinyMCE
07-01
在Vue3中使用TinyMCE，我们可以利用其强大的功能并结合Vue的新特性，如Composition API和setup语法糖，来实现更加灵活和高效的组件化开发。 首先，我们来看一下如何在Vue3项目中安装和配置TinyMCE。在解压后的文件...
vue3 组件间v-model
chen_daimaxz的博客
04-12 432
vue3 组件间的v-model实现父组件中的写法子组件中的写法总结 父组件中的写法 html <p>父子组件之间v-model的运用</p> <p>父组件上的显示值：{{text}}</p> <demo-child v-model:text="text" /> ts import { defineComponent, provide, ref, reactive,getCurrentInstance } from "vue
Vue3-watch监听ref和reactive数据的五种情况及watchEffect
最新发布
IIIIIAN
06-02 1808
用于声明在数据更改时调用的侦听回调。watch选项期望接受一个对象，其中键是需要侦听的响应式组件实例属性 (例如，通过data或computed声明的属性)——值是相应的回调函数。该回调函数接受被侦听源的新值和旧值。除了一个根级属性，键名也可以是一个简单的由点分隔的路径，例如a.b.c。注意，这种用法不支持复杂表达式——仅支持由点分隔的路径。如果你需要侦听复杂的数据源，可以使用命令式的$watch()API。值也可以是一个方法名称的字符串 (通过methods声明)，或包含额外选项的对象。
vue3 watch的用法
m0_60899441的博客
07-29 3万+
watch的用法
Vue3中watch用法
linfeng_meng的博客
09-19 1196
侦听器watch作用是侦听一个或多个数据的变化，数据变化时执行的回调函数，两个额外参数：`immediate`（立即执行）和`deep`（深度侦听）
Vue3的watch使用介绍及场景
一个努力不被优化的程序员
11-20 4294
目录一、watch的使用1. 监听一个变量2. 监听一个对象的属性3. 监听一个函数的返回值二、watch的使用场景1. 监听表单的变化2. 监听路由参数的变化3. 监听Vuex中的数据变化三、watch的效果图四、watch的示例以上就是Vue3的watch的介绍，watch是Vue3中非常重要的一个功能，可以帮助我们更好的监听数据变化，并执行相应的操作。在Vue3中，我们可以使用watch来监听数据的变化，从而执行相应的操作。watch有以下几种使用方式：在Vue3中，我们可以使用watch来监听一个变
vue3中watch的使用及一些问题
m0_60424565的博客
01-15 543
情况三（在多介绍一个）通过ref定义一个对象(此处仍然无法正确的获取oldValue)因为它内部还是会求助reactive的Proxy(注意此处监听ref定义的对象需要.value哦，结构html里不需要)。⑤情况五：监听reactive所定义的某些响应式数据中某个属性（这里oldValue是可以使用的）----某些。③ 情况三：监听reactive所定义的多个响应式数据(此处无法正确的获取oldValue) ---全部。① 情况一：监听ref所定义的一个响应式数据。(注：这里我用的是setup语法糖)。
vue3watch的用法
m0_61874639的博客
07-22 273
【代码】vue3watch的用法。
vue 中使用 watch 出现了如下的报错的原因分析
10-16
在Vue.js框架中，`watch`是一个非常重要的特性，它允许我们监听并响应Vue实例上的数据属性变化。然而，在实际开发过程中，有时我们可能会遇到一些错误，比如标题中提到的“Method 'watch' has type 'object' in the ...
vue3.x中使用cesium，vue3.x+Cesium
05-04
以下是关于在Vue3.x中使用Cesium的知识点： 1. **Vue CLI集成**: 首先，你需要通过Vue CLI创建一个新的项目。执行`vue create my-vue3-cesium-project`命令，然后选择自定义配置，这将允许你手动调整项目结构和配置...
Vue.js 中的 $watch使用方法
10-19
本篇文章中主要介绍了Vue.js 中的 $watch使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中使用codemirror的实例详解
10-17
首先，为了在Vue项目中使用Vue-Codemirror，你需要通过npm安装这个库： ```bash npm install vue-codemirror --save ``` 接下来，在`main.js`文件中导入Vue-Codemirror以及其样式文件： ```javascript import { ...
vue3下watch的使用
热门推荐
weixin_42349568的博客
09-08 6万+
1，基本数据类型：可以直接监听，可获取新旧值。2，引用数据类型：需要deep:true深度监听，但是只能获取新值。要想获取新旧值，要想获取新旧值，需要监听目标数据的深拷贝。
Vue3中watch的用法
ct5211314的博客
04-03 1万+
watch函数用于侦听某个值的变化，当该值发生改变后，触发对应的处理逻辑。
vue3中watch的用法及讲解
qq_70703397的博客
05-08 2759
当我们在Vue 3应用程序中想要监听数据的变化时，可以使用watch函数。watch函数支持多种用法，包括监听响应式对象、计算属性、ref 对象等等。下面我们就来详细讲解一下watch函数的用法。
vue实战三: 关于watch的使用
aiiit的博客
08-29 212
关于watch监听路由的使用 MvItem组件中给每个mvitem绑定的点击事件,并给它传入id 点击item后的url SimiMvItem组件中给每个simimvitem绑定的点击事件,并给它传入id 他们两所要跳转的路由的一样的.都是"/playmv/"+id 当点击相似simimvitem时,发现url中的id会被拼接在后面,.但是当前的mv并没有播放. 问题所在:在同一页面切换id的值,并不会触发vue的声明周期函数 解决方法:可以添加对路由的监听 ...
vue3.0---watch使用方法
weixin_38687522的博客
06-11 574
<template> <div> watch监听ref属性值：{{a}} <el-button type="primary" @click="plusFn">ref加1</el-button> </div> <div> watch监听reactive属性值：{{b}} <el-button type="primary" @click="plu
vue3 中watch使用
02-24
在Vue 3中，watch的使用方式有所改变Vue 3引入了一个新的API即`watchEffect`，它可以用来监听响应式数据的变化并执行相应的操作。 `Effect`函数接受一个回调函数作为参数，该调函数会在响应式数据发生化时被调用。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值