Vue.js provides us with methods, observers and calculated properties. When to use one versus the other?
When to use the method
- React to certain events in the DOM
- Call a function when something happens in the component. You can call methods from calculated properties or watch programs.
When to use calculated properties
- You need to combine new data from existing data sources
- You have a variable used in a template, which is constructed based on one or more data attributes
- You want to simplify complex nested attribute names into more readable and easy-to-use names, but update them when the original attributes change
- You need to reference the values in the template. In this case, it is better to create a calculated attribute because it is cached.
- You need to listen to changes in multiple data attributes
When to use observer
- You want to monitor when the data attributes change, and perform some operations
- You want to hear changes in the value of props
- You only need to listen to a specific attribute (you cannot watch multiple attributes at the same time)
- You want to monitor a data attribute until it reaches a certain value, and then perform some operations
Download mine for freeVue manual
More vue tutorials:
- Vue.js overview
- Vue.js CLI: Learn how to use it
- Vue.js development tools
- Configure VS code for Vue development
- Create your first application with Vue.js
- Vue.js single file component
- Vue.js templates and interpolation
- Vue.js instructions
- Vue.js method
- Vue.js calculated attributes
- Use CSS to style Vue.js components
- Vue.js observer
- Vue method vs observer vs calculated property
- Vue.js filter
- Vue.js components
- Vue.js slot
- Vue.js component props
- Vue.js activities
- Vue.js component communication
- Vuex, Vue.js state manager
- Vue, use a component inside another component
- Vue, how to use prop as a class name
- How to use SCSS with Vue.js single file component
- Use Tailwind in Vue.js
- Vue router
- Dynamically display Vue components
- Vue.js cheat sheet
- Use Vuex to store Vue data to localStorage
- How to use Vue dynamic application class
- Vue, how to use the v model
- Vue, why data must be functions
- Roadmap to become a Vue.js developer in 2020