docs: directly watch a specific param

vuejs · Apr 27, 2021 · 70bebfc · 70bebfc
1 parent 85081ce
commit 70bebfc
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/docs/guide/advanced/composition-api.md b/docs/guide/advanced/composition-api.md
@@ -26,7 +26,7 @@ export default {
 }
 ```
 
-The `route` object is a reactive object, so any of its properties can be watched and you should **avoid watching the whole `route`** object:
+The `route` object is a reactive object, so any of its properties can be watched and you should **avoid watching the whole `route`** object. In most scenarios, you should directly watch the param you are expecting to change
 
 ```js
 import { useRoute } from 'vue-router'
@@ -38,9 +38,9 @@ export default {
 
     // fetch the user information when params change
     watch(
-      () => route.params,
-      async newParams => {
-        userData.value = await fetchUser(newParams.id)
+      () => route.params.id,
+      async newId => {
+        userData.value = await fetchUser(newId)
       }
     )
   },