vue3中能用方法替代计算属性嘛？

jinzunqinjiu
251 阅读4分钟

vue中的计算属性有啥用，为啥要用计算属性呢？不能用方法替代嘛？

哈喽哈喽，大家好，我是你们的金樽清酒。今天给大家浅聊一下vue中的计算属性。从为什么用计算属性，怎么用计算属性到计算属性与方法的区别进行全方面的剖析。

为什么要用计算属性

vue中的官方文档中是这么说的，模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。那么我们就需要计算属性来描述依赖响应式状态的复杂逻辑。 举个例子

<template>
  <div>
    <h2>{{ title }}</h2>
    <h2>{{ price * count }}</h2>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const title = ref("物品的价格")
const price = ref("100")
const count = ref(2)
</script>

<style lang="scss" scoped></style>

image.png

我需要计算一个价格，依赖于price和count两个变量。那我可以在模板里面直接用，但是感觉不够简洁和语义化。要是我要计算的内容很长呢？将所有的复杂逻辑硬塞到模板里面会使代码看起来很乱。所以我们可以用计算属性改进一下，使模板里面的东西看起来更加的简洁和语义化。

计算属性的用法

首先得需要从vue中引入计算属性，然后就可以用计算属性了，计算属性里面接受一个回调函数，写你的代码逻辑。举个例子，将上面的代码用计算属性改进一下。

<template>
  <div>
    <h2>{{ title }}</h2>
    <h2>{{ totalPrice }}</h2>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
const title = ref("物品的价格")
const price = ref("100")
const count = ref(2)
const totalPrice = computed(() => price.value * count.value)
</script>

<style lang="scss" scoped></style>

image.png

可以看到，效果是一样的，但是模板里面更简洁和语义化，我最后要的就是一个总的价格嘛。那么可能会有小伙伴问了，那我写一个方法不是一样可以达到这个效果嘛。诶，没错，那为什么还需要计算属性呢？

<template>
  <div>
    <h2>{{ title }}</h2>
    <h2> {{ total() }} </h2>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const title = ref("物品的价格")
const price = ref("100")
const count = ref(2)
// const totalPrice = computed(() => price.value * count.value)
const total = () => {
  return price.value * count.value
}
</script>
<style lang="scss" scoped></style>

在这里我写了一个方法，将总的价格用方法来代替，也能够得到一样的效果。

image.png

但是，计算属性和方法还是有很大的区别。不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算，也就是说只要你的依赖源不变，计算属性不会发生改变。而用方法的话，会在页面进行渲染的时候进行重新计算，方法会进行多次调用。

const now = computed(() => Date.now())

比如返回一个时间戳，计算属性永远不会变，因为Date.now()不是它的响应式依赖。 而方法就是因为页面刷新，重新渲染而调用，所以时间戳会发生改变。这就是二者的区别了。特别强调计算属性只会根据响应式依赖源的改变而改变。

举个例子理解计算属性与响应式依赖源的联系

<template>
  <div>
    <h2>{{ title }}</h2>
    <h2> {{ totalPrice }} </h2>
    <button @click="addCount">add</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
const title = ref("物品的价格")
const price = ref("100")
const count = ref(2)
const totalPrice = computed(() => price.value * count.value)
const addCount = () => {
  count.value++
}
</script>
<style lang="scss" scoped></style>

将上述的例子加一个按钮，增加商品数量。商品数量是计算属性的响应式依赖，所以数量的改变会导致计算属性的改变。

image.png

你看，随着点击按钮，物品的价格发生变化。

总结

为了使模板更加的简洁和语义化，一些复杂的逻辑我们会用计算属性来代替。计算属性和方法有区别。计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。方法调用总是会在页面重新渲染的时候再次执行。为什么要缓存，官方原话：为什么需要缓存呢？想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。没有缓存的话，我们会重复执行非常多次 list 的 getter，然而这实际上没有必要！如果你确定不需要缓存，那么也可以使用方法调用。所以计算属性在某些情况下能够提高我们的性能。

假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！”

avatar
文章
阅读
粉丝