一、computed

computed是计算属性的意思, 根据一个属性计算出一个值，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存， 如果数据没有发生改变则使用缓存，不会重新加载。

写法

类型：{ [key: string]: Function | { get: Function, set: Function } }

// 引用完整版 Vue，方便讲解
import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;
let id = 0;
const createUser = (name, gender) => {
    id += 1;
    return { id: id, name: name, gender: gender };
};
new Vue({
    data() {
        return {
            users: [
                createUser("方方", "男"),
                createUser("圆圆", "女"),
                createUser("小新", "男"),
                createUser("小葵", "女")
            ],
            gender: ""
        };
    },
    computed: {
        displayUsers() {
            const hash = {
                male: "男",
                female: "女"
            };
            const { users, gender } = this;
            if (gender === "") {
                return users;
            } else if (typeof gender === "string") {
                return users.filter(u => u.gender === hash[gender]);
            } else {
                throw new Error("gender 的值是意外的值");
            }
        }
    },
    methods: {
        setGender(string) {
            this.gender = string;
        }
    },

    template: `
    <div>
      <div>
      <button @click="setGender('') ">全部</button>
      <button @click="setGender('male')">男</button>
      <button @click="setGender('female')">女</button></div>
      <ul>
        <li v-for="(u,index) in displayUsers" :key="index">{{u.name}} - {{u.gender}}</li>
      </ul>
      
    </div>
  `
}).$mount("#app");

computed的 getter和setter

• computed的属性可以读取和设值。因此，在computed中可以分为getter(读取)和setter(设值).
• 一般情况下没有setter，computed只预设了getter，只能读取，不能设值。所以，computed默认格式（是不表明getter函数的）.
• 当赋值给计算属性的时候，将调用setter函数。

二、watch

类型：{ [key: string]: string | Function | Object | Array }

watch 是用来监听数据的。主要用法是当某个数据变化后，做一些操作。

当 data 的数据发生变化时，就会发生一个回调，他有两个参数，一个val（修改后的 data 数据），一个oldVal（原来的 data数据）

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += 'hi'">obj.a + 'hi'</button>
      <button @click="obj = {a:'a'}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 变了")
    },
      deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 变了")
    },
      immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
    }
  }
}).$mount("#app");

1. immediat：ture表示让值最初时候watch就执行
2. deep表示对对象里面的变化进行深度监听
3. 不支持缓存，数据变，直接会触发相应的操作

---

如果一个值依赖多个属性（多对一），用computed肯定是更加方便的。如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值的变化（一对多），用watch更加方便一些。

watch 支持异步代码而 computed 不支持。