Vue3-ref、reactive函数的watch

Vue3-ref、reactive函数的watch

ref函数的watch

  • 原理:监视某个属性的变化。当被监视的属性一旦发生改变时,执行某段代码。
  • watch 属性中的数据需要具有响应式
  • watch 属性可以使用箭头函数
  • watch 属性可以监视一个或者多个响应式数据,并且可以配置 immediate(立即执行) 和 deep(深度侦听)搭配使用
javascript 复制代码
// 监视一个响应式数据
watch(监视的数据, (newValue, oldValue) => { ... }, {immediate : true, deep : true})

// 监视多个响应式数据
// 第一种 有多少个监视数据就写多少个watch
watch(监视的数据1, (newValue, oldValue) => { ... }, {immediate : true, deep : true})
watch(监视的数据2, (newValue, oldValue) => { ... }, {immediate : true, deep : true})

// 第二种 数组形式
watch([监视的数据1, 监视的数据2], (newValue, oldValue) => { ... }, {immediate : true, deep : true})
javascript 复制代码
// App.vue
<template>
    <h2>计数器1:{{counter1}}</h2>
    <h2>计数器2:{{counter2}}</h2>
    <button @click="counter1++">计数器1加1</button><br>
    <button @click="counter2++">计数器2加1</button>
</template>

<script>
    import { watch, ref } from 'vue'
    export default {
        namme : 'App',
        setup(){
            let counter1 = ref(1)
            let counter2 = ref(100)

            watch(counter1, (newValue, oldValue) => {
                console.log('计数器1', newValue, oldValue);
            })

            watch(counter2, (newValue, oldValue) => {
                console.log('计数器2', newValue, oldValue);
            })

            // 采用数组的方式,一次性监视多个属性
            watch([counter1, counter2], (newValue, oldValue) => {
                console.log(newValue, oldValue);
            })
            
            return {counter, counter2}
        }
    }
</script>

reactive函数的watch

  • reactive函数在 watch 属性中的注意事项:
    • 当watch中的侦听数据是reactive函数的一个对象时:
      • 在watch中是无法获取到oldValue的,只能获取到newValue。
      • 在没使用箭头函数的基础上,watch 属性默认开启deep(深度侦听)的,并且deep无法被取消,即便是在watch 属性的末尾加上 {deep : false} 也没有用。
      • 使用箭头函数调用对象,虽然无法获取oldValue,但是deep设置有效
    • 当watch中的侦听数据是reactive函数的是基本数据类型时:
      • 在watch中侦听基本数据类型,需要使用箭头函数
      • 使用箭头函数调用基本数据类型,才能获取到oldValue
  • watch 属性可以监视一个或者多个响应式数据
javascript 复制代码
// 监视一个对象
// 不使用箭头函数,deep设置无效,oldValue获取不到
watch(对象, (newValue, oldValue) => { ... }, {immediate : true})

// 使用箭头函数,oldValue获取不到,deep设置有效
watch(() => 对象, (newValue, oldValue) => { ... }, {immediate : true, deep : false})

// 监视一个基本数据类型 使用箭头函数,获取到oldValue
watch(() => 基本数据类型, (newValue, oldValue) => { ... })

// 监视多个 数组形式,使用箭头函数,获取到oldValue
watch([() => 基本数据类型, () => 基本数据类型], (newValue, oldValue) => { ... })
javascript 复制代码
// App.vue
<template>
    <h2>计数器1:{{data.counter1}}</h2>
    <h2>计数器2:{{data.a.counter2}}</h2>
    <button @click="data.counter1++">计数器1加1</button><br>
    <button @click="data.a.counter2++">计数器2加1</button>
</template>

<script>
    import { reactive, watch } from 'vue'
    export default {
        name : 'App',
        setup(){
            let data = reactive({
                counter1 : 1,
                a : {
                    counter2 : 100
                }
            })

            // data是一整个对象,oldValue是拿不到的,默认开启deep(deep设置无效)
            watch(data, (newValue, oldValue) => {
                console.log(newValue, oldValue);
            }, {deep : false})

            // data.counter1是一个基本数据类型,可以获取到oldValue
            watch(() => data.counter1, (newValue, oldValue) => {
                console.log(newValue, oldValue);
            })

            // data.a是一个对象,deep设置有效,oldValue无法获取
            watch(() => data.a, (newValue, oldValue) => {
                console.log(newValue, oldValue);
            }, {deep : false})

            // data.a.counter2是基本数据类型,可以获取oldValue
            watch(() => data.a.counter2, (newValue, oldValue) => {
                console.log(newValue, oldValue);
            })

            // data.counter1 和 data.a.counter2是基本数据类型,数组形式,可以获取oldValue
            watch([() => data.counter1, () => data.a.counter2], (newValue, oldValue) => {
                console.log(newValue, oldValue);
            })

            return {data}
        }
    }
</script>
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github