What are the differences between computed and watch in Vue

Calculate the attribute computed:

Caching is supported, and only when the dependent data changes will the calculation be recalculated Asynchronous operation is not supported. It is invalid when there is asynchronous operation in computed, and data changes cannot be monitored computed attribute values are cached by default, and calculated attributes are cached based on their responsive dependencies, that is, calculated values based on the data declared in data or passed by the parent component in props If an attribute is computed from other attributes, the attribute depends on other attributes, whether it is a many-to-1 or a 1-to-1, and 1 is generally used as computed If the computed attribute value is a function, the get method will be taken by default; The return value of the function is the attribute value of the attribute; In computed, each property has an get and an set method, and when the data changes, the set method is called.

var vm = new Vue({
 el: '#app',
 data: {
  message: 'hello'
 },
 template: `
 <div> <p> I am the original value : "{{ message }}"</p> <p> I compute the value of an attribute : "{{ computedMessage}}"</p> // computed  In  DOM  You don't need to call  </div> `,
 computed: {
  //  Object of the computed property  getter   computedMessage: function () {
   // `this`  Point  vm  Instances     return this.message.split('').reverse().join('')
  }
 }
})

Results:

I am the original value: "Hello"
I am calculating the value of the property: "olleH"

If you don't use computed attributes, message. split (''). reverse ('). join ('') will be written directly to template, so putting too much declarative logic in the template will make the template itself overweight, especially when a large number of complex logical expressions are used to process data in the page, which will have a great impact on the maintainability of the page

Moreover, if the dependency remains unchanged, the computed attribute will become a cache, and the value of computed will not be recalculated

Therefore, if the data is to be produced by complex logic, it is recommended to use computed attributes

Listening attribute watch

Caching is not supported, and data changes will directly trigger corresponding operations. watch supports asynchronism; The listening function receives two parameters, the first parameter is the latest value; The second parameter is the value before input; When one attribute changes, the corresponding operation needs to be performed; 1 to many; The listening data must be the data declared in data or passed by the parent component in props. When the data changes, other operations will be triggered. The function has two parameters:

new Vue({
 data: {
  n: 0,
  obj: {
   a: "a"
  }
 },
 template: `
 <div> <button @click="n += 1">n+1</button> <button @click="obj.a += 'hi'">obj.a + 'hi'</button> <button @click="obj = {a:'a'}">obj =  New object </button> </div> `,
 watch: {
  n() {
   console.log("n  Changed ");
  },
  obj:{
   handler: function (val, oldVal) { 
   console.log("obj  Changed ")
  },
   deep: true //  This property is set in the  property  When changes are made, they must be implemented  handler  No matter how deep it is nested, the callback of    },
  "obj.a":{
   handler: function (val, oldVal) { 
   console.log("obj.a  Changed ")
  },
   immediate: true //  This property sets that the callback will be called immediately after listening begins    }
 }
}).$mount("#app");

The arrow function should not be used to define the watcher function, because the arrow function does not have this, and its this inherits its parent function, but its parent function is window, causing the arrow function's this to point to window instead of the Vue instance

deep controls whether you want to see the property changes in this object immediate controls whether this function is executed in the first render

The usage of vm. $watch () is similar to the watch callback

vm. $watch ('data attribute name', fn, {deep:..., immediate:...})

vm.$watch("n", function(val, newVal){
   console.log("n  Changed ");
},{deep: true, immediate: true})

Summarize

If 1 data needs complicated calculation, use computed Use watch if 1 piece of data needs to be monitored and 1 operation is done on the data

Above is Vue computed and watch in Vue computed and watch difference details, more information about the difference between computed and watch please pay attention to other related articles on this site!