Vue中methods,watch与computed之间的差异

Vue中methods,watch与computed之间的差异_第1张图片

Methods 

        methods 选项定义了组件中可以调用的方法。这些方法可以在模板中通过事件绑定或者在其他方法中调用。methods 中的函数可以接受参数,并且可以执行任意的 JavaScript 代码。因此,methods 主要用于处理组件中的用户交互、事件响应和自定义的操作。

Watch 

        watch 选项用于监听一个或多个特定的数据变化,并在数据发生变化时执行相应的操作。当被监听的数据发生改变时,watch 中定义的函数会被调用。watch 可以执行异步操作、复杂的数据处理或触发其他方法,用于响应数据的变化并进行相应的处理。

Computed

        computed 选项用于计算派生的数据属性,这些属性根据其他已有的响应式数据属性进行计算,返回一个新的值。computed 的值会被缓存,只有在依赖的响应式数据发生变化时才会重新计算。因此,computed 主要用于对现有数据进行计算、转换和过滤,以及生成响应式的派生数据。

主被动调用 

        (1)methods是一种主动调用的方式,它定义了一组方法,在组件中通过方法名来调用。当组件状态改变时,methods 中的方法并不会自动更新,需要通过主动调用来触发更新。

        (2)watch 是一种被动调用的方式,它用于监听特定的数据变化,当监听的数据发生改变时,执行相应的回调函数

        (3)computed是一种被动调用的方式,它定义了一组计算属性,当关联的依赖数据发生改变时,计算属性会自动重新计算并返回结果。computed 会缓存计算结果,只有在依赖数据发生改变时才会重新计算,以提高性能。

触发次数

        因为 methods 和 watch 是基于事件的,它们的触发需要手动调用或者响应数据变化,可以被多次触发。而 computed 的值是基于其依赖的响应式数据计算得出的,当依赖的数据发生变化时,computed 才会重新计算,并返回新的值。由于 computed 的值会被缓存,只有在依赖的响应式数据发生变化时才会重新计算,所以 computed 在同一依赖的数据没有变化的情况下只会触发一次。所以methods和watch是没有缓存的,而computed拥有缓存

支持异步

        computed 的特点是它的值是基于其依赖的响应式数据计算而来的,并且具有缓存机制。这意味着当依赖的数据没有发生变化时,computed 的值会直接从缓存中获取,而不会重新计算。如果 computed 支持异步操作,那么每次计算时都需要等待异步操作完成才能返回值,这会破坏计算属性的简洁性和可预测性。methods 和 watch 不具备缓存机制,它们更加灵活,可以执行任意的 JavaScript 代码,包括异步操作。methods 中的方法可以直接调用异步函数,而 watch 的处理函数也可以是异步的,可以执行一些异步操作来响应特定数据的变化。\

使用场景

使用 methods:处理表单提交、按钮点击、列表操作等需要执行复杂逻辑或异步操作的场景。

使用 computed:计算列表长度、筛选数据、格式化日期、拼接字符串等需要基于已有数据进行计算的场景。

使用 watch:监听表单输入、监听路由变化、监听状态变化等需要监听特定数据变化并执行相应操作的场景。

你可能感兴趣的:(vue.js,前端,javascript)