watch和computed的区别。

描述

fullName和myName都是由firstName和lastName组成的全名，现在我们希望fullName和myName随着firstName和lastName的变化而改变。

代码实现

<template>
  <div>
    <input v-model="firstName" />
    <input v-model="lastName" />
    <p>{{fullName}}</p>
    <p>{{myName}}</p>
    <button @click="getFullName">点击</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: "Foo",
      lastName: "Bar",
      fullName: "Foo Bar"
    };
  }
  methods: {
    getFullName() {
      alert(this.firstName + " " + this.lastName);
    }
  },
  watch: {
    firstName: function(val) {
      console.log(val);
      this.fullName = val + " " + this.lastName;
    }
    //注释掉对lastName的监听，观察fullName和myName的变化
    // lastName: function(val) {
    //   this.fullName = this.firstName + " " + val;
    // }
  },
  computed: {
    myName: function() {
      return this.firstName + " " + this.lastName;
    }
  }
};
</script>

初始化时的值：

修改firstName以及lastName：watch没有监听lastName，所以fullName的lastName部分未改变；

点击按钮触发方法：方法需要主动调用才能触发。

总结

computed和method的区别

1.使用method函数，是需要主动调用的;computed和watch，会自动调用
2.method函数，每次调用都执行一次;computed是基于它们的响应式依赖进行缓存的

watch和computed的区别

1.watch监听一个数据,可以影响多个数据;而computed可以同时监听多个数据,只影响一个数据；
2.使用watch时,属性名为需要监听的变量,随着变动的fullName需要在data中定义;使用computed时,属性名为随着变动的myName,变量名不可以在data中定义。
3.不支持异步，当computed内有异步操作时无效，无法监听数据的变化