Preface
The watcher in Vue is a special object that can subscribe to changes in responsive data and execute the corresponding callback function when it changes.
There are three types of watchers in Vue :
- The rendering watcher is the watcher responsible for updating the view. Each component instance has a corresponding rendering watcher. When a component instance is created, a rendering watcher is created, executes the render function of the component, and collects responsive data that the component depends on. When these data change, the rendering watcher will trigger the component to re-render.
- A computed property watcher is a watcher responsible for executing computed properties. Each computed property has a corresponding computed property watcher. When a computed property is accessed, a computed property watcher is created, the getter function of the computed property is executed, and the reactive data that the computed property depends on is collected. When these data change, the calculated property watcher will trigger the re-evaluation of the calculated property and notify its dependent watcher updates.
- A user watcher is a watcher customized by the user through the watch API. It can be used to monitor one or more responsive data and execute a custom callback function when the data changes. Users can configure user watcher behavior through some options, such as immediate, deep, sync, etc.
The main timing when watchers are collected are as follows:
- When a component instance is created , a rendering watcher will be created and the render function of the component will be executed. At this time, the getter function of the responsive data will be triggered, and the rendering watcher will be collected into the dependency list of the data.
- When a calculated property is accessed , a calculated property watcher will be created and the getter function of the calculated property will be executed. At this time, the getter function of the responsive data will be triggered, and the calculated property watcher will be collected into the dependency list of the data.
- When the user creates a user watcher through the watch API , if the immediate option is set to true, the callback function of the user watcher will be executed immediately. At this time, the getter function of the responsive data will be triggered, and the user watcher will be collected into the dependency list of the data.
- When the user creates a user watcher through the watch API , if the deep option is set to true, the monitored responsive object will be deeply traversed, and the user watcher will be collected into the dependency list of all nested properties of the object.