Todo methods vs computed properties
3. Computed Property
Computed properties are also functions but they are different from methods. They run only once per page load, and it will re-run only if any of it’s dependent variable changes.
The difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as message has not changed, multiple access to the reversedMessage computed property will immediately return the previously computed result without having to run the function again.
In comparison, a method invocation will always run the function whenever a re-render happens.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template><div>FullName: {{ fullName() }}</div></template> data () { return { firstName: 'Hello' lastName: 'World' } }, computed: { fullName () { return this.firstName + ' ' + this.lastName } } |