computed

计算出一个属性，第一个值不需要加括号，当一个属性来用，它会根据依赖有一个缓存，依赖不变computed的值就不会在计算


Vue.config.productionTip = false;
let id = 0;
const createUser = (name, gender) => {
  id += 1;
  return { id, name, gender };
};
new Vue({
  data() {
    return {
      users: [
        createUser("方方", "男"),
        createUser("圆圆", "女"),
        createUser("小新", "男"),
        createUser("小葵", "女")
      ],
      gender: ""
    };
  },
  computed: {
    displayUsers : {
      const hash = {
        mail: "男",
        nv: "女"
      };
      if (this.gender === "") {
        return this.users;
      } else if (this.gender === "mail" || this.gender === "nv") {
        return this.users.filter((u) => u.gender === hash[this.gender]);
      } else {
        throw new Error("gender 出错啦");
      }
    }
  },
  methods: {
    shaoAll() {
      this.gender = "";
    },
    shaoMan() {
      this.gender = "mail";
    },
    shaoNv() {
      this.gender = "nv";
    }
  },
  // 如何给三个按钮加事件处理函数
  // 思路一：点击之后改 users
  // 思路二：使用 computed
  template: `
    <div>
      <div>
      <button @click="gender = ''">全部</button>
      <button @click="gender = 'mail'">男</button>
      <button @click="gender = 'nv'">女</button></div>
      <ul>
        <li v-for="(u,index) in displayUsers" :key="index">
          {{u.name}} - {{u.gender}}
        </li>
      </ul>
    </div>
  `
}).$mount("#app");

wacth

监听

用来监听的有2个选项

1.immedite 默认false||true , 表示是否在第一次渲染的时候执行这个函数

deep 默认false|| true, 如果监听一个对象，是否要看这个对象里面的选项
不要用箭头函数


Vue.config.productionTip = false;

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a",
      b: "b"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += 'hi'">obj.a + 'hi'</button>
      <button @click="obj = {a:'a',b:'b'}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj: {
      handler() {
        console.log("obj变了");
      },
      deep: true,
    },
    
    "obj.a": function () {
      console.log("obj.a 变了");
    }
  }
}).$mount("#app");

Vue中的computed和 wacth的区别

computed

wacth