Vue.js 中计算属性和监听器的区别与应用

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

watch: {
  firstName(newValue, oldValue) {
    console.log('First name changed from', oldValue, 'to', newValue);
  }
}

computed: {
  totalPrice() {
    return this.price * this.quantity;
  }
}

watch: {
  searchQuery(newValue) {
    this.fetchResults(newValue);
  }
}

computed: {
  filteredList() {
    return this.items.filter(item => item.name.includes(this.searchQuery));
  }
}

watch: {
  'user.profile': {
    handler(newValue, oldValue) {
      this.updateUserProfile(newValue);
    },
    deep: true
  }
}

computed: {
  // 错误示例
  fullName() {
    this.firstName + ' ' + this.lastName; // 没有返回值
  },
  // 正确示例
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

watch: {
  // 错误示例
  user(newValue, oldValue) {
    // 无法监视到 user.profile 的变化
  },
  // 正确示例
  user: {
    handler(newValue, oldValue) {
      // 可以监视到 user.profile 的变化
    },
    deep: true
  }
}

// 更高效的计算属性
computed: {
  totalPrice() {
    return this.price * this.quantity;
  }
}

// 更低效的监听器
watch: {
  price(newValue) {
    this.totalPrice = newValue * this.quantity;
  },
  quantity(newValue) {
    this.totalPrice = this.price * newValue;
  }
}

computed: {
  // 清晰的命名和注释
  totalPrice() {
    // 计算总价
    return this.price * this.quantity;
  }
}

watch: {
  // 清晰的命名和注释
  searchQuery(newValue) {
    // 当搜索查询变化时，获取新的搜索结果
    this.fetchResults(newValue);
  }
}