1. 代码示例:vue
<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改变以后的执行结果app
(3) age改变以后的执行结果性能
3. 分析结论this
在使用vue进行开发的过程当中,常常会遇到computed动态计算属性值的场景,使用{{}}调用方法(getName)能达到一样的目的,但效率不及computed,缘由在于每当绑定在this上的值发生变化时,都会调用一次方法,而computed会缓存计算结果,只有当其依赖的属性值发生变化时才会从新计算,所以才会出现图三的状况,当年龄发生变化时,getName()方法被调用以输入"getName invoked",而name所依赖的firstName和lastName都没有发生变化,因此name没有从新计算,因而可知,computed的性能是要比方法调用高不少的。