Recently, WHEN I sorted out the knowledge points of front-end development, I found another knowledge point that can be compared and explained. For the convenience of summary and record, this blog illustrates the comparison of computed and Watch in Vue commonly used in front-end development.
Let’s take a look at the basic definitions and functions of computed and Watch:
1, the computed
Computed, as its name suggests, literally means computing, so it has something to do with computing. In Vue, computed is a computed attribute, and its main function is to monitor changes in page data and perform corresponding computed callbacks.
2, watch
Watch, literally means to observe, so it’s about observing data. In Vue, watch is a listening attribute. Its main function is to observe data changes and execute functions regardless of whether the page data changes.
The above two points are only a general function description. Then, the similarities and differences between computed and Watch will be analyzed.
Computed and Watch have something in common: they both have the ability to observe changes in data on a page.
Computed and Watch have nothing in common:
(1) Functionally, computed data is computed only when the page data changes. If the data does not change, it only reads the cache. Watch needs to perform function operations every time it is used. Computed is a calculated property, and watch is listening for changes in a value and then performing the corresponding callback function.
② Whether to return: Functions in computed must call return, but functions in watch do not.
(3) Whether to call the cache: If the properties of computed functions have not changed, the current function will be called to read the cache, and watch will execute the callback function every time the value monitored changes.
(4) Usage scenarios: When a value depends on multiple values, it is recommended to use computed data, because the value can be updated in time if any value changes. That is, when a large number of or complex expressions are used to process data on a page, it is suitable to use computed attributes to process complex logical operations. When a value is dependent on multiple values, watch is recommended, because if this value changes, all values that depend on it will be updated in time, that is, watch is suitable for asynchronous operations when data changes.
(5) Popular comparison: When business logic needs a value or an attribute, it is not fixed, the logic is complex, and the value is not displayed intuitively in templates, or the value needs to be used many times, then computed is suitable; Watch is suitable when the business logic needs to monitor a variable value and perform an operation based on its change.
3. Simple use cases
① The actual use scenarios of computed data are as follows:
② The actual usage scenarios of Watch are as follows:
The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “iOS development by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention to it!