What are the differences between vue computed properties and watches?

Difference: 1. The calculated attribute needs to be rendered in the template when called, and the metadata on which the calculation depends is modified; watch only needs to modify the metadata when called. 2. Computed attributes default to deep dependence, and watches default to shallow observation. 3. Computed attributes are suitable for filtering and cannot be asynchronous; watch is suitable for asynchronous or expensive operations.

computed

##computed is a computed property, it will be calculated based on the data you rely on Dynamically display new calculation results

The calculated properties will be added to the Vue instance. The this context of all getters and setters

is automatically bound to the Vue instance

through the calculated properties

No need to call Can be used directly in the DOM

Basic example

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  template: `
  <div>
  <p>我是原始值: "{{ message }}"</p>
  <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用
  </div>
  `,
  computed: {
    // 计算属性的 getter
    computedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

Result:

I am the original value: "Hello"

I am the value of the calculated attribute: "olleH"

If you do not use calculated attributes, then message.split('').reverse().join('') will be written directly into the template. Then putting too much declarative logic in the template will make the template itself Too heavy, especially when a large number of complex logical expressions are used to process data in the page,

will have a great impact on the maintainability of the page

And if the calculated attribute If the dependency remains unchanged, it will become a cache, and the computed value will not be recalculated

So, if the data needs to be obtained through complex logic, then it is recommended to use calculated properties

watch

An object, the key is the data corresponding to data, and the value is the corresponding callback function. The value can also be a method name, or an object containing options. When the data data changes, a callback will occur. It has two parameters, a val (modified data data) and an oldVal (original data data). )

The Vue instance will call
$watch() when instantiated, traversing each property of the watch object

Basic example

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += &#39;hi&#39;">obj.a + 'hi'</button>
      <button @click="obj = {a:&#39;a&#39;}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 变了")
    },
      deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 变了")
    },
      immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
    }
  }
}).$mount("#app");

Note:

You should not use the arrow function to define the watcher function, because the arrow function does not have this, and its this will inherit its parent function, but its parent function is window, causing the arrow function to this points to the window, not the Vue instance

• deep controls whether to see the property changes in this object
• immediate controls whether it is the first time Rendering is to execute this function

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

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

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

The difference between vue calculated properties and watch

Computed properties vs property detectionFirst runNot run for the first timeNeeds to be rendered in the template when called , modify the metadata that the calculation relies onOnly need to modify the metadata when callingDefault deep dependencyDefault shallow observationSuitable for filtering, not asynchronousSuitable for asynchronous or expensive operations

Computed properties (computed)	Property detection ( watch)

If a piece of data needs to go through complex For calculations, use computed

If a data needs to be monitored and some operations are performed on the data, use watch

Related recommendations:

##2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: the latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit:

Programming Teaching

! !

The above is the detailed content of What are the differences between vue computed properties and watches?. For more information, please follow other related articles on the PHP Chinese website!