In Vue.js, watchand computedare both used to monitor data changes, but their usage and implementation mechanisms are different. The following are their differences:
✨ Implementation mechanism
watchWhat is monitored is a specific data, and when the data changes, the corresponding callback function will be executed; the computedattribute is like a responsive calculated attribute, which is cached based on the data it depends on. When the dependent data changes, computedthe attribute will automatically update the cache. When the data changes, the corresponding operation will not be performed immediately, but it will wait for the next update opportunity of the task queue.
✨ Applicable scenarios
watchMore suitable for data monitoring with side effects, such as some data that requires background requests;computedIt is more suitable for scenarios where properties are calculated based on existing data (data and props) and need to be cached.
✨ Features
watchCan monitor multiple data and make corresponding processing when the data changes;computedOnly the cache of calculated attributes is supported. The cache will be automatically updated when the dependent data changes, and can begettersetsetter.
✨ Performance
watchThe performance is weak because it monitors changes in a specific data or multiple data. If too much data is monitored, itwatchwill have a negative impact on the performance of the entire application;computedThe performance is better because it is essentially a cache. The cache will only be updated when the data changes, and it will not mindlessly traverse the monitoring data like watch.
✨ Differences in monitoring data
watchWhat is monitored is a specific data, which can be a property in the data or a prop passed in from outside the component. When the data changes, the corresponding callback function will be executed.computedIt is a calculated property, which is a property calculated based on existing data (data and props). When used in a template, it is like a responsive property. When the data on which the calculation depends on changes, the calculated attribute will be automatically updated, and the calculated attribute has a caching mechanism. When the data on which the calculated attribute depends does not change, the cached result will be returned directly.
✨Differences in execution timing
watchWhen the monitored data changes, the callback function will be executed immediately, which is used to monitor data with asynchronous operations.computedIt is recalculated whenever the dependent data changes, and is used to process data in the template.
✨Differences in implementation methods
watchIt is mainly implemented through$watchand objects. $watch can monitor changes in a single data, and objects can monitor changes in multiple data.watchwatchcomputedcomputedIt is implemented through the attribute, which receives an object as a parameter.keyThe corresponding name of the calculated attribute in the objectvaluecorresponds to the logical function of the calculated attribute.
In short, watchit is more flexible and involves a wider range of data, but is slightly inferior in performance; it computedis more concise and can save performance, but it is only suitable for calculating existing data and returning results. Under normal circumstances computedIt is used to process complex logical operations and is convenient to call in templates; watchit is used to monitor some data changes, usually used when asynchronous operations need to be performed.