Finally, we’ve arrived at the combined API part of Vue 3. Here’s the good news. Vue 3’s combined API not only makes our code more concise, but also easier to maintain. Today, let’s talk about the watch attribute, which is an artifact that can monitor data changes in a Vue instance!
First, we need to understand what the watch attribute is. Simply put, a watch is like a surveillance camera that observes changes in your data and performs corresponding operations when the data changes. In Vue 3, we use the watch attribute to listen for changes in reactive data and then execute our own logic.
So, how do we use the watch attribute? It's actually very simple. We only need to define a watch object in the Vue instance, and then use the data to be monitored as the key and the callback function to be executed as the value. When the data changes, our callback function is automatically triggered.
The following is a simple example showing how to use the watch attribute to monitor changes in a data:
import {
ref, watch } from 'vue';
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log(`Count changed from ${
oldVal} to ${
newVal}`);
});
count.value++; // 输出：Count changed from 0 to 1
In this example, we create a reactive data called count and use the watch attribute to listen for its changes. When the value of count changes, our callback function will be triggered and print out the information that the value of count changes from the old value to the new value.
Of course, the watch attribute can not only monitor changes in single data, but also monitor changes in objects and arrays. If you want to listen for changes in an object, you can pass the function of the watch object as the value, as shown below:
import {
ref, watch } from 'vue';
const user = ref({
name: 'John', age: 30 });
watch(user, (newVal, oldVal) => {
console.log(`User changed from ${
JSON.stringify(oldVal)} to ${
JSON.stringify(newVal)}`);
});
user.value.name = 'Bob'; // 输出：User changed from {"name":"John","age":30} to {"name":"Bob","age":30}
In this example, we create a reactive object named user and use the watch property to listen for its changes. When user's attributes change, our callback function will be triggered and print out the information that user's value changes from the old value to the new value.
It should be noted that when using the watch attribute to monitor data changes, the execution of the callback function is asynchronous. If you need to perform some operation immediately after the data changes, you can use the immediate attribute to have the callback function execute immediately when the data changes:
import {
ref, watch, immediate } from 'vue';
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log(`Count changed from ${
oldVal} to ${
newVal}`);
immediate(() => {
console.log(`Count is now ${
newVal}`);
});
});
count.value++; // 输出：
Of course, the watch attribute is not omnipotent. Its disadvantage is that every time the data changes, the callback function will be triggered. If the data changes frequently, it may cause performance problems. Therefore, in actual development, we need to choose to use the watch attribute or other solutions with better performance, such as using the computed attribute or memoization technology, according to the specific situation.
The above code shows how to use the watch attribute in Vue 3's composite API to monitor data changes. Through the watch attribute, we can monitor changes in individual data, objects, or arrays, and execute the corresponding callback function when the data changes. The execution of the callback function is asynchronous, but you can use the immediate attribute to make it execute immediately when the data changes. It should be noted that the performance overhead of the watch attribute is relatively high, so in actual development, it is necessary to choose an appropriate solution based on the specific situation.
In short, the watch attribute is a very useful feature in Vue 3. It can help us monitor data changes more conveniently and perform corresponding operations when the data changes. I hope all newbies can study it carefully and use it flexibly!