MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue计算属性与侦听器的选择与应用场景分析

2024-04-285.8k 阅读

Vue 计算属性

在 Vue 应用程序中，计算属性是一种非常强大的工具。计算属性允许我们基于其他响应式数据定义新的数据，并且 Vue 会自动跟踪依赖关系，只有当依赖的数据发生变化时，才会重新计算结果。

基本语法

计算属性在 Vue 实例的 computed 选项中定义。以下是一个简单的示例：

<template>
  <div>
    <p>第一个数字: <input v-model="num1"></p>
    <p>第二个数字: <input v-model="num2"></p>
    <p>两数之和: {{ sum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0
    };
  },
  computed: {
    sum() {
      return this.num1 + this.num2;
    }
  }
};
</script>

在上述代码中，我们定义了两个数据 num1 和 num2，以及一个计算属性 sum。sum 依赖于 num1 和 num2，当 num1 或 num2 发生变化时，sum 会自动重新计算。

计算属性的缓存机制

计算属性是基于它们的依赖进行缓存的。只有在它的相关依赖发生改变时才会重新求值。这意味着如果一个计算属性依赖的其他数据没有变化，那么多次访问该计算属性会直接返回缓存的结果，而不会再次执行计算函数。

例如，假设我们有一个计算属性 expensiveComputation，它执行一个复杂的计算：

<template>
  <div>
    <p>{{ expensiveComputation }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    expensiveComputation() {
      let result = 0;
      for (let i = 0; i < 1000000; i++) {
        result += i;
      }
      return result + this.count;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

在这个例子中，expensiveComputation 依赖于 count。当我们第一次访问 expensiveComputation 时，会执行复杂的计算。但是，只要 count 不发生变化，再次访问 expensiveComputation 时，会直接返回缓存的结果，而不会再次执行循环计算。

计算属性的 setter 方法

默认情况下，计算属性只有 getter 方法，但我们也可以为计算属性定义 setter 方法。当我们给计算属性赋值时，setter 方法会被调用。

例如，我们可以创建一个计算属性 fullName，并为其定义 setter 方法：

<template>
  <div>
    <p>First Name: <input v-model="firstName"></p>
    <p>Last Name: <input v-model="lastName"></p>
    <p>Full Name: <input v-model="fullName"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      set(newValue) {
        const parts = newValue.split(' ');
        this.firstName = parts[0];
        this.lastName = parts.length > 1 ? parts[1] : '';
      }
    }
  }
};
</script>

在这个例子中，当我们修改 fullName 的值时，setter 方法会被调用，它会将输入的值拆分成 firstName 和 lastName。

Vue 侦听器

Vue 的侦听器允许我们响应数据的变化，当被侦听的数据发生变化时，会执行相应的回调函数。

基本语法

侦听器在 Vue 实例的 watch 选项中定义。以下是一个简单的示例：

<template>
  <div>
    <p>输入一个数字: <input v-model="number"></p>
    <p>数字的平方: {{ squared }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0,
      squared: 0
    };
  },
  watch: {
    number(newValue, oldValue) {
      this.squared = newValue * newValue;
    }
  }
};
</script>

在上述代码中，我们定义了一个数据 number，并通过 watch 选项侦听 number 的变化。当 number 发生变化时，回调函数会被执行，更新 squared 的值。

深度侦听

对于对象类型的数据，默认情况下，Vue 只会侦听对象的引用变化。如果我们想侦听对象内部属性的变化，可以使用深度侦听。

例如，假设我们有一个对象 user：

<template>
  <div>
    <p>First Name: <input v-model="user.firstName"></p>
    <p>Last Name: <input v-model="user.lastName"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        firstName: '',
        lastName: ''
      }
    };
  },
  watch: {
    user: {
      handler(newValue, oldValue) {
        console.log('User data changed:', newValue, oldValue);
      },
      deep: true
    }
  }
};
</script>

在这个例子中，通过设置 deep: true，即使 user 对象内部的 firstName 或 lastName 发生变化，handler 函数也会被调用。

立即执行

默认情况下，侦听器在数据变化后才会执行回调函数。如果我们希望在组件创建时立即执行一次回调函数，可以使用 immediate 选项。

例如：

<template>
  <div>
    <p>输入一个字符串: <input v-model="text"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    };
  },
  watch: {
    text: {
      handler(newValue, oldValue) {
        console.log('Text changed:', newValue, oldValue);
      },
      immediate: true
    }
  }
};
</script>

在这个例子中，组件创建时，text 的 handler 函数会立即执行一次，之后每次 text 变化时也会执行。

计算属性与侦听器的选择

在实际开发中，我们需要根据具体的需求来选择使用计算属性还是侦听器。

从功能角度选择

  • 计算属性：适用于根据现有数据进行简单的衍生计算，例如求和、拼接字符串等。计算属性的优势在于它的缓存机制，能够提高性能，特别是在依赖数据不经常变化但计算逻辑较复杂的情况下。例如，在一个电商应用中，计算商品总价，商品数量和单价变化相对不频繁，但每次都重新计算总价会消耗性能，此时使用计算属性就非常合适。
<template>
  <div>
    <p>商品单价: <input v-model="price"></p>
    <p>商品数量: <input v-model="quantity"></p>
    <p>商品总价: {{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 0,
      quantity: 0
    };
  },
  computed: {
    totalPrice() {
      return this.price * this.quantity;
    }
  }
};
</script>
  • 侦听器：更适合在数据变化时执行异步操作或复杂的业务逻辑，例如数据变化后发送 AJAX 请求、操作 DOM 等。当我们需要在数据变化时执行副作用操作时，侦听器是更好的选择。例如，在一个搜索框组件中，当用户输入内容时，我们需要根据输入内容发送 API 请求获取搜索结果，此时使用侦听器就比较合适。
<template>
  <div>
    <p>搜索关键词: <input v-model="searchQuery"></p>
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: []
    };
  },
  watch: {
    searchQuery(newValue) {
      if (newValue) {
        axios.get(`https://api.example.com/search?q=${newValue}`)
         .then(response => {
            this.searchResults = response.data;
          })
         .catch(error => {
            console.error('Search error:', error);
          });
      } else {
        this.searchResults = [];
      }
    }
  }
};
</script>

从性能角度选择

  • 计算属性：由于其缓存机制，当依赖数据变化不频繁时，计算属性的性能更好。例如，在一个展示用户信息的组件中，用户的姓名和年龄等基本信息可能很少变化，而根据姓名和年龄生成的用户简介可以使用计算属性，这样可以避免不必要的重复计算。
<template>
  <div>
    <p>姓名: <input v-model="name"></p>
    <p>年龄: <input v-model.number="age"></p>
    <p>用户简介: {{ userProfile }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: 0
    };
  },
  computed: {
    userProfile() {
      return `姓名是 ${this.name}，年龄是 ${this.age} 岁。`;
    }
  }
};
</script>
  • 侦听器：如果数据变化频繁且计算属性的依赖较多，使用计算属性可能会导致性能问题，因为每次依赖数据变化都可能触发计算属性的重新计算。此时，侦听器可以更精确地控制何时执行操作，避免不必要的计算。例如，在一个实时聊天应用中，聊天消息不断更新，使用侦听器来处理新消息的显示和相关逻辑，可以避免因使用计算属性带来的频繁重新计算。
<template>
  <div>
    <div v-for="message in chatMessages" :key="message.id">{{ message.text }}</div>
    <input v-model="newMessage" @keyup.enter="sendMessage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      chatMessages: [],
      newMessage: ''
    };
  },
  watch: {
    newMessage(newValue) {
      if (newValue && newValue.trim()) {
        this.chatMessages.push({ text: newValue });
        this.newMessage = '';
      }
    }
  },
  methods: {
    sendMessage() {
      if (this.newMessage && this.newMessage.trim()) {
        this.chatMessages.push({ text: this.newMessage });
        this.newMessage = '';
      }
    }
  }
};
</script>

从代码结构角度选择

  • 计算属性：使用计算属性可以使模板中的表达式更简洁，提高代码的可读性。例如，在模板中直接使用 {{ fullName }} 比使用复杂的字符串拼接表达式 {{ firstName + ' ' + lastName }} 更清晰。
<template>
  <div>
    <p>First Name: <input v-model="firstName"></p>
    <p>Last Name: <input v-model="lastName"></p>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>
  • 侦听器：当我们需要对数据变化做出一系列复杂的操作，且这些操作不适合放在计算属性中时，侦听器可以使代码结构更清晰。例如，在一个表单验证组件中，当用户输入数据时，我们不仅要验证数据的格式，还要根据验证结果显示不同的提示信息，并且可能需要禁用提交按钮等操作，使用侦听器可以将这些逻辑集中在一起处理。
<template>
  <div>
    <p>邮箱: <input v-model="email"></p>
    <p v-if="emailError" style="color: red">{{ emailError }}</p>
    <button :disabled="!isValidEmail">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      emailError: '',
      isValidEmail: false
    };
  },
  watch: {
    email(newValue) {
      const emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
      if (emailRegex.test(newValue)) {
        this.emailError = '';
        this.isValidEmail = true;
      } else {
        this.emailError = '请输入有效的邮箱地址';
        this.isValidEmail = false;
      }
    }
  }
};
</script>

复杂应用场景分析

结合使用计算属性和侦听器

在一些复杂的场景中，我们可能需要同时使用计算属性和侦听器。例如，在一个电商购物车应用中，我们需要计算购物车中商品的总价（适合用计算属性），同时当购物车中的商品数量发生变化时，我们需要更新本地存储中的购物车数据（适合用侦听器）。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in cartItems" :key="index">
        <p>{{ item.name }} - 单价: {{ item.price }} - 数量: <input v-model.number="item.quantity"></p>
      </li>
    </ul>
    <p>总价: {{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        { name: '商品1', price: 10, quantity: 1 },
        { name: '商品2', price: 20, quantity: 2 }
      ]
    };
  },
  computed: {
    totalPrice() {
      let total = 0;
      for (let item of this.cartItems) {
        total += item.price * item.quantity;
      }
      return total;
    }
  },
  watch: {
    cartItems: {
      deep: true,
      handler(newValue) {
        localStorage.setItem('cartItems', JSON.stringify(newValue));
      }
    }
  },
  mounted() {
    const storedCart = localStorage.getItem('cartItems');
    if (storedCart) {
      this.cartItems = JSON.parse(storedCart);
    }
  }
};
</script>

在这个例子中，计算属性 totalPrice 负责计算购物车的总价，而侦听器负责在 cartItems 发生变化时更新本地存储。

动态计算与侦听

有时候，我们可能需要根据运行时的条件动态地决定使用计算属性还是侦听器。例如，在一个多语言切换的应用中，当语言切换时，某些文本需要重新计算（可以用计算属性），而某些与语言相关的异步操作（如加载特定语言的资源文件）则需要使用侦听器。

<template>
  <div>
    <select v-model="language">
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      language: 'en',
      messages: {
        en: { greeting: 'Hello' },
        zh: { greeting: '你好' }
      }
    };
  },
  computed: {
    greeting() {
      return this.messages[this.language].greeting;
    }
  },
  watch: {
    language(newValue) {
      // 模拟异步加载特定语言的资源文件
      setTimeout(() => {
        console.log(`Loaded resources for ${newValue}`);
      }, 1000);
    }
  }
};
</script>

在这个例子中，计算属性 greeting 根据当前选择的语言返回相应的问候语，而侦听器则在语言切换时执行异步加载资源的操作。

与组件通信结合

计算属性和侦听器在组件通信中也有重要的应用。例如，在父子组件通信中，父组件可以通过计算属性将数据传递给子组件，子组件可以通过侦听器监听父组件传递的数据变化。

<!-- ParentComponent.vue -->
<template>
  <div>
    <input v-model="parentData">
    <ChildComponent :childData="parentData"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: ''
    };
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>接收到的父组件数据: {{ childData }}</p>
  </div>
</template>

<script>
export default {
  props: ['childData'],
  watch: {
    childData(newValue) {
      console.log('父组件数据变化:', newValue);
    }
  }
};
</script>

在这个例子中，父组件通过计算属性（这里简单地将 parentData 传递给子组件）将数据传递给子组件，子组件通过侦听器监听 childData 的变化。

总结计算属性与侦听器的特点及应用场景

计算属性适用于简单的衍生计算，具有缓存机制，能提高性能，使模板表达式更简洁；而侦听器适用于执行异步操作、复杂业务逻辑以及处理数据变化的副作用。在实际开发中，我们需要根据具体的需求、性能要求和代码结构来合理选择使用计算属性还是侦听器，有时还需要将它们结合使用，以实现高效、清晰的前端应用程序开发。通过深入理解它们的本质和应用场景，我们能够更好地利用 Vue 的特性，提升开发效率和应用程序的质量。无论是小型项目还是大型复杂的应用，正确运用计算属性和侦听器都能为我们带来很大的便利。在不断的实践中，我们会更加熟练地根据不同的场景做出最合适的选择，从而打造出更加优秀的 Vue 应用。