使用Vue3的watch实现数据的实时更新(附详细代码)
作者：Derlii
vue.js是一个轻量级的前端框架,你可以使用它来实现数据实时刷新,下面这篇文章主要介绍了使用Vue3的watch实现数据的实时更新的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
watch函数用于侦听某个值的变化，当该值发生改变后，触发对应的处理逻辑。
一、监听基础ref类型
1.监听单个ref数据
<template>
<button class="style" @click="num++">增加watch</button>
</template>
<script setup>
import { watch, ref } from "vue";
const num = ref(1);
// newVal: 新值 | oldVal: 旧值
watch(num, (newVal, oldVal) => {
console.log(`新值:${newVal} --- 旧值:${oldVal}`);
});
</script>
<style lang="scss" scoped>
.style {
margin: 20px 20px;
}
</style>
初始值为1 点击按钮后 侦听到
2.监听多个ref数据,以数组的形式侦听
<template>
<h1 class="style">{{ one }} | {{ two }}</h1>
<button class="style" @click="one++">增加one的值</button>
<button class="style" @click="two++">增加two的值</button>
</template>
<script setup>
import { watch, ref } from "vue";
const one = ref(0);
const two = ref(10);
// newVal: 新值 | oldVal: 旧值
watch([one, two], ([newVal, oldVal]) => {
console.log(`新值:${newVal} --- 旧值:${oldVal}`);
});
</script>
<style lang="scss" scoped>
.style {
margin: 10px 20px;
}
</style>
one的初始值为1 two的初始值为10 点击one按钮后 侦听到 one的值+1
点击two按钮后 侦听到 two的值+1
3.监听一个ref对象
<template>
<h1 class="style">{{ num.number }}</h1>
<h1 class="style">{{ num.age }}</h1>
<button class="style" @click="num.number++">增加number的值</button>
</template>
<script setup>
import { watch,ref } from "vue";
const num = ref({
number: 1,
age: 18,
});
// newVal: 新值 | oldVal: 旧值
// 这个侦听器无效，即控制台无输出
watch(num, (newVal, oldVal) => {
console.log("侦听器1：", newVal, oldVal);
});
// getter函数形式，新旧值不一样
watch(
() => ({ ...num.value }),
(newVal, oldVal) => {
console.log("侦听器2：", newVal, oldVal);
}
);
</script>
<style lang="scss" scoped>
.style {
margin: 10px 20px;
}
</style>
二、监听基础reactive类型
1.监听对象中的单个属性
<template>
<h1 class="style">{{ num.value }}</h1>
<button class="style" @click="num.value++">增加one的值</button>
</template>
<script setup>
import { watch, reactive } from "vue";
const num = reactive({
value: 1,
});
// newVal: 新值 | oldVal: 旧值
watch(
() => num.value,
(newVal, oldVal) => {
console.log(`新值:${newVal} --- 旧值:${oldVal}`);
}
);
</script>
<style lang="scss" scoped>
.style {
margin: 10px 20px;
}
</style>
初始值为1 点击按钮后 侦听到
2.多层嵌套的对象
<template>
<h1 class="style">{{ num.number }}|{{ num.key.age }}</h1>
<button class="style" @click="num.number++">增加number的值</button>
<button class="style" @click="num.key.age++">增加age的值</button>
</template>
<script setup>
import { watch, reactive } from "vue";
const num = reactive({
number: 1,
name: "张三",
key: {
age: 18,
},
});
// newVal: 新值 | oldVal: 旧值
watch(
[() => num.number, () => num.key.age],
(newVal, oldVal) => {
console.log(`新值:${newVal} --- 旧值:${oldVal}`);
});
</script>
<style lang="scss" scoped>
.style {
margin: 10px 20px;
}
</style>
number的初始值为1 点击左侧按钮number+1 age的值不变
age的初始值为18 点击右侧按钮age+1 number值不变
3.同时监听ref基本类型数据和reactive对象中的属性
<template>
<h1 class="style">{{ address }}|{{ num.number }}</h1>
<button class="style" @click="address++">增加address的值</button>
<button class="style" @click="num.number++">增加number的值</button>
</template>
<script setup>
import { watch, reactive, ref } from "vue";
const address = ref("88");
const num = reactive({
number: 1,
name: "张三",
key: {
age: 18,
},
});
// newVal: 新值 | oldVal: 旧值
watch([address, () => num.number], (newVal, oldVal) => {
console.log(`新值:${newVal} --- 新值:${newVal}`);
console.log(`旧值:${oldVal}--- 旧值:${oldVal}`);
});
</script>
<style lang="scss" scoped>
.style {
margin: 10px 20px;
}
</style>
address的初始值为88 点击左侧按钮address+1 number的值不变
number的初始值为1 点击右侧按钮number+1 address的值不变
总结
到此这篇关于使用Vue3的watch实现数据实时更新的文章就介绍到这了,更多相关Vue3 watch数据实时更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！