doc: Update README.md #786

docs/vue.md

@@ -511,37 +511,37 @@ watch(count, function() {
 <!--rehype:className=wrap-text-->
 
 ### 监听多个值
-<!--rehype:wrap-class=col-span-2-->
+<!--rehype:wrap-class=col-span-2 row-span-2-->
 
 ```html
 <template>
-	<h1> {{ count1 }} </h1>
-	<h1> {{ count2 }} </h1>
-	<button @click="count1++">count1</button>
-	<button @click="count2++">count2</button>
+  <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 }
-	);
+  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>
@@ -549,14 +549,14 @@ watch(count, function() {
 ```
 
 ### 计算状态
-<!--rehype:wrap-class=col-span-2-->
 
 ```html
 <script setup>
 import { ref, computed } from 'vue';
 
 const text = ref('')
-// computed 的回调函数里，会根据已有并用到的状态计算出新的状态
+// computed 的回调函数里
+// 会根据已有并用到的状态计算出新的状态
 const capital = computed(function(){
   return text.value.toUpperCase();
 })