当数据不存在时 computed 的妙用

2023-12-23 12:02:04

什么是 computed 属性

在 Vue.js 中，computed 属性是一种特殊的属性，它允许我们在组件中定义一个计算属性。这个计算属性的值是由其他属性计算得来的，并且它可以被组件中的模板和方法所使用。computed 属性的语法与 methods 方法相似，但它有一个重要的区别：computed 属性的值是缓存的，这意味着它只会被计算一次，除非它的依赖项发生变化。这使得 computed 属性在处理数据时非常高效，尤其是当数据需要被频繁计算时。

当数据不存在时使用 computed 属性

在 Vue.js 中，数据不存在是一个常见的问题。这可能是由于多种原因造成的，例如：

用户尚未输入数据
数据尚未从服务器加载
数据已被删除

当数据不存在时，我们在组件中通常需要编写复杂的条件判断来处理这些情况。这可能会导致代码的复杂性和难以维护。而 computed 属性提供了一种更简单的方法来处理数据不存在的情况。

举个例子，假设我们有一个组件，它需要显示一个用户的姓名。如果用户已经输入了姓名，我们就可以直接将其显示出来。但是，如果用户还没有输入姓名，我们就可以使用 computed 属性来显示一个默认值，例如“无”。

<template>
  <div>
    <p>用户姓名：{{ user.name }}</p>
    <p>默认姓名：{{ computedName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: null
      }
    }
  },
  computed: {
    computedName() {
      return this.user.name || '无'
    }
  }
}
</script>

在上面的示例中，我们使用 computed 属性 computedName 来计算一个默认值。这个默认值将被显示在 {{ computedName }} 的位置。当用户输入姓名后，user.name 的值将发生变化，从而导致 computedName 的值发生变化。此时，组件将重新渲染，并显示用户的姓名。