一、前言
模板内的表达式常用于简单的运算，当其过长或者逻辑过于复杂时会难以维护。本文的计算属性就用于解决该问题。
二、计算属性
首先通过一个例子来了解什么事计算属性，示例如下，
不适用计算属性
<template>
<div class="hello" >
<h1>{{msg}}转为{{msg+''+'World'}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
msg : 'Hello'
}
}
}
</script>
运行结果，
image.png
使用计算属性，
<template>
<div class="hello" >
<h1>{{newMsg}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
msg : 'Hello'
}
},
computed:{
newMsg (){
return this.msg+'转为'+this.msg+''+'World1';
}
}
}
</script>
运行结果
image.png
可以看到上面的运行结果是一样的，但是使用计算属性之后就可以分离逻辑代码,是代码的维护性更强。
1.计算属性和函数
上述例子中，可以看到计算函数其实是一个函数，如果我们放在methods中，那么
<template>
<div class="hello" >
<h1>{{newMsg()}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
msg : 'Hello'
}
},
methods:{
newMsg (){
return this.msg+'转为'+this.msg+''+'World';
}
}
}
</script>
运行结果如下，
image.png
可以发现，不管是使用计算属性还是使用
methods运行结果都是一样的,既然这样为什么还要用就散属性呢？这就引入了一个缓存的概念。
2.计算属性和缓存
计算属性是基于它的依赖缓存的，一个计算属性所依赖的数据发生变化，它才会重新取值，所以msg只要不改变，计算属性就不会更新。但是methods不同，只要重新渲染，它就会被调用，函数就会被执行。究竟是使用就算属性还是methods取决于是否需要缓存，当遍历大数组和计算量很大时，应当使用计算属性，除非不希望得到缓存。
三、侦听器
Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动，称为监听器。当一些数据需要随着其他数据变动而变动时，可能会很容易滥用watch。下面通过代码来了解侦听器的使用。
<template>
<div class="hello" >
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<h1>{{fullName}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
firstName : 'jack',
lastName : 'chen',
fullName : 'jack chen'
}
},
watch :{
firstName(val){
this.fullName = val+ this.lastName;
},
lastName(val){
this.fullName = this.firstName+val;
}
}
}
</script>
运行结果，
image.png
当输入框的内容改变时，对应的
fullName也会改变，例如，
image.png
