Vue 响应式核心：计算属性(computed)与侦听器(watch)详解

最新推荐文章于 2025-09-06 08:24:39 发布

原创

最新推荐文章于 2025-09-06 08:24:39 发布 · 747 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在 Vue.js 开发中，computed计算属性和watch侦听器是处理响应式数据的两个核心工具。它们虽然都能响应数据变化，但设计目的和使用场景却大不相同。本文将深入探讨两者的区别、使用方法和最佳实践。

计算属性(computed)：高效的数据派生

计算属性用于声明式地派生数据，基于响应式依赖进行高效计算。

核心特性

自动依赖追踪 - 自动追踪模板中使用的响应式依赖
计算结果缓存 - 依赖未变化时直接返回缓存结果
声明式编程 - 保持模板简洁，逻辑与视图分离

基本用法

new Vue({
   
   
  data() {
   
   
    return {
   
   
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
   
   
    // 计算属性示例
    fullName() {
   
   
      return this.firstName + ' ' + this.lastName; 
    }
  }
})

<!-- 模板中使用 -->
<p>全名：{
  
  { fullName }}</p>

高级用法：Setter

computed: {
   
   
  fullName: {
   
   
    get() {
   
   
      return this.firstName + ' ' + this.lastName;
    },
    set(newValue) {
   
   
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1] || '';
    }
  }
}