Vue3 setup 中监听 watch 用法

最新推荐文章于 2024-08-20 10:02:59 发布

Striver_598

最新推荐文章于 2024-08-20 10:02:59 发布

阅读量197

点赞数

分类专栏： Vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_53574149/article/details/129099626

版权

Vue3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中如何使用`watch`来监听`ref`和`reactive`定义的变量变化。示例代码展示了监听单个变量以及多个变量的两种不同写法，并提供了`reactive`定义的变量深度监听的例子。

摘要由CSDN通过智能技术生成

ref 定义的变量用 watch 监听写法

import { ref, watch } from 'vue' 

const val = ref(0) 

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

// 共有两种写法

//第一种 
watch([val , val1 ], ([newVal , newVal1 ], [oldVal , oldVal1 ]) => { 
    console.log(newVal)
    console.log(newVal1)
})
//第二种 
watch([val , val1 ], (newVal, oldVla) => {
    console.log(newVal)//[newVal , newVal1 ]
    console.log(oldVla)//[oldVal , oldVal1 ]
})

reactive定义的变量用 watch 监听写法

import { reactive, watch } from "vue";

let data = reactive({ storeId:''})

watch(
    () => data.storeId,
    val => {
        console.log('打印监听storeId', val)
    },
    { deep: true , immediate: true }
)