区分Vue文档中watch函数和computed函数

Vue.js 中的 watch 函数和 computed 函数均可监听数据变化，但实现方式和效果不同。watch 函数监听指定数据的变化并执行回调函数，适用于异步或复杂操作。computed 函数计算监测属性值，在依赖属性值改变时重新计算并返回计算属性，适用于动态计算和 DOM 操作等依赖关系。

Vue.js是一种流行的JavaScript框架，它提供了一种简单但强大的方法来构建Web应用程序。在Vue.js中，有两个常用的钩子函数：watch函数和computed函数。这两个函数虽然都可以监听数据的变化，但是它们在实现方式和效果上有很多不同之处。本文将介绍watch函数和computed函数的异同点。

一、watch函数

watch函数是Vue.js中的监听者函数。它的主要作用是监听指定的数据变化，一旦这些数据发生变化，watch函数就会执行相应的回调函数。你可以使用watch函数来执行异步或复杂的操作，例如向服务器发送请求、处理数据、启动动画等等。下面是一个watch函数的基本用法：

watch: {
  key1(newValue, oldValue) {
    // do something when key1 changes
  },
  key2(newValue, oldValue) {
    // do something when key2 changes
  },
  // ...
}

注：key1和key2代表的是Vue实例中的数据属性，newValue和oldValue分别是变化后和变化前的值。

当我们在组件中使用watch函数时，可以为一个或多个数据属性设置监听器。

二、computed函数

computed函数也可以监听Vue实例中的数据变化，但与watch函数不同的是，computed函数的作用是计算监测的属性值，并且只要依赖的数据属性值改变，这个计算属性就会重新计算。computed函数的用法如下：

computed: {
  sum() {
    return this.num1 + this.num2
  },
  fullName() {
    return this.firstName + ' ' + this.lastName
  },
  // ...
}

注：sum和fullName都是计算属性，它们都依赖于Vue实例中的数据属性。

computed函数返回一个计算属性，这个属性的值会自动更新，而不需要手动更新。如果Vue实例中的任何一个依赖数据属性改变，那么这个计算属性就会重新计算并更新。因此，如果你需要对一些数据进行复杂的计算或元素的动态样式等方面的依赖关系，你应该使用computed函数而不是watch函数。

三、watch函数与computed函数的异同

1. 实现方式

watch函数和computed函数的实现方式不同。computed函数本质上是一个函数，它返回一个值并依赖于所在Vue实例中的数据属性；而watch函数是一个对象，其中每个属性都是一个回调函数，每个回调函数都会监听一个或多个数据属性的变化，当这些数据属性发生变化时，回调函数会被执行。

2. 效果

computed函数会自动缓存计算结果，只有当计算所依赖的数据属性发生变化时，computed函数才会重新计算值。如果计算过程较为复杂，使用computed函数可以减少不必要的计算，提高程序的性能。而watch函数则是在所监听的数据属性发生任何变化时都会执行回调函数，这样可能会使程序运行缓慢。因此，如果你只需要简单地监听一些数据的变化，那么使用watch函数是较为合适的。

3. 用途

computed函数适用于那些依赖于Vue实例中的数据属性进行动态计算和DOM操作的情况。而watch函数则更适合于处理一些异步或复杂的操作，例如访问API、处理数据、启动动画等等。

4. 硬件开销

computed函数通常比watch函数更具有性能优势，而watch函数可能会在程序中产生额外的硬件开销，例如内存占用、计算时间等等。

在实际使用中，我们要根据具体的情况选择使用computed函数还是watch函数。如果我们需要对Vue实例中的数据进行动态计算，我们应该使用computed函数。如果我们需要处理一些异步或复杂的操作，我们应该使用watch函数。通过合理地使用watch函数和computed函数，我们可以使程序更加高效和可维护。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~