Article From:https://segmentfault.com/q/1010000009263244
Question:

For example, in the official document of vue.js, you can see an example of computed and watch getting the full name:

var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

The rookie says they don’t quite understand the difference between them. Can’t watch get it like computed does?

Answer 0:

There is little difference written in computed code

Answer 1:

I think there is a difference, and the two applications should be separated.

The calculated attribute is the calculated attribute, and the listener watch is the listener watch.

The computing attribute is defined as another attribute that is calculated by other variables, and fullName recalculate its own value when it depends on the two variables that are dependent on firstName and lastName.

In addition,Computing attributes have caching。Computing attributes are cached based on their dependencies. The computed property is reevaluated only when its dependent dependency changes. This means that whenever lastName and firstName have not changed, multiple access to fullName computing properties will be returned immediately.The results of previous calculations do not need to be performed again.

The listener watch listens for a specific value and performs a specific function when the value changes. For example, in paging component, we can monitor the current page number and perform corresponding data acquisition function when page number changes.

You can look at the document in detail: https://cn.vuejs.org/v2/guide…

Answer 2:

①From the attribute name,computedIt is calculating attributes, that is, relying on other properties to calculate the final value.watchIt is to monitor the change of a value, and then perform the corresponding function.
②From the realization,computedThe value is ingetterAfter execution, it will be cached, and the next time it will be acquired after it depends on the value of the attribute.computedThe corresponding value will be re called when the value of thegetterTo calculate.watchCallbacks are executed when the value of each listening is changed. In fact, from this point of view, we are going to perform the callback after the value changes. Many functions can be used in many properties, but they are more suitable. If a value depends on multiple attributes (many to one),computedIt must be more convenient. If a value change causes a series of operations, or a value change causes a series of values to change (one-to-many), usewatchIt’s more convenient.
watchThe callback will introduce the new and old values of the listener attribute, and do some specific operations through these two values.computedIt’s usually a simple calculation.
watchandcomputedAnd there’s no more bottom,watchThe internal call isvm.$watch,What they have in common is that each attribute of the definition establishes a single one.WatcherObject.

Answer 3:

No, it’s not the same.

computedIt is used to defineData based on data

And watch is what you want to beDo something when a number of data changes,If the thing is to update other data, it is actually the same as to define the data items to be updated to computed, which is more readable with computed at this time, although technically watch can be implemented.

But you can also do other things when the watch data changes, such as calling a method, which computer can’t and shouldn’t do.

Summary:

  • 1.If a data depends on other data, the data is designed to be computed.

  • 2.If you need to do something in a data change, use watch to observe the change of data.

Answer 4:

More readable, and usually less code.

Answer 5:

There is a difference in writing. ComputedReturnstateAfter processing, watch is an assignment,modifystate。

As the document suggests, use watch when performing asynchronous operations or expensive operations.

I understand it

  1. Asynchronous execution can not return results in serial, using watch.

  2. Expensive operation to avoid blocking main threads and using watch.

  3. Simple and serial return, using computed

Answer 6:

computedAttributes emphasize computation. For example, if C = a + b, B is constantly changing from the outside and you want to display C on the page, then it is recommended to usecomputed
watchProperty emphasizes that it is worth changing the actions before and after, so there is a callback.xxx(newVal,oldVal)Well

Answer 7:

Difference:

  1. computedNew attributes will be generated, and the new attributes will not be different from the original attributes in data.
  2. computedIt will be executed once in the Vue instantiation process (if this computing attribute is useful in template, if not used, this computed will never be executed, including Vue initialization); watch will not be executed when Vue is initialized.

Which one is chosen for development: the effects produced by a certain attribute change with the change of one attribute of computed. with the watch. one focus on the result (value), and the other is the influence (process).

Answer 8:

In short, computed is based on caching, and watch equals a function. Personally feel that it will be used, the specific difference between the specific difference.

I think it’s a wide range of computing attributes.

Answer 9:

watchIt’s supposed to be a lower-level implementation, where computed is created, and every update to any property triggers the watch for that property, as well as a computed

Answer 10:

So, with watches, you’re more likely to listen for changes in props, and computed is used to calculate the value of data, which feels better.

Answer 11:

watchYou can monitor a data change and react differently, for example, by turning off the page computed when the data reaches a certain level

Answer 12:

watchFocus on listening to one of the attributes, computed focuses on the results

Answer 13:

computedIt is more convenient to use another variable that can be calculated by a variable that data has already declared, and watch is suitable for listening to a variable in a data to operate some logical behavior, such as listening to a variable and initiating an asynchronous request.

Answer 14:

Without the simplest examples of code, it’s all bullshit

Leave a Reply

Your email address will not be published. Required fields are marked *