Vue.js计算属性与数据副本的性能差异及重计算疑问

Hey there, let's break down what's going on with your Vue.js setup and clear up those performance confusion points!

1. Why Your Computed Property Re-Runs on starti/endi Changes #

First off, let's clarify how Vue's computed property dependency tracking works: Vue automatically tracks every reactive property you access inside the computed function as a dependency.

If your points computed property is doing something like slicing the items array using starti and endi (e.g., return this.items.slice(this.starti, this.endi)), then those two values are dependencies of the computed property. That means when you update starti or endi, Vue correctly triggers a re-calculation because the computed value would logically change.

If you thought points only depends on items, double-check your computed function code—Vue DevTools is a great tool here: you can inspect the computed property and see its listed dependencies to confirm exactly what's triggering re-runs.

2. Computed Properties vs. Data Copies: Performance Differences #

You mentioned that repeated calls to points() are fast (which makes sense, thanks to Vue's computed cache), but noticed differences when modifying values. Let's break this down:

• Computed Properties: Cached based on their dependencies. They only re-run when a dependency changes, and repeated accesses use the cached value. This is efficient for values that derive from reactive data and don't need to be modified independently.
• Data Copies: These are reactive properties you manually update. If you're re-generating the copy every time a related value changes, you might be doing unnecessary work that Vue's computed cache would avoid. However, if you need to modify the copy independently of the original data, a data property makes sense.

3. Non-Linear Performance When Updating total #

When you adjust total, you're likely re-generating the entire items array with a new number of data points. The non-linear time difference you're seeing could come from a few places:

• Reactive Array Overhead: Vue adds reactivity listeners to array elements and methods. For very large arrays (like 5000+ items), this overhead adds up. If items doesn't need to be reactive (e.g., it's a static dataset after initial load), try using Object.freeze(this.items) when generating it—this disables Vue's reactivity tracking for the array, cutting down on overhead significantly.
• Array Generation Cost: Creating larger arrays takes more time, but memory allocation and initialization costs aren't always linear. This is a JavaScript behavior, not specific to Vue.

Recommendations for Your Projects #

If you've been using data copies for performance, here's how to make sure you're using Vue optimally:

• Validate Dependencies: Use Vue DevTools to confirm which properties your computed properties depend on. This will eliminate confusion about when re-runs should happen.
• Freeze Large Static Datasets: If your items array doesn't change after initial generation (only gets sliced/filtered), freeze it to reduce reactivity overhead.
• Choose the Right Tool for the Job:
  • Use computed properties when you need a derived value that's always in sync with its dependencies, and you don't need to modify the derived value directly.
  • Use data copies when you need to manipulate the derived value independently of the original data, or when you need fine-grained control over when the value updates.

内容的提问来源于stack exchange，提问作者mr_trouble