Vue中的computed 和 watch

老老老老李

已于 2022-05-12 12:30:20 修改

阅读量3.3k

点赞数 6

文章标签： computed和watch 前端框架Vue

于 2022-04-05 07:51:15 首次发布

本文链接：https://blog.csdn.net/baidulixueqin/article/details/123964026

版权

本文详细介绍了Vue中的计算属性`computed`和监听器`watch`。`computed`用于创建计算属性，提供缓存机制，仅在依赖变化时更新；`watch`则在数据变化时执行指定函数，常用于实现撤销功能等历史操作。文中通过实例讲解了两者的使用场景、语法和注意事项，包括`watch`的异步特性和`deep`选项。同时强调了在数据变化时，Vue对简单类型和复杂类型的判断规则。最后讨论了`computed`和`watch`在面试中的常见问题及区别。

摘要由CSDN通过智能技术生成

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()

最低0.47元/天解锁文章