前端常见面试题（1）——watch

watch

watch和computed的区别

        watch和computed在Vue中是两个不同的属性，用于监听数据的变化并执行相应的操作。

        watch 监听数据发生变化，而computed是计算属性，在页面中用computed计算很多数据的变化，当页面中的数据发生变化的时候就会触发computed

二者区别如下：

1. 功能不同：

        watch是一对多的关系，即一个数据变化可以影响多个数据；而computed是多对一的关系，即多个数据影响一个数据。
2. 使用方式不同：

        watch需要通过配置选项来设置要监听的数据以及对应的回调函数，用于处理数据变化时的操作；而computed需要通过定义计算属性来实现，将计算逻辑封装在函数中，并返回计算结果。
3. 异步支持：

        当需要在数据变化时执行异步或开销较大的操作时，应该使用watch，因为它可以执行异步操作并设置中间状态。而computed只能执行同步操作，无法处理异步逻辑。
4. 缓存特性：

        computed具有缓存特性，只有相关的响应式数据发生改变时，才会重新计算，否则会直接返回之前的缓存结果。而watch每次数据变化都会触发回调函数的执行。

        总结来说，watch适用于监听数据变化并执行异步或开销较大的操作，而computed适用于进行数值计算且依赖于其他数据，利用其缓存特性来提高性能。

---

watch和watchEffect的区别

        watch和watchEffect都是监听器，但在写法和用法上有一定的区别。

区别如下：

        1.首先，watch函数需要显式指定依赖数据，只有当依赖数据更新时才会执行回调函数。watch函数具有一定的惰性，即在页面首次展示时不会执行回调函数，只有在数据变化时才会执行（除非设置了immediate: true参数，这样可以将其变为非惰性，在页面首次加载时就执行）。

        2.另外，watch函数可以监视ref定义的响应式数据，并可以获取到原始值。在使用watch函数时，需要同时指明要监视的属性和要执行的回调函数。而watchEffect函数则更加简洁，它不需要显式指定依赖数据。它会立即执行一次回调函数，并且在依赖数据变化时自动重新执行回调函数。watchEffect函数不需要指定监视的属性，只需要定义回调函数即可。

        3.此外，watchEffect函数还可以通过调用stop方法来取消监听，而watch函数则没有此功能。

        综上所述，watch和watchEffect的主要区别在于写法和用法上。watch函数需要显式指定依赖数据，而watchEffect函数不需要。另外，watch函数具有惰性，而watchEffect函数会立即执行一次回调函数。还有，watchEffect函数可以通过stop方法取消监听。

---

关于watch的面试题

关于watch的面试题主要涉及watch和computed的区别以及使用场景。在Vue中，watch是一个观察者，用于监听数据的变化并执行相应的操作，而computed是一个计算属性，用于根据已有的数据计算出一个新的值。它们的区别如下：

        1. 数据源：watch可以监听任意数据的变化，可以是单个数据、对象或数组的变化，而computed只能依赖于已有的数据进行计算。

        2. 执行时机：watch是在被监听的数据发生变化后立即执行回调函数，可以执行异步操作，而computed是在计算属性所依赖的数据发生变化时才会重新计算，并且会进行缓存，只有当依赖的数据变化时才会重新计算。

        3. 使用场景：当需要监听数据的变化，并且需要进行一些异步操作，或者需要监听多个数据的变化时，可以使用watch。而当需要根据已有的数据计算出一个新的值，并且这个值是根据其他数据的变化而变化时，可以使用computed。

        举个例子来说明，比如有一个需求是当用户输入一个数值时，计算出这个数值的平方并显示出来。这时可以使用watch来监听输入框的变化，然后在回调函数中进行计算；另一种方式是使用computed，在计算属性中定义一个方法，将输入框的值作为依赖，然后通过计算属性获取平方值并显示出来。

        总结起来，watch适用于监听数据的变化并需要执行一些操作的场景，而computed适用于根据已有数据计算出一个新的值的场景。