Vue中Computed和Watch的区别

Computed

中文翻译计算属性。计算属性对于从现有源组合新数据非常方便，与方法相比，它们的一大优点是缓存了输出。这意味着，如果独立于计算属性的某些内容在页面上发生更改，并且重新呈现UI，则会返回缓存的结果，并且不会重新计算计算计算属性，从而避免了可能代价高昂的操作。例如下面的代码。

// 引用完整版 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");

其优点就是开头所说的，也称依赖缓存。如果依赖的的属性没有发生变化，就不会重新计算。

Watch

中文：监听 用途：当数据发生变化时，执行一个函数。 注意事项：一般需要注意的是watch是一个异步的函数。以及我们是否需要使用deep:ture/false和immediate:ture/false 。