1 模板与方法的不足¶
有两个输入款，一个输入姓（firstname），一个输入名（secondname），fullname由转换为大写字母的姓、横线、转换为大写字母的名拼接组成，当姓或者名修改时，页面上实时显示修改后fullname。使用模板语法，可以很容易实现：
<div id="app">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{{firstName.toUpperCase()}}-{{lastName.toUpperCase()}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
firstName:'zhang',
lastName:'san'
}
})
</script>
这种方法原理简单，在实现上很好理解，但是过于繁琐，如果在页面中多次用到fullname，那次用到时，都需要进行转化、拼接。所以，进一步的，何以使用函数的方法进行实现：
<div id="app">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{{ fullname() }}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
firstName:'zhang',
lastName:'san'
},
methods:{
fullname(){
return this.firstName.toUpperCase() + '-' + this.lastName.toUpperCase()
}
}
})
</script>
使用函数的方法实现后，代码看起来更加优雅，但是如果在页面中多出使用到fullname，那么，还是需要多次调用fullname()方法，每次调用fullname()方法时，都会进行拼接等运算，大大降低页面渲染效率。针对这些问题，于是就有了“计算属性”的出现。
2 计算属性¶
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以，所以，我认为可以将计算属性看做是Vue对象中定义的一个特殊的属性。当在页面中，如果多处使用到同一个计算属性，计算属性中的所有运算过程也只需要执行一次，因为计算属性有将结果保存到缓存中的特性，再次使用时，可以从缓存中进行读取。当然，如果计算属性计算过程中设计相关变量发生变化，使用计算属性时，会再次重新执行运算过程，不同担心读取缓存而导致读取的结果“过期”。
计算属性在Vue实例中的“computed”中进行定义, 调用时不需要再属性名后面添加“()”。当在页面中使用“fullname”时，Vue会自动调用fullname中的get方法：
<div id="app">
姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名计算第1次：<span>{{ fullname }}</span><br/><br/>
全名计算第2次：<span>{{ fullname }}</span><br/><br/>
全名计算第3次：<span>{{ fullname }}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
data:{
firstName:'zhang',
lastName:'san'
},
computed:{ // 此处定义计算属性
fullname:{
get:function(){
console.log('读取fullname ……')
return this.firstName.toUpperCase() + '-' + this.lastName.toUpperCase()
}
},
}
})
</script>
在上述实例代码中，计算属性在3出被调用，但是，真实运算的过程只执行了一次，所以，在控制台只会有一条输出结果，如下所示：|
在计算属性中，除了“getter”也可以添加“setter”方法，“setter”的作用是为计算属性赋值的同时，完成一些其他操作，例如上述例子中，在“setter”中，我们为fullname赋值，同时，根据赋值结果，修改“firstname”和“second”的值：
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
var vm = new Vue({
el:'#app',
data:{
firstName:'zhang',
lastName:'san'
},
computed:{ // 此处定义计算属性
fullname:{
get:function(){
console.log('读取fullname ……')
return this.firstName.toUpperCase() + '-' + this.lastName.toUpperCase()
},
set(value){
console.log('修改fullname',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
},
}
})
</script>
在绝大多数计算属性中，setter是不需要的，可以不用写上。通过上述例子我们知道，计算属性是通过getter和setter来实现取值和赋值，getter是必须有的。当只考虑读取（getter）不考虑赋值（setter）时，getter可以进一步简写，上述例子可以简写为：
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
var vm = new Vue({
el:'#app',
data:{
firstName:'zhang',
lastName:'san'
},
computed:{ // 此处定义计算属性
fullname: function(){
console.log('读取fullname ……')
return this.firstName.toUpperCase() + '-' + this.lastName.toUpperCase()
}
}
})
</script>
甚至还可以进一步将计算属性直接简写为一个函数的形式，不过，必须注意，简写为函数不代表就真是函数，在其他地方使用到时，还是直接使用，不需要想函数一样加上“()”调用：
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
var vm = new Vue({
el:'#app',
data:{
firstName:'zhang',
lastName:'san'
},
computed:{ // 此处定义计算属性
fullname(){
console.log('读取fullname ……')
return this.firstName.toUpperCase() + '-' + this.lastName.toUpperCase()
}
}
})
</script>
