Merge pull request #110 from GuoXiCheng/dev-c

update docs

src/.vitepress/sidebars/vue.yaml

@@ -50,18 +50,48 @@
                 link: /frontend/vue/template-syntax/list-rendering#template-上的-v-for
               - text: v-for 与 v-if
                 link: /frontend/vue/template-syntax/list-rendering#v-for-与-v-if
-      - text: 计算属性和侦听器
+      - text: 计算属性
         collapsed: true
         items:
-          - text: 计算属性
-            link: /frontend/vue/computed-and-watch/computed
+          - text: 基本用法
+            link: /frontend/vue/computed#基本用法
+          - text: 可写计算属性
+            link: /frontend/vue/computed#可写计算属性
+          - text: 最佳实践
+            link: /frontend/vue/computed#最佳实践
             items:
-              - text: 基本用法
-                link: /frontend/vue/computed-and-watch/computed#基本用法
-              - text: 可写计算属性
-                link: /frontend/vue/computed-and-watch/computed#可写计算属性
-              - text: 最佳实践
-                link: /frontend/vue/computed-and-watch/computed#最佳实践
+              - text: 计算属性缓存
+                link: /frontend/vue/computed#计算属性缓存
+              - text: getter 方法不应有副作用
+                link: /frontend/vue/computed#getter-方法不应有副作用
+              - text: 避免直接修改计算属性值
+                link: /frontend/vue/computed#避免直接修改计算属性值
+      - text: 侦听器
+        collapsed: true
+        items:
+          - text: 基本用法
+            link: /frontend/vue/watch/basic
+            items:
+              - text: 基本示例
+                link: /frontend/vue/watch/basic#基本示例
+              - text: 侦听源数据类型
+                link: /frontend/vue/watch/basic#侦听源数据类型
+                items:
+                  - text: ref 或 reactive
+                    link: /frontend/vue/watch/basic#ref-或-reactive
+                  - text: getter 函数
+                    link: /frontend/vue/watch/basic#getter-函数
+                  - text: 多个侦听源
+                    link: /frontend/vue/watch/basic#多个侦听源
+          - text: 侦听器的类型
+            link: /frontend/vue/watch/types
+            items:
+              - text: 深层侦听
+                link: /frontend/vue/watch/types#深层侦听
+              - text: 即时侦听
+                link: /frontend/vue/watch/types#即时侦听
+              - text: 一次性侦听
+                link: /frontend/vue/watch/types#一次性侦听
       - text: 表单
         collapsed: true
         items:

src/frontend/vue/computed-and-watch/computed.md → src/frontend/vue/computed.md

@@ -6,15 +6,19 @@
 
 `getter函数`会在计算属性的依赖项（`author.books`）发生变化时重新计算。
 
+::: details 查看示例
 <<< @/../projects/vue-sandbox/src/components/ComputedAndWatch/ComputedBasic.vue
+:::
 
 ## 可写计算属性
 
 计算属性默认是只读的。
 
 可以同时提供`getter`和`setter`函数创建可写的计算属性。
 
+::: details 查看示例
 <<< @/../projects/vue-sandbox/src/components/ComputedAndWatch/ComputedWritable.vue
+:::
 
 ## 最佳实践
 

src/frontend/vue/watch/basic.md

@@ -0,0 +1,29 @@
+# 基本用法
+
+## 基本示例
+
+`watch 函数`在每次响应式状态变化时触发回调函数，可以执行一些“副作用”，例如：更改 DOM 元素、异步请求。
+
+::: details 查看示例
+<<< @/../projects/vue-sandbox/src/components/ComputedAndWatch/WatchBasic.vue
+:::
+
+## 侦听源数据类型
+
+### ref 或 reactive
+
+::: details 查看示例
+<<< @/../projects/vue-sandbox/src/components/ComputedAndWatch/WatchRef.vue
+:::
+
+### getter 函数
+
+::: details 查看示例
+<<< @/../projects/vue-sandbox/src/components/ComputedAndWatch/WatchGetter.vue
+:::
+
+### 多个侦听源
+
+::: details 查看示例
+<<< @/../projects/vue-sandbox/src/components/ComputedAndWatch/WatchArr.vue
+:::

src/frontend/vue/watch/types.md

@@ -0,0 +1,50 @@
+# 侦听器的类型
+
+## 深层侦听
+
+:::warning
+
+- 深层侦听需要遍历对象中所有嵌套属性，对于大型数据结构，要注意性能开销。
+- 在`Vue 3.5+`中，`deep`选项还支持数字类型，用于指定侦听的深度。
+
+:::
+
+默认情况下，直接给`watch`传递一个响应式对象，会隐式创建深层侦听——即侦听对象内部的所有属性。
+
+也可以显式使用`deep`选项来创建深层侦听。
+
+::: details 查看示例
+<<< @/../projects/vue-sandbox/src/components/ComputedAndWatch/WatchDeep.vue
+:::
+
+## 即时侦听
+
+`watch 函数`默认在侦听源数据变化时才执行回调函数，可以通过`immediate`选项来立即执行回调函数。
+
+```js
+watch(
+  source,
+  (newValue, oldValue) => {
+    // 立即执行，且当 `source` 改变时再次执行
+  },
+  { immediate: true }
+);
+```
+
+## 一次性侦听
+
+:::warning
+仅支持 `Vue 3.4+`
+:::
+
+`watch 函数`默认在侦听源数据每次变化时执行回调函数，可以通过`once`选项来仅执行一次。
+
+```js
+watch(
+  source,
+  (newValue, oldValue) => {
+    // 当 `source` 变化时，仅触发一次
+  },
+  { once: true }
+);
+```