分享下2024年学习Vue JS 计算属性的指南

Vue JS 计算属性可以成为救星。对于程序员来说，没有什么比盯着一段代码并花费数年时间来解读正在发生的事情更令人沮丧的了。

使用 VueJS 时，导致代码混乱的最常见方法之一是向模板添加非常长的表达式。例如，假设我们想要渲染一个反转的字符串，没有空格，并且全部大写。

如果我们使用模板内表达式来执行此操作，它将如下所示：

<template>
  <span>
    {{ text.replace(/ /g, '').toUpperCase().split('').reverse().join('') }}
  </span>
</template>

现在你可能比我更像是一个编程专家，但是这对我来说太混乱了，无法一眼就知道它想要做什么。

现在想象一下，必须在模板中的多个位置使用该值，并且在代码中遍布这个长表达式。

这时使用 Vue JS 计算属性就成了救星。

好的，但是计算属性是如何工作的呢？

现在我们知道为什么 Vue JS 计算属性很有用，让我们来看看如何使用它们。

用最基本的术语来说，我们只需向 JavaScript 导出添加一个字段并在那里定义我们的计算属性。

对于上面的例子，它看起来像这样。

<script>
export default {
  data() {
    text: 'hello world'
  },
  computed: {
    formattedText: function () {
      return this.text
        .replace(' ', '')
        .toUpperCase()
        .split('')
        .reverse()
        .join('')
    },
  },
}
</script>

现在我们已经定义了计算属性，在模板中渲染它变得非常容易。这就是我们所要做的。

<template>
  <span> val: {{ formattedText }} </span>
</template>

就是这样。现在，在我们的网页上，我们应该DLROWOLLEH以更清晰和可读的方式呈现。

使用计算属性总是能让您的项目更具可扩展性。如果我们想要更改值的计算方式，则只需更改一个计算属性，而不是可能更改数百个表达式模板。

那么，计算属性到底什么时候发生变化呢？

由于计算属性就像一个更详细的 Vue 观察器，因此它将观察一段反应性数据，并在该反应性数据发生变化时进行更新。

对于我们的示例，formattedText将始终依赖于文本的值。因此，如果我们将文本更改为“ABCDEF”，则 formattedText 将返回“FEDCBA”。

然而，为了更高效地运行，Vue 缓存了计算出的属性值。

Vue JS 仅在响应式依赖项发生更改时才会重新计算属性。

在我们的例子中，它只会在文本更改时重新计算。否则，它将返回上次更改的缓存值。

Vue 反应性基础知识

为了充分理解计算属性何时会改变，我们必须理解它们的反应依赖性的概念。

简而言之，计算属性的依赖项是帮助属性确定返回值的反应值。如果这些都没有改变，那么将再次返回缓存的值。

如果没有更改响应式依赖项，则不会重新计算计算属性。

Vue 文档中的以下示例显示了一个永远不会重新计算的计算属性。

<script>
export default {
  // ...
  computed: {
    now: function () {
      // will never update
      return new Date()
    },
  },
}
</script>

尽管计算属性现在返回一个实际上一直在变化的值，但 Vue 没有监视任何依赖项。因此，它永远不会被重新计算。

如果你不喜欢这样，你可以随时使用常规的 Vue方法，该方法会在每次渲染时重新计算。

<script>
export default {
  methods: {
    now: function () {
      return new Date()
    },
  },
}
</script>

您还可以为计算属性定义一个setter

默认情况下，计算属性是只读的，无法设置。但是，如果您想为计算属性添加一个钩子，以允许设置其依赖项。

您所要做的就是以下操作。

<script>
export default {
  computed: {
    formattedText: {
      get() {
        return this.text
          .replace(' ', '')
          .toUpperCase()
          .split('')
          .reverse()
          .join('')
      },
      set(value) {
        this.text = value
      },
    },
  },
}
</script>

例如，以下是一些命令及其对代码的影响。

console.log(this.formattedText) // DLROWOLLEH
this.formattedText = 'change'
console.log(this.text) // change
console.log(this.formattedText) // EGNAHC

Vue 3 Composition API 中的计算属性

使用Vue 3 Composition API，我们访问计算属性的方式有点不同。

首先，类似于 ref 和生命周期钩子，我们必须将计算导入到我们的脚本中。

然后，我们可以在设置方法中使用计算属性。

请记住 – 我们必须使用.valuerefs 来引用值！

import { ref, computed, onMounted } from 'vue'
export default {
  setup() {
    const text = ref('hello world')

    const formattedText = computed({
      get: () =>
        text.value.replace(' ', '').toUpperCase().split('').reverse().join(''),
      set: (value) => {
        text.value = value
      },
    })

    onMounted(() => {
      console.log(formattedText.value) // DLROWOLLEH
      formattedText.value = 'change'
      console.log(text.value) // change
      console.log(formattedText.value) // EGNAHC
    })

    return { text, formattedText }
  },
}

正如您所看到的，计算属性本身的代码基本上是相同的，但设置不同。

结论

您应该具备能够使用计算属性的所有基础知识。希望这可以帮助您压缩代码并使其更具可读性和易于理解。

如果您想要更技术性和更切题的用法来了解计算属性的工作原理。查看Vue 文档了解更多信息。