Vue中的computed 和 watch

computed 和 watch

Vue2 options文档

响应式原理options.data
1.data会被Vue监听
2.会被Vue实例代理,vm就是data的代理
3.每次对data的读写都会被Vue监控。不管你是读写它的本身还是读写代理都会被监控，data对象会被篡改,本来的n会变成get n和set n。
4.Vue会在data变化时更新UI
data变化时除了更新UI，还能做些啥？

一.Computed 计算属性

1.用途:被计算出来的属性就是计算属性
2.缓存： 如果依赖的属性没有变化，就不会重新计算
getter/setter默认不会做缓存，Vue做了特殊处理

例1:用户名展示

new Vue({
   
  data: {
   
    user: {
   
      email: "1231231231@qq.com",
      nickname: "小白",
      phone: "13812345678"//手机号用string存，因为有时候会出现+86
    }
  },
  computed: {
    //计算属性
    displayName: {
   
      get() {
   
        const user = this.user;
        return user.nickname || user.email || user.phone;
      },
      set(value) {
   
        console.log(value);
        this.user.nickname = value;
      }
    }
  },
  // Don't repeat yourself
  // 用 computed 来计算 displayName
  template: `
    <div>
      {
    {displayName}}
 <!-- {
    {user.nickname || user.email || user.phone}} -->
      <div>
        {
    {displayName}}
 <!-- {
    {user.nickname || user.email || user.phone}} -->
        <button @click="add">set</button>
      </div>
    </div>
  `,
  methods: {
   
    add() {
   
      console.log("add");
      this.displayName = "小红";
    }
  }
}).$mount("#app");

什么时候用computed？
如果我想在页面的100处展示{ {user.nickname || user.email || user.phone}}，那就需要把这行代码复制100次。假如需求变了:调整顺序，那就需要一个个修改。为了解决这个问题可以用computed计算属性。
计算属性的好处：
让一些“根据其它属性计算而来的属性”变成一个属性，比如displayName。

怎么设置修改一个属性？文档

1’ key(属性名):函数
2’ key:{get:Function,set:Function}

computed: {
   
    displayName: {
    //key:{get:Function,set:Function}
      get() {
   
        const user = this.user;
        return user.nickname || user.email || user.phone;
      },
      set(value) {
   
        this.user.nickname = value;
      }
    }
  },

例2:列表展示

let id = 0;
const createUser = (name, gender) => {
    //DRY原则：1.封装createUser
  id += 1;
  return {
    id, name, gender };
};
new Vue({
   
  data()