First post the official translation:

Computed: Calculates attributes

Watch: Listening property

Method the methods:

<template>
  <div id="calTest">
    {{num}}
    {{num1()}}
    {{msg}}
    <button @click="changeMsg">change msg</button>
    <button @click="changeName">change name</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "betty".msg: 100
    };
  },
  computed: {
    num() {
      let res = this.name + "!";
      console.log("do computed");
      returnres; }},methods: {
    num1() {
      let res = this.name + "!";
      console.log("do methods");
      return res;
    },
    changeMsg() {
      this.msg += 1;
    },

    changeName() {
      this.name = "alan"; }}};</script>
Copy the code

This is an example of comparative use of computed and methods, and we can clearly see the similarities and differences:

The difference is that computed and methods return the same results

The difference is that computed is invoked directly as a variable in a template, whereas methods are written as method calls (that is, with parentheses).

Furthermore, MSG in the example is an independent data, and a button is used to control the change of values. This is done to see the key difference between computed and methods:

Computed has a cache and is recalculated only depending on data changes, whereas methods executes every time a view is rendered. Computed does not execute when we click on the changeMsg button, whereas num1 of methods does, except when we click on the changeName button (i.e., num’s dependent data name changes), Computed executes (and of course methods num1 executes)

<script>
export default {
  data() {
    return {
      a: 1.b: 2.c: { c1: 6 },
      d: 4.e: {
        f: {
          g: 5}}}; },watch: {
    a: function(val, oldVal) {
      console.log(val, oldVal);
    },
    b: "someMethod".c: {
      handler: function(val, oldVal) {
        console.log(val, oldVal);
      },
      deep: true
    },
    d: {
      handler: "someMethod".immediate: true
    },
    "e.f": function(val, oldVal) {
      console.log(val, oldVal); }},methods: {
    someMethod() {
        console.log("somemethods"); }}}; </script>Copy the code

C: {ob: Observer} c: {ob: Observer} c: {ob: Observer} c: {ob: Observer

The d callback is invoked immediately after the listening starts

E.f also returns {ob: The Observer} object, to note here, in the value of the modified c and e.f in Vue Devtools, don’t go to modify the value of c1 / g, but changes the value of the c and e.f otherwise there will be a val and oldVal are new values

Key is the name of the data to listen on, value is the name of the callback function/method…

Note: Watch callbacks do not use arrow functions

So what is the difference between computed and Watch?

In fact, the official documentation has a pretty good description of the scenarios in which both are applicable:

Computed: Reduces logic in templates to quickly compute values in updated views

Watch: Although computed is more appropriate in most cases, sometimes you need a custom listener. Watch is used to perform asynchronous operations or expensive operations when data changes