YouTip

# Vue3 watch Property | \n\n* * Vue3 Options API](#)\n\nIn Vue3, the `watch` property is used to listen for changes in specific data within a Vue instance and execute corresponding callback functions when the data changes.\n\n`watch` allows us to observe and respond to changes in specific data within a Vue instance, enabling us to perform side effects such as updating the DOM, making network requests, and more.\n\n* * *\n\n## 2. Basic Usage of watch Property\n\nIn Vue3, the `watch` property can be used in the following ways:\n\n## Example\n\n```javascript\nimport{ ref, watch } from 'vue';\n\nexport default{\n\n setup(){\n\nconst count = ref(0);\n\n watch(count,(newValue, oldValue)=>{\n\n console.log(`count From ${oldValue} changes to ${newValue}`);\n\n});\n\nreturn{\n\n count\n\n};\n\n}\n\n};\n\n### 3. Code Explanation\n\nIn the above code:\n\n* First, we use `ref` to create a reactive data `count` and set its initial value to 0.\n* Then, we use the `watch` function to listen for changes in `count`. `watch` accepts two parameters:\n * The first parameter is the data we want to listen to (here it's `count`).\n * The second parameter is a callback function that gets triggered when the monitored data changes. The callback function receives two parameters:\n * `newValue`: The new value after the data changes.\n * `oldValue`: The old value before the data changes.\n\n### 4. Advanced Usage of watch Property\n\nIn addition to monitoring single data, `watch` can also monitor multiple data or monitor a complex expression.\n\n#### 4.1 Monitoring Multiple Data\n\n## Example\n\n```javascript\nimport{ ref, watch } from 'vue';\n\nexport default{\n\n setup(){\n\nconst firstName = ref('John');\n\nconst lastName = ref('Doe');\n\n watch([firstName, lastName],([newFirstName, newLastName],[oldFirstName, oldLastName])=>{\n\n console.log(`firstName From ${oldFirstName} changes to ${newFirstName}, lastName From ${oldLastName} changes to ${newLastName}`);\n\n});\n\nreturn{\n\n firstName,\n\n lastName\n\n};\n\n}\n\n};\n\n### 4.2 Monitoring Complex Expressions\n\nIn addition to monitoring ref objects, `watch` can also monitor computed properties or functions that return values:\n\n## Example\n\n```javascript\nimport{ ref, computed, watch } from 'vue';\n\nexport default{\n\n setup(){\n\nconst count = ref(0);\n\nconst doubledCount = computed(()=> count.value *2);\n\n watch(doubledCount,(newValue)=>{\n\n console.log(`doubledCount is now ${newValue}`);\n\n});\n\nreturn{\n\n count,\n\n doubledCount\n\n};\n\n}\n\n};\n\n### 4.3 Immediate Option\n\nBy default, `watch` only triggers when the monitored data changes. If you want the callback to execute immediately when the watcher is set up, you can use the `immediate` option:\n\n## Example\n\n```javascript\nimport{ ref, watch } from 'vue';\n\nexport default{\n\n setup(){\n\nconst count = ref(0);\n\n watch(count,(newValue, oldValue)=>{\n\n console.log(`count From ${oldValue} changes to ${newValue}`);\n\n},{\n\n immediate: true\n\n});\n\nreturn{\n\n count\n\n};\n\n}\n\n};\n\nIn the above code, because we set `immediate: true`, the callback function will be executed immediately when `watch` is set up, printing the initial value.\n\n### 4.4 Deep Option\n\nIf you want to monitor changes in nested properties of an object, you can use the `deep` option:\n\n## Example\n\n```javascript\nimport{ ref, watch } from 'vue';\n\nexport default{\n\n setup(){\n\nconst user = ref({\n\n name: 'John',\n\n age: 30\n\n});\n\n watch(user,(newValue)=>{\n\n console.log(`user changed to ${JSON.stringify(newValue)}`);\n\n},{\n\n deep: true\n\n});\n\nreturn{\n\n user\n\n};\n\n}\n\n};\n\nIn the above code, by setting `deep: true`, `watch` will monitor changes in all nested properties of the `user` object.\n\n## 5. Summary\n\nThe `watch` property is a very powerful feature in Vue3 that allows us to respond to data changes and perform corresponding operations. Here are the key points:\n\n* `watch` can monitor single or multiple reactive data.\n* The callback function receives two parameters: `newValue` and `oldValue`.\n* Use the `immediate` option to trigger the callback immediately when the watcher is set up.\n* Use the `deep` option to monitor changes in nested properties of objects.\n\nBy reasonably using the `watch` property, we can better respond to data changes and implement various business requirements.