What is the purpose of the watch function in Vue.js ?

The watch function in Vue.js is primarily used to observe and respond to changes in data objects within a Vue instance. When the watched data changes, the watch function is triggered to execute specific operations. This is very useful when responding to data changes, such as data validation, asynchronous operations, or handling complex logic.

Usage Scenarios:

1. Form Validation

Suppose we have a user registration form that requires real-time validation of the username. We can use watch to observe changes in the username input and perform validation.

javascript
data() {
  return {
    username: ''
  }
},
watch: {
  username(newVal) {
    if (newVal.length < 3) {
      alert('Username length must be greater than 3');
    }
  }
}

In this example, whenever the username data changes, the watch function executes to alert the user about the username length requirement.

2. Data Retrieval

Suppose we have a component that needs to fetch weather forecasts based on the user's selected city. We can use watch to implement asynchronous data retrieval.

javascript
data() {
  return {
    city: ''
  }
},
watch: {
  city(newVal, oldVal) {
    if (newVal !== oldVal) {
      this.fetchWeather(newVal);
    }
  }
},
methods: {
  fetchWeather(city) {
    axios.get(`/api/weather/${city}`).then(response => {
      this.weather = response.data;
    })
  }
}

In this example, whenever the city changes, the watch function calls the fetchWeather method to asynchronously retrieve weather information based on the new city value.

Usage Recommendations

Although the watch function is powerful, it is important not to overuse it to avoid performance issues. For most simple data change responses, using computed properties can achieve more efficient data processing. Using watch is better suited for handling more complex data changes or performing asynchronous operations.