- Vue.js 2 Design Patterns and Best Practices
- Paul Halliday
- 379字
- 2021-06-24 18:33:07
Computed properties
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 (for example, firstName) and reverse this using the reverse() method:
<h1>{{ firstName.split('').reverse().join('') }}</h1>
We'll now be showing a reversed version of our firstName, so Paul would become luaP. The issue with this is that it's not very practical to keep logic inside of our templates. If we'd like to reverse multiple fields, we have to then add another split(), reverse(), and join() on each property. To make this more declarative, we can use computed properties.
Inside of App.vue, we can add a new computed object, that contains a function named reversedName; this takes our logic for reversing our string and allows us to abstract this into a function containing logic that would otherwise pollute the template:
<template>
<h1>Name: {{ reversedName }}</h1>
</template>
<script>
export default {
data() {
return {
firstName: 'Paul'
}
},
computed: {
reversedName() {
return this.firstName.split('').reverse().join('')
}
}
}
</script>
We could then see more information about our computed properties within Vue.js devtools:

In our simple example, it's important to realize that, while we could make this a method, there are reasons why we should keep this as a computed property. Computed properties are cached and are not re-rendered unless their dependency changes, which is especially important if we have a larger data-driven application.
- 物聯網(IoT)基礎:網絡技術+協議+用例
- Twilio Cookbook
- Hands-On Chatbots and Conversational UI Development
- 計算機網絡安全實訓教程(第二版)
- 農產品物聯網研究與應用
- HTML5 Game development with ImpactJS
- 網絡安全技術與解決方案(修訂版)
- Metasploit Penetration Testing Cookbook
- 雷達饋線技術
- OMNeT++與網絡仿真
- Bonita Open Solution 5.x Essentials
- 語音信號處理及Blackfin DSP實現
- 網管第一課:網絡操作系統與配置管理
- React Cookbook
- 物聯網工程概論