一、computed

computed是计算属性的意思, 根据一个属性计算出一个值，它会根据你所依赖的数据动态显示新的计算结果。

计算结果会被缓存， 如果数据没有发生改变则使用缓存，不会重新加载。

未使用computed的代码示例：codesandbox.io/s/modest-ma…

使用complayed的代码示例：codesandbox.io/s/little-br…

示例代码：

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");

二、watch

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

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

代码示例：codesandbox.io/s/lucid-sha…

watch有两个属性：deep 和 immediate

deep就是要监听对象里面的嵌套属性

immediate就是第一次渲染时是否执行watch的函数

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. computed是计算属性的意思，watch 是用来监听数据的。
2. computed是计算属性的意思, 根据一个属性计算出一个值，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存， 如果数据没有发生改变则使用缓存，不会重新加载。
3. watch有两个属性：deep 和 immediate。deep就是要监听对象里面的嵌套属性，immediate就是第一次渲染时是否执行watch的函数