The difference is to explain each other, the difference is self-evident

Computed

Calculate attribute

The expressions in the template are handy, but they are designed for simple calculations. Putting too much logic in a template can make the template overweight and difficult to maintain.

Example:



How about methods instead of calculating properties?

You can define the same function as a method rather than a computed property. The end result is exactly the same either way. However, here’s the differenceComputed properties are cached based on their responsive dependencies. They are only reevaluated if the relevant responsive dependencies change. This is useful for performance tuning.

Evaluated properties only have getters by default, but you can provide a setter if needed

Watch

Listening to the

Vue provides a more general way to observe and respond to data changes on a Vue instance: listen for attributes. When you have some data that needs to change with other data, it’s easy to abuse Watch — especially if you’ve used AngularJS before. However, it is often better to use computed properties rather than imperative watch callbacks.

Example:



It’s much better to use computed properties



While evaluating properties is more appropriate in most cases, there are times when you need a custom listener. This is why Vue provides a more general way to respond to changes in data through the Watch option. This approach is most useful when asynchronous or expensive operations need to be performed as data changes.

change

When changing (not replacing) an object or array, the old value will be the same as the new value because they refer to the same object/array. Vue does not keep a copy of the value before the change.

deep

To detect changes in an object’s internal value, you can specify deep: true in the option argument. Note that you do not need to do this to listen for array changes. For example, listening obj obj:{a:”a”} => obj:{a:”b”} does not trigger. When deep:true is set, it triggers array:[] => array:[1] even if deep:true is not set

immediate

Specifying immediate: true in the option argument will trigger the callback immediately at the current value of the expression, which means that it will listen this time even when the data comes from nothing