Vue中methods、watch和computed的关系

直接上一段代码（可以直接在vue-cli创建一个简单的Demo，把下面的代码copy到某个vue文件，如demo.vue中运行）

template>
  <div class="div-container">
    <div>{{ showInfo }}</div>
    <div>
      <el-button type="primary" icon="el-icon-thumb" @click="setParam1">点击改变param1</el-button>
      <el-button type="primary" icon="el-icon-thumb" @click="setParam2">点击改变param2</el-button>
      <el-button type="primary" icon="el-icon-thumb" @click="showData">点击触发Mothed</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "Test",
  data() {
    return {
      param1: "你",
      param2: "我",
      info: "快乐",
    };
  },
  watch: {
    param1: function () {
      console.log(`${this.param1}${this.info}`);
    },
  },
  computed: {
    showInfo: function () {
      return `${this.param2}${this.info}`;
    },
  },
  methods: {
    setParam1(e) {
      console.log("点击改变param1");
      this.param1 = "你们";
    },
    setParam2(e) {
       console.log("点击改变param2");
      this.param2 = "我们";``
    },
    showData() {
      console.log(`点击showData`);
      console.log(`${this.param1}${this.info}`);
      console.log(`${this.param2}${this.info}`);
    },
  },
};
</script>

依次点击三个按钮以及控制台输出结果

methods、watch和computed都是function，其中：

method是被动的，只有主动调用（如按钮等）才会执行，如上面的showData方法；

watch的直译意思是监听，所以监听的参数或者对象是必须存在的。当被监听对象发生改变，执行对应的方法，如下图的watch对param1的监听动作（其中param1这个变量需要在data中声明）；

点击按钮，修改param1，触发监听function(){}被执行

computed的直译意思是计算，它最直观的特点就是比watch多了个return。所以当计算方法内涉及的参数发生改变时（这种改变是计算过的，比如你赋值的参数和原先没有变化，这种不视为改变，也就是常常说的缓存），引用被计算的function的也会跟着改变，如上面的showInfo。

因为param2的改变，使用了param2的showInfo也会被触发