版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m0_37068028/article/details/79812916
vue 计算属性
下例中,getName方法调用可以起到与使用计算属性name相同的作用
new Vue({
el: '#root',
template: `<div>
<div>Name: {{name}}</div>
<div>Name: {{getName()}}</div>
<div>Number: {{number}}</div>
<div><input v-model="number" /></div>
</div>`,
data () {
return {
fisrtName: 'hello',
lastName: 'world',
number: 0
}
},
computed: {
name () {
console.log('new name')
return `${this.fisrtName} ${this.lastName}`
}
},
methods: {
getName () {
console.log('get name')
return `${this.fisrtName} ${this.lastName}`
}
}
})
使用双向绑定,当input框更改number时,getName方法也会重新调用,而computed中的name方法则不会,由于更改number值使组件更新,导致getName方法重新执行。
当computed中的name方法的监听的firstName与lastName值发生改变时,name方法会重新调用,当即会做缓存起来,当改变number值时,name方法依旧不会执行。