快捷導(dǎo)航

使用Vue3的watch實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)更新(附詳細(xì)代碼)

更新時(shí)間：2025年08月20日 10:10:54 作者：Derlii

vue.js是一個(gè)輕量級的前端框架,你可以使用它來實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)刷新,下面這篇文章主要介紹了使用Vue3的watch實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)更新的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、監(jiān)聽基礎(chǔ)ref類型

1.監(jiān)聽單個(gè)ref數(shù)據(jù)

<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 點(diǎn)擊按鈕后偵聽到

2.監(jiān)聽多個(gè)ref數(shù)據(jù),以數(shù)組的形式偵聽

<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 點(diǎn)擊one按鈕后偵聽到 one的值+1

點(diǎn)擊two按鈕后偵聽到 two的值+1

3.監(jiān)聽一個(gè)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: 舊值

// 這個(gè)偵聽器無效，即控制臺無輸出
watch(num, (newVal, oldVal) => {
  console.log("偵聽器1：", newVal, oldVal);
});

// getter函數(shù)形式，新舊值不一樣
watch(
  () => ({ ...num.value }),
  (newVal, oldVal) => {
    console.log("偵聽器2：", newVal, oldVal);
  }
);
</script>
<style lang="scss" scoped>
.style {
  margin: 10px 20px;
}
</style>

二、監(jiān)聽基礎(chǔ)reactive類型

1.監(jiān)聽對象中的單個(gè)屬性

<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 點(diǎn)擊按鈕后偵聽到

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 點(diǎn)擊左側(cè)按鈕number+1 age的值不變

age的初始值為18 點(diǎn)擊右側(cè)按鈕age+1 number值不變

3.同時(shí)監(jiān)聽ref基本類型數(shù)據(jù)和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 點(diǎn)擊左側(cè)按鈕address+1 number的值不變

number的初始值為1 點(diǎn)擊右側(cè)按鈕number+1 address的值不變

總結(jié)

到此這篇關(guān)于使用Vue3的watch實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新的文章就介紹到這了,更多相關(guān)Vue3 watch數(shù)據(jù)實(shí)時(shí)更新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: