计算属性【computed】
1. 姓名案例
1.1 {{}}插值语法版本
<body>
<div id="root">
姓：<input type="text" v-model="firstName"/>
名：<input type="text" v-model="lastName"/>
<hr />
全名：{{firstName.slice(0,3)}}-{{lastName}}
</div>
<script type="text/javascript">
//阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false
const vm = new Vue({
el: "#root",
data(){
return{
firstName:'',
lastName:''
}
}
})
</script>
</body>
注：firstName.slice(0,3)截取指定区间的字符串
这种方式的缺点是如果业务逻辑比较复杂【这里的firstName.slice(0,3)仅仅是简单的业务逻辑】，表达式将变得难读，违背了Vue的“模板中简单的表达式”这个原则。
参考：https://v2.cn.vuejs.org/v2/style-guide/#模板中简单的表达式强烈推荐
1.2 methods版本
基于插值语法版本的缺点，对案例进行改进，使用methods进行封装实现
methods中定义的方法既可以作为事件的回调函数使用，也可以作为方法被调用
作为事件的回调函数使用时，如果不进行传参，那么小括号写不写都可以，比如@click="showInfo"
但用在插值语法中作为方法被调用时，即时不进行传参，也必须写小括号，比如{{showInfo()}}
一旦data中的数据发生改变，Vue会重新解析模板，解析过程中如果遇到插值语法中调用了方法的情况，被调用的方法就会重新执行
<body>
<div id="root">
姓：<input type="text" v-model="firstName"/>
名：<input type="text" v-model="lastName"/>
<hr />
全名：{{fullName()}}
<!-- Vue不会去解析getMsg方法内部是否引用了data中的属性，只要data属性发生了变化，该方法就会被重新调用 -->
测试：{{getMsg()}}
</div>
<script type="text/javascript">
//阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false
const vm = new Vue({
el: "#root",
data(){
return{
firstName:'',
lastName:''
}
},
methods: {
fullName(){
//这里的this是Vue实例，通过访问Vue实例的属性就可以访问到data中对应的属性【数据代理】
return this.firstName + '-' + this.lastName
},
getMsg(){
console.log('getMsg执行了')
return 'hhh'
}
}
})
</script>
</body>
这种方式将业务逻辑封装到method中，面对复杂的逻辑也变得易读，但会存在效率的问题
1.3 计算属性版本
Vue实例的各个配置项之间（如：el、data、methods...）是不会冲突的
Vue认为data中写的东西都是属性
计算属性：拿着data中已有的属性进行加工计算生成一个全新的属性，生成的这个新属性就是计算属性
Vue中，属性和计算属性是分开存放的，属性放在data配置项中，计算属性放在computed配置项中
Vue实例的_data中是没有计算属性的
计算属性是通过计算data中的属性得到值之后直接加到Vue实例身上的，只要是Vue实例身上的，模板中就可以直接读到，就是说，使用计算属性直接读就可以了
计算属性是没有具体值的，因为它的值是现算的
计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.set函数什么时候执行？ 当fullName【计算属性】被修改时。
5.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
6.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据【get方法中依赖的属性】发生改变。
<body>
<div id="root">
姓：<input type="text" v-model="firstName"/>
名：<input type="text" v-model="lastName"/>
<hr />
全名：{{fullName}}
</div>
<script type="text/javascript">
//阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false
const vm = new Vue({
el: "#root",
data:{
firstName:'',
lastName:''
},
computed:{
fullName:{
get(){
console.log('get excute')
return this.firstName + '-' + this.lastName
},
set(value){
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
</body>
2. 计算属性的简写形式
如果一个计算属性只考虑读取，不考虑修改，也就是说只会用到该计算属性的getter，就可以使用简写形式
//完整写法
computed:{
fullName:{
get(){
console.log('get excute')
return this.firstName + '-' + this.lastName
},
set(value){
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
},
//简写形式
computed:{
fullName:function(){
console.log('get excute');
return this.firstName + '-' + this.lastName;
}
},
//最终简写形式
computed:{
fullName(){
console.log('get excute');
return this.firstName + '-' + this.lastName;
}
}