共计 816 个字符，预计需要花费 3 分钟才能阅读完成。
1. 代码示例:
<template>
<div id=”app”>
<input type=”text” v-model=”firstName”>
<input type=”text” v-model=”lastName”>
<input type=”text” v-model=”age”>
<br><br>
计算属性: {{name}}
<br><br>
调用方法: {{getName()}}
</div>
</template>
<script>
export default {
data () {
return {
firstName: ‘Samantha’,
lastName: ‘Carter’,
age: 25
}
},
methods: {
getName () {
console.log(‘name changed’)
return `${this.firstName} ${this.lastName}`
}
},
computed: {
name () {
console.log(‘getName invoked’)
return `${this.firstName} ${this.lastName}`
}
}
}
</script>
2. 执行结果(1) 初始结果
(2) firstName 或 lastName 改变之后的执行结果
(3) age 改变之后的执行结果
3. 分析结论
在使用 vue 进行开发的过程中，经常会遇到 computed 动态计算属性值的场景，使用 {{}} 调用方法 (getName) 能达到同样的目的，但效率不及 computed，原因在于每当绑定在 this 上的值发生变化时，都会调用一次方法，而 computed 会缓存计算结果，只有当其依赖的属性值发生变化时才会重新计算，因此才会出现图三的情况，当年龄发生变化时，getName()方法被调用以输入 ”getName invoked”，而 name 所依赖的 firstName 和 lastName 都没有发生变化，所以 name 没有重新计算，由此可见，computed 的性能是要比方法调用高很多的。