computed

computed是计算属性的意思，根据一个属性计算出一个值，它会根据你所依赖的数据动态显示新的计算结果。这个结果会根据依赖自动缓存（依赖不变computed的值就不会重新计算）

computed里定义的函数有返回值，调用函数时不用加()，当成属性用

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数据）

watch的两个属性：

• deep 意思就是我们监听一个对象，是否要看这个对象里的属性的变化
  • deep:true就是要看里的属性的变化
  • deep:flase就是不看
• immediate表示是否在第一次渲染的时候要执行这个函数

import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;

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() {
      console.log("obj 变了");
    },//点击obj.a + 'hi',obj不会变，因为它的地址没有变
    "obj.a": function() {
      console.log("obj.a 变了");
    }
  }
}).$mount("#app");

这里点击obj.a + 'hi'按钮，obj不会变，因为它的地址没有变

而给obj加上deep:true之后

 obj:{
      handler: function (val, oldVal) { 
      console.log("obj 变了")
    },
      deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调，不论其被嵌套多深
    },

会发现更改obj里面的数据，obj也会被改变

总结

• 如果一个数据依赖于其他数据，就用computed
• 如果需要在某个数据变化时做一些事情，就使用watch来观察这个数据变化
• • 注意：watch 支持异步代码而 computed 不行