计算属性 computed
简单模板的表达式无法完成的业务可以通过计算属性来完成，任何复杂逻辑，都应当使用计算属性。
HTML部分：
<div id="app">
{{msg.toUpperCase().split('').reverse().join('')}}
</div>
JS部分
new Vue({
el:"#app",
data:{
msg:"hello vue"
}
})
显示效果
EUV OLLEH
在模板中放入太多的逻辑会让模板过重且难以维护
所以在这个地方 应当使用计算属性
如下
HTML部分：
<div id="app">
{{reversed}}//调用
</div>
JS部分
new Vue({
el:"#app",
data:{
msg:"hello vue"
},
computed: {
reversed(){
return this.msg.toUpperCase().split('').reverse().join('')
}
}
})
显示效果
EUV OLLEH
计算属性具有依赖性，所依赖的属性发生改变时，计算属性就会发生改变，所依赖的属性没改变时，计算属性不会发生改变。首次运行时会也发生改变。
侦听器 watch
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。相比计算属性需要多添加一个初始变量。
HTML部分：
<div id="app">
<input type="text" v-model='pwd' placeholder="请输入密码">
{{tip}}//调用
</div>
JS部分
new Vue({
el:"#app",
data:{
pwd:"",
tip:""
},
watch: {
pwd(newVal,oldVal){
if(newVal===""){
this.tip="密码不能为空"
}else if(newVal.length<6||newVal.length>16){
this.tip="密码应该6-16位"
}else{
this.tip="密码可用"
}
}
}
})
在首次打开时，watch不会被运行，所以不会显示密码不能为空的提示语。在表单内输入数据后才会运行watch并更改元数据。
计算属性与侦听器的区别
计算属性 在页面初次渲染时直接运行 调用时直接在模板中渲染 对数据有依赖性
侦听属性 在页面初次渲染时不运行 在修改数据后才执行 调用的时候需要更改元数据
