Vue.js教学第五章：计算属性与侦听器详解

Vue.js 之计算属性与侦听器详解

---

一、计算属性

（一）概念

计算属性（Computed Properties）是 Vue.js 中的一个核心概念。它允许我们基于一个或多个数据属性来定义一个新的属性，该属性的值会根据其依赖的数据属性的变化而自动更新。这就好像是一个 “智能” 属性，它的值不是固定的，而是动态的，依据其他数据的变化而变化。

（二）工作原理

计算属性是基于 Vue.js 的响应式系统来工作的。当你在 Vue 实例中定义一个计算属性时，Vue 会自动追踪该计算属性所依赖的数据。当任何一个被依赖的数据发生变化时，计算属性会重新计算其值。这个过程是高效且智能的，Vue 内部会优化计算属性的更新时机，确保在数据变化时及时更新计算属性，同时也不会进行不必要的重复计算。

（三）优势

1. 简化模板逻辑 ：在模板中，我们经常需要对数据进行一些处理后才能展示。使用计算属性可以将这些处理逻辑从模板中分离出来，让模板保持简洁和可读性。例如，我们有一个对象数组，想在模板中展示每个对象中两个字段相加的结果。如果不用计算属性，我们可能需要在模板中使用复杂的 JavaScript 表达式；而有了计算属性，我们就可以预先定义好这个相加的逻辑，模板中只需简单引用计算属性即可。

2. 提高性能 ：由于计算属性具有缓存机制，当计算属性所依赖的数据没有发生变化时，它不会重新计算值，而是直接返回之前计算的结果。这样可以避免重复的复杂计算，提高应用的性能。相比之下，如果在模板中使用普通的 JavaScript 函数来实现类似的逻辑，每次模板重新渲染时都会调用该函数，可能导致不必要的重复计算。

（四）定义和使用示例

1. 基础示例

<div id="app">
  <p>原姓名：{
  {firstName}} {
  {lastName}}</p>
  <p>全名：{
  {fullName}}</p>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      firstName: '张',
      lastName: '三'
    };
  },
  computed: {
    fullName() {
      return this.firstName + this.lastName;
    }
  }
});
app.mount('#app');
</script>

在这个例子中，fullName 就是一个计算属性。它依赖于 firstName 和 lastName 两个数据属性。在模板中，我们直接使用 { {fullName}} 来展示计算后的全名。当 firstName 或 lastName 发生变化时，fullName 会自动重新计算并更新视图。

1. 带有条件判断的计算属性

<div id="app">
  <p>原价格：{
  {price}}</p>
  <p>折扣：{
  {discount}}</p>