专业网站建设公司

一、从定义上理解methods和computed的核心区别

1. 依赖

methods：不需要依赖。

computed：需要依赖。依赖数据变化时，才重新计算。

2. 调用方式

methods：需要加括号。methodName()

computed：不需要加括号。{{ computedName }}

3. 缓存机制

methods：无缓存。

computed：有缓存。依赖不变时，返回缓存结果。

4. 触发时机

methods：每次调用都执行。

computed：不是每次调用都执行。依赖数据变化时才执行，重新计算和缓存。

5. 典型使用场景

methods：主动触发的操作。如点击事件、提交表单、调用API、需要传参的计算等。

computed：自动计算的派生数据。如动态拼接字段、过滤/排序列表、求和求积运算等。

二、 简单大白话理解

methods：调用时，需要带参数的函数，放这里。

computed：调用时，不需要参数的函数，且依赖自己意外的数据变化的，放这里。

三、 实战案例理解

1. 如图所示，这是一个库存管理系统，现在我们要点击“删除”按钮，将商品删除。

2. 写了一个remove方法，很明显该函数带参数，且不依赖自身意外的数据，应该放在methods里。但是，我们尝试把它放到computed里，看会发生什么。

3. 直接报错“remove is not a function”，函数不存在。删除第一项以后，就无法实现删除功能了。