Vue中computed属性与watch及methods

1.computed原理

对于computed的计算属性，我们通常的写法是这样的：

computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName
      }
   }

而在引用的这个计算属性的时候，却可以像data中的数据一样，使用{{}}的语法来进行调用。

因此，我们就有一个疑问了，在computed中定义的明明是一个函数（方法），而引用的时候却是当作属性进行操作了？？？

这是因为，在computed中的定义的fullName实际上也是一个对象属性，且这个对象属性包含set和get两个方法属性，get方法属性用来表述读取，set方法属性用来表示写入：

computed: {
      // 计算属性一般是没有set方法, 只读属性.
      fullName: {
        set(newValue) {
          // console.log('-----', newValue);
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get() {
          return this.firstName + ' ' + this.lastName
        }
      },

而在实际的使用过程中，对于计算属性，一般是没有set方法，只用于只读属性。

因此上面的代码，去掉set方法属性后，fullName仅包含get方法属性：

computed: {
      fullName: {
        get() {
          return this.firstName + ' ' + this.lastName
        }
      }
    }

上面的代码非常的冗余，故简写成

computed: {
      fullName: {
          return this.firstName + ' ' + this.lastName
        }
      }

2.computed与methods的比较：

computed的属性，只会计算一次，并且会将数据进行缓存，只有当数据发生改变得时候，才会重新进行计算，这种方式有利于提高性能；

methods中得方法，每次触发都会进行重新运算；

3.computed与watch的比较

computed 能做的，watch都能做，反之则不行

能使用computed的情况，尽量使用computed

watch 可以用来执行任何逻辑，如函数节流，Ajax请求异步获取数据，甚至操作DOM

例：实现一个需求：
输入框失去焦点后的500ms再进行更新

<template>
  <div>
    {{ fullName }}
    <div>firstName: <input v-model="firstName" /></div>
    <div>lastName: <input v-model="lastName" /></div>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      firstName: "Foo",
      lastName: "Bar",
      fullName: "Foo Bar"
    };
  },
  watch: {
    firstName: function(val) {
      clearTimeout(this.firstTimeout);
      this.firstTimeout = setTimeout(() => {
        this.fullName = val + " " + this.lastName;
      }, 500);
    },
    lastName: function(val) {
      clearTimeout(this.lastTimeout);
      this.lastTimeout = setTimeout(() => {
        this.fullName = this.firstName + " " + val;
      }, 500);
    }
  }
};
</script>