Vue组件的计算属性和普通属性的区别说明

Vue组件中常用的属性有两类，一类是普通属性，另一类是计算属性。两者有什么区别呢？在这里详细讲解一下。

普通属性

普通属性是指直接定义在 Vue 组件实例中的属性，它的值可以是静态的也可以是动态的。普通属性的值是可以直接访问的，一旦指定了初始值，它的值不会再发生变化，直到组件实例被销毁。

以下是一个示例代码：

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

在这个示例中，message 是一个普通属性，并且它的值被定义为 "Hello, world!"。在模板中使用 {{ message }} 的方式来显示这个属性的值。

计算属性

计算属性是 Vue 组件中的一种特殊属性，它的值是动态计算得出的，并且可以被缓存和监视。计算属性的值依赖于其它属性中的值，只有当依赖属性发生变化时，计算属性才会被重新计算，并且在计算过程中会执行缓存优化。

下面是一个计算属性示例：

<template>
  <h1>{{ reversedMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

在这个示例中，我们定义了一个名为 reversedMessage 的计算属性，它的值是 message 值的反转。计算属性的特点是：只要 message 发生变化，reversedMessage 的值就会重新计算，而不用对整个字符串进行反转操作。

区别说明

普通属性和计算属性的区别在于，普通属性直接访问，而计算属性需要进行动态计算。在实际使用中，计算属性常常用来处理一些复杂的逻辑操作，并将其结果缓存起来，以提高性能。而普通属性一般情况下用来存储静态的数据、标记、状态等值。

下面我们通过一个小例子演示一下它们的用途。

<template>
  <div>
    <p>昵称：{{ name }}</p>
    <p>性别：{{ gender }}</p>
    <p>年龄：{{ age }}</p>
    <p>毕业院校：{{ university }}</p>
    <p>职业：{{ profession }}</p>
    <p>用户信息：
      <ul>
        <li>昵称：{{ name }}</li>
        <li>性别：{{ gender }}</li>
        <li>年龄：{{ age }}</li>
        <li>毕业院校：{{ university }}</li>
        <li>职业：{{ profession }}</li>
      </ul>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '小李',
      gender: '男',
      age: '26',
      university: '华南理工大学',
      profession: '前端工程师'
    }
  },
  computed: {
    userInfo() {
      return `${this.name}，${this.gender}，${this.age}岁，毕业于${this.university}，职业是${this.profession}`
    }
  }
}
</script>

在这个示例中，我们给每一个属性都做了展示，除此之外还在整个组件中不同的地方展示了。当我们对用户信息进行展示的时候，每次需要手动写一遍，而用计算属性来组合上面那些属性的值之后可以直接使用 {{ userInfo }} 的方式展示，而不用再写一遍。这就是计算属性的实践价值所在。

另外一个示例，假如我们需要实现一个数字输入框，要求当输入的数字大于10的时候，输入框中的数字显示为“over”，否则仍显示当前输入的数字。

<template>
  <input type="number" :value="number" @input="onChange">
  <p>输入的数字是：{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    }
  },
  computed: {
    message() {
      if (this.number > 10) {
        return 'over';
      } else {
        return this.number;
      }
    }
  },
  methods: {
    onChange(e) {
      this.number = e.target.value;
    }
  }
}
</script>

在这个示例中，我们使用了普通属性number来存储输入框中的数值，使用 computed 定义了一个名为 message 的计算属性，根据 number 的值来返回不同的结果。当键入一个数字时，我们通过 @input 监听数字输入事件，把输入框中的值更新到 number 属性上。如果我们使用普通属性去计算 message，则需要使用一个更复杂的逻辑来计算，“over”和数字对应的之间的转换。而使用计算属性，我们可以在方法中直接写一个判断逻辑，然后将它的返回值缓存起来。 这就是计算属性的便利之处。