企业官网建设流程全解析

浙江省城乡住房建设厅网站,请问番禺哪里有做网站的,郑州市建设工程造价信息网,深圳网站制作公司深圳网站制作公司在 Vue 开发中#xff0c;我们经常需要根据已有数据处理并返回新的结果#xff0c;比如对列表进行过滤、拼接字符串、计算数值总和等。此时#xff0c;computed计算属性和methods方法都能实现这个需求#xff0c;但很多初学者会疑惑#xff1a;两者到底有什么区别#xf…在 Vue 开发中我们经常需要根据已有数据处理并返回新的结果比如对列表进行过滤、拼接字符串、计算数值总和等。此时computed计算属性和methods方法都能实现这个需求但很多初学者会疑惑两者到底有什么区别什么时候该用 computed什么时候该用 methods这篇文章将从computed的缓存机制入手深入剖析它与methods的核心差异帮你彻底搞懂二者的使用场景。一、先看一个简单的例子我们先通过一个基础案例直观感受下computed和methods的表现差异。假设我们有一个 Vue 实例里面有firstName和lastName两个数据需要拼接成完整的姓名1. 使用 methods 实现template div p姓名{{ getFullName() }}/p p姓名{{ getFullName() }}/p p姓名{{ getFullName() }}/p /div /template script export default { data() { return { firstName: 张, lastName: 三 } }, methods: { getFullName() { console.log(methods执行了); return this.firstName this.lastName; } } } /script此时打开控制台会发现methods执行了被打印了三次—— 因为模板中每次调用getFullName()方法都会重新执行一次。2. 使用 computed 计算属性实现template div p姓名{{ fullName }}/p p姓名{{ fullName }}/p p姓名{{ fullName }}/p /div /template script export default { data() { return { firstName: 张, lastName: 三 } }, computed: { fullName() { console.log(computed执行了); return this.firstName this.lastName; } } } /script这时候控制台只打印了一次computed执行了—— 即使模板中多次引用fullName计算属性也只执行了一次。这个差异的根源就是computed的缓存机制。二、computed 的缓存机制到底是什么Vue 的计算属性基于其依赖的响应式数据进行缓存。简单来说计算属性会记住它的依赖比如上面例子中的firstName和lastName只有当依赖的响应式数据发生变化时计算属性才会重新计算并更新结果如果依赖没有变化每次访问计算属性都会直接返回缓存的结果不会重新执行函数。缓存机制的底层逻辑简易版当 Vue 实例初始化时会解析计算属性的函数收集其中依赖的响应式数据如firstName、lastName。第一次访问计算属性时执行函数并将结果缓存起来。当依赖的响应式数据发生变化时Vue 会触发依赖更新清空计算属性的缓存下次访问时重新计算并缓存新结果。如果依赖没有变化直接返回缓存的结果。举个例子依赖变化时的缓存更新我们给上面的例子加一个按钮修改firstNametemplate div p姓名{{ fullName }}/p p姓名{{ fullName }}/p button clickchangeFirstName修改姓/button /div /template script export default { data() { return { firstName: 张, lastName: 三 } }, computed: { fullName() { console.log(computed执行了); return this.firstName this.lastName; } }, methods: { changeFirstName() { this.firstName 李; } } } /script此时页面初始化打印 1 次computed执行了缓存结果张三。点击按钮修改firstName为 “李”依赖变化打印 1 次computed执行了重新计算并缓存李四。再次访问fullName直接返回缓存的 “李四”不再执行函数。三、computed vs methods核心区别通过上面的例子我们可以总结出二者的核心差异特性computed 计算属性methods 方法缓存机制基于依赖的响应式数据缓存结果无缓存每次调用都会重新执行函数调用方式模板中直接引用如{{ fullName }}无需加括号模板中需要加括号调用如{{ getFullName() }}返回值要求必须有返回值因为要缓存结果可以有返回值也可以无返回值如处理事件响应式依赖自动追踪依赖的响应式数据不会自动追踪仅在调用时执行适用场景数据处理、数据派生依赖固定数据事件处理、一次性操作、复杂逻辑无需缓存补充computed 的 setter 和 getter计算属性默认只有 getter取值函数但也可以设置 setter赋值函数实现 “可写的计算属性”computed: { fullName: { // getter取值时执行 get() { return this.firstName this.lastName; }, // setter赋值时执行 set(newValue) { const [first, last] newValue.split( ); this.firstName first; this.lastName last; } } }此时我们可以直接给fullName赋值this.fullName 王 五setter 会被触发自动更新firstName和lastName。而 methods 无法实现这种 “赋值联动” 的效果。四、什么时候用 computed什么时候用 methods结合缓存机制和使用场景我们可以给出明确的选择原则优先用 computed 的场景需要根据已有响应式数据派生新数据比如拼接字符串、过滤列表filteredList、计算数值totalPrice等。数据会被多次访问比如模板中多次引用、多个地方使用同一个派生数据缓存能减少重复计算提升性能。依赖的数据源是固定的响应式数据计算属性的缓存只有在依赖变化时才会更新适合这种场景。优先用 methods 的场景处理事件逻辑比如按钮点击、表单提交等这是 methods 最常见的用途。执行一次性操作比如请求接口、操作 DOM、随机数生成因为随机数不是响应式依赖computed 无法缓存。复杂逻辑且无需缓存比如需要传递参数的函数computed 无法直接接收参数虽然可以通过闭包实现但不如 methods 直观。不依赖响应式数据的操作比如纯逻辑计算没有依赖的响应式数据computed 的缓存机制就失去了意义。注意computed 不能直接接收参数有同学会问computed 能不能像 methods 一样接收参数答案是默认不能但可以通过返回函数的方式间接实现比如computed: { getFullName() { // 返回一个函数接收参数 return (middleName) { return this.firstName middleName this.lastName; } } }模板中调用{{ getFullName(小) }}。但这种方式会失去缓存机制—— 因为每次调用都会返回一个新的函数相当于每次执行都是新的计算此时 computed 的缓存优势就没了。所以如果需要传递参数优先用 methods。五、性能影响缓存的重要性在简单场景下computed 和 methods 的性能差异并不明显但在复杂计算或大量数据处理的场景下缓存机制的影响会被放大。比如我们有一个包含 1000 条数据的列表需要过滤出符合条件的项// 用computed只在列表或过滤条件变化时重新计算 computed: { filteredList() { return this.list.filter(item item.age 18); } } // 用methods每次调用都要遍历1000条数据 methods: { getFilteredList() { return this.list.filter(item item.age 18); } }如果模板中多次引用这个过滤后的列表computed 只需要执行一次过滤而 methods 需要执行多次性能差异会非常明显。六、总结缓存是 computed 和 methods 的核心区别computed 基于响应式依赖缓存结果methods 无缓存。调用方式不同computed 在模板中直接引用methods 需要加括号调用。使用场景不同computed适合数据派生、多次访问的场景利用缓存提升性能。methods适合事件处理、一次性操作、需要传参的场景。不要为了用 computed 而用 computed如果不需要缓存methods 反而更简单。理解了 computed 的缓存机制和二者的区别你就能在 Vue 开发中做出更合理的选择写出性能更优、更易维护的代码。