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>
相关推荐
mCell11 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip11 小时前
Node.js 子进程:child_process
前端·javascript
excel14 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel15 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼16 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping16 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙17 小时前
[译] Composition in CSS
前端·css
白水清风17 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix18 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780018 小时前
new、原型和原型链浅析
前端·javascript