import Vue from 'vue'
new Vue({
el: '#root',
template: `
<div>
<span>Name: {{firstName + ' ' + lastName}}</span>
</div>
`,
data: {
firstName: 'Jokcy',
lastName: 'Lou'
}
})
new Vue({
el: '#root',
template: `
<div>
<span>Name: {{name}}</span>
</div>
`,
data: {
firstName: 'Jokcy',
lastName: 'Lou'
},
computed: {
name () {
return `${this.firstName} ${this.lastName}`
}
}
})
new Vue({
el: '#root',
template: `
<div>
<span>Name: {{name}}</span>
<span>Name: {{getName()}}</span>
</div>
`,
data: {
firstName: 'Jokcy',
lastName: 'Lou'
},
computed: {
name () {
return `${this.firstName} ${this.lastName}`
}
},
methods: {
getName () {
return `${this.firstName} ${this.lastName}`
}
}
})
当我们改变 number 时,整个应用会重新渲染,vue 会被数据重新渲染到 dom 中。
这时,如果我们使用 methods 方法,随着渲染,方法需要被重新调用。
而 computed 中的函数所依赖的属性没有发生改变,那么调用当前函数的时候会从缓存中读取,从而性能开销比较小。当新的值需要大量计算才能得到,缓存的意义就非常大。
如果 computed 所依赖的数据发生改变时,计算属性才会重新计算,并进行缓存;当改变其他数据时,computed 属性 并不会重新计算,从而提升性能。
当我们拿到的值需要进行一定处理使用时,就可以使用 computed。
监听 firstName 数据,并根据改变得到的新值,进行某些操作
new Vue({
template: `
<div>
<p>FullName: {{fullName}}</p>
<p>FirsName: <input type="text" v-model="firstName"/></p>
</div>
`,
data: {
firstName: 'Jokcy',
lastName: 'Lou',
fullName: ' '
},
watch: {
firstName (newName, oldName) {
this.fullName = newName + ' ' + this.lastName
}
}
})
注意:
参考自 :王童孟 / https://www.jianshu.com/p/bb7a2244c7ca
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。