There are three main ways to store variables and/or react to variable changes in Vue components.
- Watch for changes in
So, how to decide when to use what? (that is 3-in-1 question, I outwit myself)
Although these sections look similar, they serve different functions. Evaluate the variables against the following considerations when you are in doubt.
|Store variables||Store local variables||Computed variables. Can be static, derived from other variables, or can be static functions||Does not store variables - only watches them.|
|React to variable value changes||Y||Y||Y|
|Scope||Local to component||Local to component, but can derive/make calculations with variables from props, store, etc.||Can watch local or store variables and react to changes|
|Can be referred by
|Can be referred by
|Perform action when value changes||N||N||Y|
|Consequence of a value change||Change UI to react to change||Change UI||Perform action - local/vuex|
|Can change other variable values||N||Y||Y|
See examples below.
Data is a function in the component and can have one or more variables. Scope of these variables is limited to the component. Variables can be initialized to a value, or just assigned a type.
Computed is an object within a component, and can have simple variables, or functions.
You can see that a
method can also calculate values similar to
computed and those calculated values can then be stored in
computed has two big advantages -
- Values are cached. You don’t need to do anything other than store values as computed. Computed values are picked up from cache when there is re-render. Methods, on the other hand, are always run whenever re-render happens - thereby causing computations to occur even when the source has not changed
- React to changes. When source is changed, the computed values automatically change - there is no need for a separate
Go to the excellent Vue documentation on
computed properties vs.