Vue精华解析：Computed和Watch的妙用及微妙差异

引言

在Vue.js开发中，合理运用Computed和Watch能极大提升应用性能和代码可维护性。但他们应用的场景和差异常常令开发者犹豫。本文将一探究竟，让你在Vue.js项目中更从容地作出选择。

计算属性 Computed

Computed 基本概念与示例

Vue.js中的Computed属性是用于处理依赖于组件状态而需要计算得出的数据。使用Computed可以令我们的模板保持简洁和高效：

data () {
  return {
    users: [
      { name: "Jack", age: 30 },
      { name: "Tom", age: 35 },
      { name: "Lucy", age: 32 }
    ]
  };
},
computed: {
  sortedUsers: function () {
    return this.users.sort((a, b) => a.age - b.age);
  }
}

在这个示例中，sortedUsers是一个计算属性，它会根据users数组返回一个按年龄排序的列表。在下面内容中，让我们通过学习 Computed 的使用配置，来理解这个强大的功能。

getter和setter

Computed 属性基于 getter 和 setter 方法进行工作，这两个方法分别用于获取和设置数据。

computed: {
  fullName: {
    // Getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // Setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

计算属性缓存vs方法

计算属性的一大优点是它赋予应用了智能缓存的能力。只有当依赖的属性发生变化时，计算属性才进行重新计算。如果属性没有发生变化，它会直接返回之前的计算结果，大大提高了性能。

computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

使用场景

• 当模板中需要复杂逻辑计算时。
• 对传入的props进行处理并返回新数据时。
• 在组件状态改变时触发事件（如$emit）时。

侦听器 Watch

Watch 基本概念与示例

Watch对属性的变化保持观察，并在变化时执行相应的动作。它的应用场景与Computed有所不同，主要用于数据变动时的异步操作或较大开销的处理。

data () {
  return {
    searchTerm: '',
    searchResults: []
  };
},
watch: {
  searchTerm: {
    immediate: true,
    handler(newVal) {
      // 使用异步函数来执行复杂操作，如 API 查询
      this.fetchSearchResults(newVal).then(results => this.searchResults = results);
    }
  }
},
methods: {
  // 假设的 API 请求函数
  fetchSearchResults(searchTerm) {
    return fetch(`/api/search?query=${searchTerm}`).then(response => response.json());
  }
}

这个示例中，我们使用 Watch 来监视searchTerm的变化，一旦输入的搜索词发生变化，就会立即调用API来获取新的搜索结果。在下面的内容中，让我们通过学习
Watch的使用配置，来理解这个强大的功能。

Watch的高级配置：deep, immediate, once

deep 深度侦听

当需要侦测对象内部属性的变化时，可以在选项参数中设置deep为true。注意监听数组的变更不需要这么做。

watch(source, (newValue, oldValue) => { 
        /* 深度监听一个对象内部变化 */
    }, 
    { deep: true }
)

immediate 立即反馈

设置immediate为true，可以在组件加载时立即触发watch的回调函数。

watch(source, (newValue, oldValue) => { 
        /* 声明时立即触发回调 */
    }, 
    { immediate: true }
)

once 一次性侦听

设置once为true，当 source 变化时，仅触发一次 。

watch(source, (newValue, oldValue) => { 
        /* 当 `source` 变化时，仅触发一次 */
    }, 
    { once: true }
)

unwatch 停止侦听器

在组件卸载时，Vue通常会自动停用侦听器。但如果需要手动停用：

const unwatch = watchEffect(() => {})
// ...当该侦听器不再需要时
unwatch()

使用场景

• 在数据变化需要执行异步操作时。
• 进行复杂运算或开销较大的任务时。

Computed和Watch的核心区别

• 异步处理：Watch可以处理异步操作，而Computed不支持。
• 性能优化：Computed通过缓存减少不必要的计算，而Watch对每次变动都会执行。
• 数据依赖：Computed依赖数据变化，Watch可以观测任何响应式数据。

总结

总的来说，合理利用Computed和Watch可以使你的Vue.js应用运行得更加流畅。在处理频繁更新的派生状态时，Computed属性的缓存机制为你节省了不必要的性能开销。而当涉及到响应数据变化进行异步操作或开销较大的任务时，Watch则提供了必要的灵活性。精通这两个功能，你将能够写出既高效又易维护的代码，为用户带来更好的体验。

才疏学浅，如有讲述不清之处，还请指正，共同进步。