In this section, we'll be looking at computed properties within our Vue instance. This allows us to create small, declarative functions that return a singular value based on items inside of our data model. Why is this important? Well, if we kept all of our logic inside of our templates, both our team members and our future self would have to do more work to understand what our application does.
Therefore, we can use computed properties to vastly simplify our templates and create variables that we can reference instead of the logic itself. It goes further than an abstraction; computed properties are cached and will not be recalculated unless a dependency has changed.
Let's create a simple project to see this in action:
# Create a new Vue.js project $ vue init webpack-simple computed # Change directory $ cd computed # Install dependencies $ npm install # Run application $ npm run dev
Interpolation is powerful; for example, inside of our Vue.js templates we can take a string...