Method of use

computed

Purpose: Evaluate properties

Example:

var vm = new Vue({
  data: { a: 1 },
  computed: {
    / / read only
    aDouble: function () {
      return this.a * 2
    },
    // Read and set
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   / / = > 2
vm.aPlus = 3
vm.a       / / = > 2
vm.aDouble / / = > 4
Copy the code

Note: The results of computed properties are cached based on their reactive dependencies. They are reevaluated only when the associated reactive dependencies change. This means that as long as the value of A does not change, multiple calls to the aDouble and aPlus calculation properties will immediately return the previous calculation without having to execute the function again

Since date.now () is not a reactive dependency, the calling method will always execute the now function again whenever rerendering is triggered:

computed: {
  now: function () {
    return Date.now()
  }
}
vm.now // 1630998859578, prints different results each time
vm.now / / 1630998863217
Copy the code

The point of caching results is this: suppose we have A computationally expensive property, A, that iterates through A large array and does A lot of computations. And then we might have other computational properties that depend on A. Without caching, we would inevitably execute A’s getter multiple times

methods

Purpose: To make an event handler to handle many events

Example:

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a / / 2
Copy the code

watch

Example:

var vm = new Vue({
  data: {
    a: 1.b: 2.c: 3.d: 4.e: {
      f: {
        g: 5}}},watch: {
    a: function (val, oldVal) { // 1. Two parameters: new value, old value
      console.log('new: %s, old: %s', val, oldVal)
    },
    b: 'someMethod'./ / the method name
    c: {
      handler: function (val, oldVal) { / *... * / },
      deep: true // 2. Specify that this callback will be called when the property of any listening object changes, no matter how deeply nested it is
    },
    d: {
      handler: 'someMethod'.immediate: true // 3. Specify that the callback will be invoked immediately after listening starts
    },
    // 4. Pass in an array of callbacks, which will be called one by one
    e: [
      'handle1'.function handle2 (val, oldVal) { / *... * / },
      {
        handler: function handle3 (val, oldVal) { / *... * / },
        / *... * /}].// watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { / *... * / }
  }
})
vm.a = 2 // => new: 2, old: 1
Copy the code

computed vs methods

  • The function in computed doesThe cacheCalculation results;
  • Methods will not cache results if they are used for calculations.It is executed every time it is called

computed vs watch

  • Computed computes only when the dependent data changes, and when the data does not change, it reads cached data.
  • watch It needs to be executed every timeFunction. Watch works betterAsynchronous operations when data changes

Refer to the article

  • API, Vue. Js
  • Evaluate properties and listeners