Vue中的（computed）计算属性和（watched）侦听属性以及（methods）方法

1. computed 计算属性可用于快速计算视图中显示的属性。
这些计算将被缓存，并且只在需要时更新。
他的方法不需要在data里面定义
它们完全是同步的。

  <div class="text">
    {{total}}
  </div>
export default {
  data() {
    return {
      a: '我是a',
      b: '我是b',
    };
  },
  computed: {
    total() {
      return `${this.a} ${this.b}`;
    },
  },
};

因此当 this.a或者this.b 发生改变时，所有依赖 total 的绑定也会更新。
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

export default {
  data() {
    return {
      a: '我是a',
      b: '我是b',
    };
  },
  computed: {
    // total() {
    //   return `${this.a} ${this.b}`;
    // },
    total: {
      get() {
        return `${this.a} ${this.b}`;
      },
      set(newValue) {
        console.log(newValue);  //我是set
        this.a = newValue;
      },
    },
  },
  mounted() {
    setInterval(() => { this.total = '我是set'; }, 1000);
  },
};

2. watched监听（在data里面定义了）

<template>
  <div class="text">
    {{total}}
  </div>
</template>

export default {
  data() {
    return {
      first: 'Lucy',
      last: 'Bob',
      total: '',
    };
  },
  watch: {
    first() {
      this.total = this.first + this.last;
    },
  },
  mounted() {
   //this.first = 'Pop';
  },
};

第一次不会执行watch里面的方法，如果想要直接执行watch里面的方法，这就需要用到handler方法和immediate属性

export default {
  data() {
    return {
      first: 'Lucy',
      last: 'Bob',
      total: '',
      obj: {
        a: '',
      }
    };
  },
  watch: {
    first: {
      handler() {
        this.total = this.first + this.last;
      },
      immediate: true,
    },
  },
  mounted() {
    // this.first = 'Pop';
  },
};

如果我们需要监听obj里的属性a的值呢？需要用到deep属性
但是这样会监听所有的obj里面的data，开销比较大。

export default {
 data() {
    return {
      first: 'Lucy',
      last: 'Bob',
      total: '',
      obj: {
        a: '我是obj',
      },
    };
  },
  watch: {
    first: {
      handler() {
        this.total = this.first + this.last;
      },
      immediate: true,
    },
    obj: {
      handler() {
        alert(this.obj.a);
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    // this.first = 'Pop';
  },
};

优化方案：

export default{
 data() {
    return {
      first: 'Lucy',
      last: 'Bob',
      total: '',
      obj: {
        a: '我是obj',
      },
    };
  },
  watch: {
    first: {
      handler() {
        this.total = this.first + this.last;
      },
      immediate: true,
    },
    'obj.a': {
      handler() {
        alert(this.obj.a);
      },
      immediate: true,
    },
  },
  mounted() {
    // this.first = 'Pop';
  },
};

methods是方法，是要调用它就会执行