computed和watch的区别

一、computed（计算属性）

1. 定义

计算属性是基于 Vue 实例的响应式数据进行计算的属性。它们的值会根据依赖的数据变化而自动更新，并且会被缓存，只有当其依赖的数据发生变化时才会重新计算。

2. 使用场景

• 衍生状态：当你需要从现有的数据中派生出新的数据时，使用计算属性非常方便。
• 性能优化：由于计算属性会缓存结果，适合在多个地方使用同一计算结果时，避免重复计算。

new Vue({
  el: '#app',
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
    reversedFullName() {
      return this.fullName.split('').reverse().join('');
    }
  }
});

在这个示例中：

fullName 是一个计算属性，它将 firstName 和 lastName 合并为一个完整的名字。
reversedFullName 依赖于 fullName，它返回反转的完整名字。

4. 优缺点

优点：

• 自动缓存：仅在依赖项变化时重新计算，提高性能。
• 语法简洁明了，易于理解。

缺点：

• 主要用于计算，不适合执行副作用（如 API 调用）。

二、watch（侦听器）

1. 定义

watch 是一种监视 Vue 实例上的数据变化的机制。当被监视的数据变化时，对应的回调函数会被触发。

2. 使用场景

• 异步操作：当你需要在数据变化时执行异步操作（如 API 请求），使用 watch 可以很方便。
• 复杂逻辑处理：当需要在数据变化时执行复杂的逻辑，而不仅仅是计算一个新值。

new Vue({
  el: '#app',
  data() {
    return {
      question: '',
      answer: 'I cannot give you an answer until you ask a question!'
    };
  },
  watch: {
    question(newQuestion) {
      this.answer = 'Waiting for you to stop typing...';
      this.getAnswer(newQuestion);
    }
  },
  methods: {
    getAnswer(question) {
      // 模拟 API 请求
      setTimeout(() => {
        this.answer = 'This is the answer to your question!';
      }, 1000);
    }
  }
});

在这个示例中：

当 question 发生变化时，会先显示 “Waiting for you to stop typing…” 的提示，然后调用 getAnswer 方法进行模拟的 API 请求。

4. 优缺点

优点：

• 灵活性高，可以执行任何逻辑，包括异步操作。
• 可以监视多个数据源，处理复杂情况。

缺点：

• 不会缓存每次都执行，可能对性能造成影响。
• 代码可读性可能较差，尤其是在多个 watch 的情况下。

三、总结和选择

使用 computed：

当你需要基于已有数据计算出一个新值，并希望在多个地方使用这个值时，使用 computed 是最佳选择。
使用 watch：

当你需要在数据变化时执行特定的逻辑或异步请求，使用 watch 更加合适。

四、结合使用

在实际开发中，computed 和 watch 可以结合使用。例如，你可以使用计算属性来处理数据的展示逻辑，同时使用 watch 来处理数据变化后的副作用。

new Vue({
  el: '#app',
  data() {
    return {
      searchQuery: '',
      results: []
    };
  },
  computed: {
    filteredResults() {
      return this.results.filter(result => result.includes(this.searchQuery));
    }
  },
  watch: {
    searchQuery(newQuery) {
      this.fetchResults(newQuery);
    }
  },
  methods: {
    fetchResults(query) {
      // 这里可以放入 API 调用等逻辑来获取新结果
      // 假设我们只更新 results 数据
      this.results = ['apple', 'banana', 'cherry'].filter(item => item.includes(query));
    }
  }
});

在这个例子中：

使用 filteredResults 计算属性根据 searchQuery 过滤 results。
使用 watch 在 searchQuery 变化时调用 fetchResults 更新 results。
通过合理使用 computed 和 watch，可以使 Vue 应用更加高效和响应式。

五 总结

computed：

• 计算属性，主要用于基于其他数据进行计算并返回值。
• 适用于那些需要依赖于其他状态（数据）并在这些状态变化时自动更新的情况。
• 计算属性会被缓存，只有在其依赖的数据发生变化时，才会重新计算。

watch：

• 观察者，用于监视 Vue 实例上的数据变更。
• 适用于需要在数据变化时执行异步操作或开销较大的操作，比如 API 请求或手动操作 DOM 的场景。
• watch 不会缓存结果，每次监视的数据变化时都会执行回调函数。

原文地址：https://blog.csdn.net/qq_48763502/article/details/142849641

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！