computed vue
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...vue computed
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})vue add watcher
vm.$watch('person.name.firstName', function(newValue, oldValue) {
alert('First name changed from ' + oldValue + ' to ' + newValue + '!');
});computed vs watch vue
Differences and Similarities
Let's see how they are different:
Computed props are more declarative than watched properties
Computed props should be pure: return a value, synchronous, and
have no side-effects
Computed props create new reactive properties, watched props only
call functions
Computed props can react to changes in multiple props, whereas
watched props can only watch one at a time.
Computed props are cached, so they only recalculate when things
change. Watched props are executed every time
Computed props are evaluated lazily, meaning they are only
executed when they are needed to be used. Watched props are executed
whenever a prop changes
But they also have some similarities
They aren't exactly twins, but they both:
React to changes in properties
Can be used to compute new data
Watch is for side effects. If you need to change state you want to use a computed prop instead.
Most of the time you'll want a computed prop, so try to use that first.
If it doesn't work, or results in weird code that makes you feel like
taking a shower, then you should switch to using a watched prop.Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
