浅析Vue中computed与watch的区别

时间:2021-2-20 作者:admin

computed

computed是计算属性的意思,会根据你所依赖的数据动态显示新的计算结果,并且自动缓存。这个值在调用的时候可以当属性一样用, 不需要加括号

举个例子

  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]); //根据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>
  `

如果不用computed的话,那么methods里面就会放入太多声明式的逻辑,使得代码重复并且逻辑过多,尤其当在页面中使用大量复杂的逻辑表达式处理数据时,会对页面的可维护性造成很大的影响

watch

watch是监听的意思,它更像是data的数据监听回调,如果某个属性变化了,就去执行一个函数的值。这个值可以是值也可以是方法名,或者包含选项的对象,当 data 的数据发生变化时,就会发生一个回调,他有两个参数,一个 newVal (修改后的 data 数据),一个 oldVal(原来的 data 数据)。并且watch提供了两个选项:第一个:immediate表示是否在第一次渲染的时候执行函数。第二个:deep,意思是如果我们监听一个对象,是否要监听这个对象里面的属性的变化

  data: {
    user: {
      email: "xxxxxxxx@qq.com",
      nickname: "小白",
      phone: "130xxxxxxxx"
    },
    displayName: ""
  },
  watch: {
    "user.email": {
      handler: "changed",
      immediate: true // 第一次渲染是也触发 watch

    },
    "user.nickname": {
      handler: "changed",
      immediate: true // 第一次渲染是也触发 watch
    },
    "user.phone": {
      handler: "changed",
      immediate: true // 第一次渲染是也触发 watch
    }
  },
  template: `
    <div>
       {{displayName}}
       <button @click="user.nickname=undefined">remove nickname</button>
    </div>
  `,
  methods: {
    changed() {
      console.log(arguments);
      const user = this.user;
      this.displayName = user.nickname || user.email || user.phone;
    }
  }

这里如果不写immediate的话,第一次渲染页面时候不会出现任何的内容,因为watch默认第一次渲染的时候是不执行函数的

总结:

  • 如果一个数据依赖其他数据,那就适合将这个数据设置为computed
  • 如果你需要在某个数据变化时做一些事情,那就适合使用watch来观察这个数据变化
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。