From 3cbec70a5eee48fc48fdb4c2abd2dd0dd4235743 Mon Sep 17 00:00:00 2001
From: Mieriki <142009318+Mieriki@users.noreply.github.com>
Date: Tue, 9 Jul 2024 01:12:20 +0800
Subject: [PATCH] doc: Update vue.md (#786)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加 vue3 watch 监听多个值的模板
---
 docs/vue.md | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/docs/vue.md b/docs/vue.md
index 792a5a6..6100f70 100644
--- a/docs/vue.md
+++ b/docs/vue.md
@@ -510,6 +510,44 @@ watch(count, function() {
 ```
 <!--rehype:className=wrap-text-->
 
+### 监听多个值
+<!--rehype:wrap-class=col-span-2-->
+
+```html
+<template>
+	<h1> {{ count1 }} </h1>
+	<h1> {{ count2 }} </h1>
+	<button @click="count1++">count1</button>
+	<button @click="count2++">count2</button>
+</template>
+
+<script setup>
+	import { watch, ref } from 'vue';
+	
+	const count1 = ref(0)
+	const count2 = ref(0)
+	
+	watch(
+		// 监听的表达式或函数
+		() => ({
+			count1: count1.value,
+			count2: count2.value
+		}),
+		// 回调函数
+		(newValue, oldValue) => {
+			// 在这里执行需要的逻辑
+			console.log('count1 或 count2 变化了：', newValue);
+		},
+		// immediate: true 表示在初始渲染时立即执行一次回调函数，以便处理初始的状态。
+		// deep: true 表示深度监听，即对 newValue 和 oldValue 进行深层比较，而不是简单的引用比较。
+		{ immediate: true, deep: true }
+	);
+</script>
+
+<style scoped>
+</style>
+```
+
 ### 计算状态
 <!--rehype:wrap-class=col-span-2-->