百度360必应搜狗淘宝本站头条
shell 字符串比较my.cnfword空格下划线不显示applicationcontextawaremaven镜像
当前位置：网站首页 > 技术资源 > 正文

计算属性computed和侦听属性watch有什么区别?你会使用它们吗?

lipiwang 2025-03-24 17:55 5 浏览 0 评论

做过vue开发的都知道，有两个很重要的概念就是计算属性和侦听属性，我们在平时开发当中会经常用到它们，以至于我们在面试的时候也会经常被问到这两个之间的区别。

可能我们经常听到或者知道的答案就是：

  1. computed有缓存，watch没有缓存
  2. computed不支持异步，watch支持异步
  3. computed需要返回值，watch不需要返回值
  4. computed的值不能在data中定义，watch需要在data中定义

听起来没什么问题，但是问题就在于你可能有一些疑惑，这些不同导致它们看起来就是不同的东西，为什么要放在一起进行比较呢？

我们可能会经常被误导，导致错误的认为这两个属性可以做相同的事情，它们只是实现一个功能的不同用法，只是在不同场景下各有优劣。

是的，我们不应该去分析它们的区别，更准确的说我们应该问计算属性和侦听属性它们的特点是什么？而真正可以与computed作比较的其实是属于methods。

那么接下来我们要做的，就是看一下computed、watch和methods有什么特性，它们的用法都有哪些，以及computed和methods在实现相同功能的时候有哪些区别。

hiahiahia

计算属性computed

计算属性的属性名不需要在data中定义，表示这是一个由其他值计算得出的值，因此需要返回值，只不过当计算该值所用到的响应式依赖发生变化的时候，会通知该计算属性进行重新计算，该属性名会在收集的时候被当做新属性存放起来，可以直接通过this.来获取。

①当响应式依赖变化时会重新计算


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      price: 2,
      count: 1
    }
  },
  computed: {
    totalPrice() {
      return this.count * this.price
    }
  },
  methods: {
    addPrice() {
      this.price++
    },
    addCount() {
      this.count++
    }
  }
}
</script>

单价+1

数量+1

我们可以看到初始化的时候totalPrice的值就已经被计算出来了，当count或price任意一个发生变化的时候，都会去重新计算totalPrice的值。

②当多次使用该值时，只会计算一次，然后将值缓存起来，以供获取，直到响应式依赖发生变化，才会重新计算


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      price: 2,
      count: 1,
      nums: 0
    }
  },
  computed: {
    totalPrice() {
      console.log(`我被计算了${++this.nums}次`)
      return this.count * this.price
    }
  }
}
</script>

多次获取

只执行1次

计算属性的缓存机制，主要是用来处理：如果一个值需要大量的计算才能得到，那么当页面中或者其他计算属性或者其他地方用到该值的时候，只需做一次计算即可多处使用，而不必重复计算，来避免过多的性能开销，如果需要实时计算，不希望值被缓存，那么使用方法就可以达到效果。

③可以传入不同的参数，这个时候就是当做方法来调用，不再具有缓存的效果


<script>
let nums = 0
export default {
  name: 'testComponent',
  data() {
    return {
      price: 2,
      count: 1,
    }
  },
  computed: {
    totalPrice() {
      return function(sign) {
        console.log(`我被计算了${++nums}次`)
        return sign + this.count * this.price
      }
    }
  }
}
</script>

传参

计算了三次

通过返回一个函数的方式，就可以对一个计算属性进行传参，不过此时该计算属性就相当于使用了一个函数，不同的是，可以利用闭包的机制，来对所有的这些函数做一些初始化的操作，请看这个例子


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      price: 2,
      count: 3,
    }
  },
  computed: {
    totalPrice() {
      let m = 0
      return function(sign) {
        return `优惠${m}件` + sign + (this.count - m++) * this.price
      }
    }
  }
}
</script>

利用闭包

同一个计算属性多次计算可以共享同一个闭包环境中的变量。

④可以指定getter和setter来控制行为


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      price: 2,
      count: 1,
      nums: 0
    }
  },
  computed: {
    totalPrice: {
      get() {
        return this.count * this.price
      },
      set(val) {
        this.price = val / this.count
      }
    }
  }
}
</script>

通过getter获取

总价+10

侦听属性watch

被侦听的变量需要在data中定义，表示当该属性值发生变化的时候，需要执行某些操作，因此支持函数所允许的任何行为，不需要返回值，可以理解为这是对一个函数进行了监听，相当于是给函数增加了addEventListener，触发的条件就是侦听的属性发生了变化，然后就会执行定义的回调函数，接收两个参数，第一个是改变后的值，第二个是改变之前的值。可以侦听基本类型与引用类型，甚至能侦听引用类型里面的某个属性。

①当侦听一个基本类型时


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      price: 2,
      count: 1,
      totalPrice: 0
    }
  },
  watch: {
    count(nv, ov) {
      this.totalPrice = this.price * this.count
    }
  },
  created() {
    this.totalPrice = this.price * this.count
  }
}
</script>

初始化

侦听变化

我们可以看到，当count属性变化的时候，重新计算了totalPrice的值，这里我们在created的时候，给totalPrice进行了赋值，因为如果不初始化的话，totalPrice会取默认值0，我们把created这段代码去掉，效果就像下面这样

没有初始值

这是因为只有当属性变化的时候才会执行侦听的函数，去计算totalPrice的值，那么能不能在初始化的时候就直接执行一次侦听的函数，而不用在created里面重复的写了呢？

当然可以，我们把侦听函数改成用对象的形式，并设置immediate为true

watch: {
  count: {
    handler: function () {
      this.totalPrice = this.price * this.count
    },
    immediate: true
  }
}

立即执行

②侦听引用类型


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      goods: [{
        name: '雪糕',
        price: 2,
        count: 1
      }],
      totalPrice: 0
    }
  },
  watch: {
    goods: {
      handler: function (nv) {
        this.totalPrice = nv.reduce((total, item) => {
          return total += item.price * item.count
        }, 0)
      },
      immediate: true
    }
  },
  methods: {
    addGoods() {
      this.goods.push({
        name: '饮料',
        price: 3,
        count: 2
      })
    },
    changeGoods() {
      this.goods = [{
        name: '辣条',
        price: 5,
        count: 6
      }]
    }
  }
}
</script>

我们定义了一个引用类型的goods，设置了三种改变方式：更改对应项的数量、追加一种物品、更改定义的物品

初始化的时候我们看到立即执行发生了作用

初始化

增加雪糕的数量

增加数量

我们发现总价并没有发生改变，这说明该属性的变化没有被侦听到，因此不会执行函数，那么如何让属性的变化也能被侦听到呢，就用到了deep属性

watch: {
  goods: {
    handler: function (nv) {
      this.totalPrice = nv.reduce((total, item) => {
        return total += item.price * item.count
      }, 0)
    },
    immediate: true,
    deep: true
  }
}

深度监听

这时我们看到属性的变化也会引起侦听函数的执行

追加一种物品

追加物品

这个时候没有deep属性，也会侦听到变化，从而执行函数

更改定义的物品

更改物品

同样会执行函数

③侦听引用类型的某个属性


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      goods: [{
        name: '雪糕',
        price: 2,
        count: 1
      }]
    }
  },
  watch: {
    'goods.0.count': function(nv) {
      console.log('现在的数量是：' + nv)
    }
  }
}
</script>

当多次更改第一项的count值时，每次的变化都能够被侦听到

侦听具体属性

其实侦听属性不但可以设置为函数和对象，也可以设置为字符串和数组

当设置为字符串时，将会执行对应的方法


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      goods: [{
        name: '雪糕',
        price: 2,
        count: 1
      }]
    }
  },
  watch: {
    goods: 'goodsChanged'
  },
  methods: {
    addGoods() {
      this.goods.push({
        name: '饮料',
        price: 3,
        count: 2
      })
    },
    goodsChanged(nv, ov) {
      console.log('物品发生了改变')
      console.log(nv)
    }
  }
}
</script>

点击追加物品按钮，则会执行对应的方法，回调函数的两个参数同样是修改后与修改前的值

设置为字符串

当设置为数组时，将会在侦听属性发生改变时，遍历这个数组，并把数组的每一项当做回调函数进行执行，数组的每一项同样可以是函数、对象、字符串，注意不能再嵌套数组


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      goods: [{
        name: '雪糕',
        price: 2,
        count: 1
      }]
    }
  },
  watch: {
    goods: [
      'change1',
      function change2() {
        console.log('我是change2')
      },
      {
        handler: function change3() {
          console.log('我是change3')
        }
      }
    ]
  },
  methods: {
    addGoods() {
      this.goods.push({
        name: '饮料',
        price: 3,
        count: 2
      })
    },
    change1(nv, ov) {
      console.log('我是change1')
    }
  }
}
</script>

点击追加物品按钮，我们来看一下效果

设置为数组

方法methods

这个相信大家都已经能非常熟练的使用了，所有的方法都会默认挂载到当前实例上面，也就是说可以直接通过this.进行调用，这里只说一下当在template里面使用时，我们能够怎样进行传参

①默认传参


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      price: 2,
      count: 1
    }
  },
  methods: {
    addCount(e) {
      console.log(e)
      this.count++
    }
  }
}
</script>

当点击加1个按钮时，会自动执行对应方法

执行方法

并且会把事件对象作为参数传递进去

默认传参

②主动传参


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      price: 2,
      count: 1
    }
  },
  methods: {
    addCount(ct) {
      this.count += ct
    }
  }
}
</script>

在调用函数的地方，直接加上括号，然后把需要的参数传递进去就可以了，比如点击加10个，效果依然正常呈现

主动传参

当然了这种方式就没法获取到当前的事件对象了，这时你可能会问，那我需要这个事件对象怎么办呢，我该如何去处理呢？别急，我们有办法

通过$event来控制


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      price: 2,
      count: 1
    }
  },
  methods: {
    addCount(a, b) {
      console.log('观察参数')
      console.log(a)
      console.log(b)
    }
  }
}
</script>

我们先点击加1个，再点击加10个

传递事件对象

可以看到，我们可以轻易的控制参数的传递

还有一种就是通过包裹一层函数来控制


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      price: 2,
      count: 1
    }
  },
  methods: {
    addCount(a, b) {
      console.log('观察参数')
      console.log(a)
      console.log(b)
    }
  }
}
</script>

我们先点击加1个，再点击加10个，来看下效果

通过包裹函数

我们发现同样实现了我们想要的效果

这样方式对于使用自定义组件时尤其有用，我们不但可以接收来自组件传递的参数，而且可以传入其他我们想要传递的参数

③作为计算属性来使用


<script>
export default {
  name: 'testComponent',
  data() {
    return {
      price: 5,
      count: 3
    }
  },
  methods: {
    totalPrice(p, c) {
      return p * c
    }
  }
}
</script>

作为计算属性

这个时候并不是真正的计算属性，而是跟计算属性差不多，可以直接执行并返回一个值，只不过这种方式是没有缓存的，因为此时this.totalPrice还是指向的方法，而写成计算属性的时候，this.totalPrice指向的是执行之后返回的值，当响应式依赖发生改变的时候，vue会自动执行一遍，然后把this.totalPrice指向它的返回值。

各自特点

相信看到这里，你已经对computed、watch、methods大概有了一些了解，并清楚了它们各自的使用方式与特性，下面我们来重新归纳一下，看看你能不能理解呢

  • computed和methods无需在data中定义，watch需要
  • computed有缓存，是把该变量指向每次的执行结果，当响应式依赖变化时，vue会自动再次执行，而methods是把该变量指向函数，在用到的地方都会再次执行，而且当dom更新的时候，vue也会重新执行对应的方法，因此需要注意避免死循环，watch无所谓缓存不缓存
  • methods可以接收传参，watch回调会把改变后与改变前的值传递过去，computed不能接收传参，如果需要给computed进行传参，那么它此后的行为将于methods一致
  • computed需要返回值，methods可以有也可以没有，当作为计算属性使用时，需要返回值，watch不需要返回值
  • computed需要是同步方法，methods与watch可以执行异步方法，支持函数的所有行为
  • watch还可以在实例对象上手动添加，例如使用this.$watch添加更复杂的监听，watch也可以监听一个computed

总结

我们熟练的掌握了computed、watch、methods它们的特点与使用方式，才能够在日常开发中得心应手应对一些复杂的场景，来帮助我们解决各种问题。

相信现在无论是让你说出它们的区别还是相同点亦或是它们的特点与使用场景和能做到的事情，你都能够清晰的把这些捋清楚。

学习就是多看、多练、多问为什么、多想能不能。

感谢阅读

相关推荐

WIN10系统如何启用net Framework功能

当我们安装一些办公软件或是设计软件时，需要.netFramework运行环境，如果没有安装这个运行环境，软件就会无法运行了。那在哪启用呢？下面，我来和大家分享一下第一步，点击开始--设置--在查找设...

玩游戏怎能没有.NET Framework 3.5 但你会安装它吗?

前段时间NVIDIA发布的最强“煤气灶”引发的不仅仅是显卡价格的剧烈变动（其实也没啥，老的不降价，新的还死贵），还有就是随之而来的一大波游戏，一部分在STEAM平台上搞促销，另外一部分则是不停的放烟雾...

.Net Framework还是.Net Core?

大家都知道，微软在2016年推出了.NetCore框架。后来为了统一，在.NetFramework到了V4.8后便不再更新，同时.NetCore更名为.Net,版本从5.0开始，目前最新版本是....

.Net Framework详解

相信有不少小伙伴遇到过这种情况：安装软件时提示.NetFramework未安装导致软件无法打开，或者需要安装.NetFramework4.0以上的组件。那.NetFramework是什么呢？....

远离报错烦恼!深入全面掌握.NET Framework

由于Windows系统对.NETFramework这一系统组件有着极为特殊的要求，而部分应用软件及游戏对其的依赖性也近乎达到了驱动级的水准，使用或安装不当会遭遇许多“未知”的问题，因此如何掌握.NE...

系统小技巧:深入全面掌握.NET Framework

由于Windows系统对.NETFramework这一系统组件有着极为特殊的要求，而部分应用软件及游戏对其的依赖性也近乎达到了驱动级的水准，使用或安装不当会遭遇许多“未知”的问题，因此如何掌握.NE...

小菜鸟学Java--如何拿下数组

前面谈及到了引用数据类型，数组就是一种，它还是比较重要的一种，本篇就来详细说说它和向量。数组先来说说数组。那么什么是数组呢？它是在数组的基础上的。数组是一种常用的引用数据类型，相同数据类型的元素按照一...

Java Class 类文件格式看这一篇就够了

本文将揭开JavaClass文件的神秘面纱，带你了解Class文件的内部结构，并从Class文件结构的视角告诉你：为什么JavaClass字节码文件可以“写一次，遍地跑”？为什么常量池的计数从1开...

八种经典排序算法总结，妈妈再也不用担心我不会了

前言算法和数据结构是一个程序员的内功，所以经常在一些笔试中都会要求手写一些简单的排序算法，以此考验面试者的编程水平。下面我就简单介绍八种常见的排序算法，一起学习一下。一、冒泡排序思路：比较相邻的元素。...

Java 面试题问与答:编译时与运行时

在开发和设计的时候，我们需要考虑编译时，运行时以及构建时这三个概念。理解这几个概念可以更好地帮助你去了解一些基本的原理。下面是初学者晋级中级水平需要知道的一些问题。Q.下面的代码片段中，行A和行B所标...

Java、Set、Map集合框架知识大全，收藏备用

前言Java集合框架的知识在Java基础阶段是极其重要的，我平时使用List、Set和Map集合时经常出错，常用方法还记不牢，于是就编写这篇博客来完整的学习一下Java集合框架的知识，如有遗漏和错误，...

Java反射+注解实现Entity类与Dto类相互转换

作者：Mr_Precious链接：https://www.cnblogs.com/scale-lai/p/10164634.html序言近期在工作中管理代码时发现，在项目中从Dao层到Service层...

Java 最细的集合类总结

数据结构作为每一个开发者不可回避的问题，而Java对于不同的数据结构提供了非常成熟的实现，这一个又一个实现既是面试中的难点，也是工作中必不可少的工具，在此，笔者经历漫长的剖析，将其抽丝剥茧的呈现出...

我见过的最糟糕代码

本文最初发布于jesuisundev.com网站，经原作者授权由InfoQ中文站翻译并分享。在本文中，我将向你展示我见过的一些最糟糕的代码，它们被称为“魔鬼代码”，会带来很严重的后果。然而，我...

Java面试中最容易忽略的细节，你中了几个?避坑指南送你

今日分享开始啦，请大家多多指教~学习Java要明确自己的需求，知道自己要做什么；分析思路，知道自己要怎么做。确定步骤，每一个思路部分用到哪些方法和对象。最后用代码实现，用具体的java语言把思路体现出...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表