1.计算属性

（a）基本用法

关键词：cumputed

说一下：在模板中放入太多的逻辑会让模板过重且难以维护，为了使得计算清晰明了，计算属性就诞生了

小技巧：1.依赖其他计算属性（计算属性函数相互间使用）；2.vue实例间的依赖（数据的想通相变）

[code]<div id="app">
<p>原始字符串: {{ str }}</p>
<p>反转字符串: {{ renderStr }}</p>
</div>

<script>
var vm = new Vue({
el: '#app',
data: {
str: '丫头'
},
computed: {
renderStr: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>

（b）比较methods定义的函数

1.效果相同，都是定义函数的地方；

2.computed依赖实例的缓存变则变，methods只要重渲染函数总会重新调用；

3.computed性能会好些，自己管自己不用担心影响到其他；

（c）计算属性的setter（设置器）

默认为getter，如需setter需要进行配置（其实用的上setter的机会并不多，也不提倡用）

[code]var vm = new Vue({
el: '#app',
data: {
name: '丫头'
},
computed: {
site: {
get: function () {
return this.name
},
set: function (newValue) {
this.name = newValue
}
}
}
})

// 调用 setter， vm.name会被对应更新
vm.site = '新字段';

2.监听属性

（a）基本用法

关键字：watch

说一下：此属性用来响应数据的变化，适当场景用的还是很频繁的

[code]<div id = "app">
<p>计数器: {{ counter }}</p>
<button @click = "num++">点我</button>
</div>

<script>
var vm = new Vue({
el: '#app',
data: {
num: 1
}
});
vm.$watch('num', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

（b）使用场景

1.基础监听：60分以下不及格；60分-85分良好；85分以上优秀

[code]<div id="app">
分数：<input type="number" v-model="achievement"><br>
提示：<span> {{infoMsg}} </span>
</div>

<script>
new Vue({
el:"#app",
data:{
achievement:"",
infoMsg:""
},
watch:{
achievement:function(newVal,oldVal){
if(newVal<60){
this.infoMsg="不及格"
}else if(newVal>60 && newVal<85){
this.infoMsg="良好"
}else{
this.infoMsg="优秀"
}
}
}
})
</script>

2.进阶监听：后台传值，且值藏在内部（非data的直接子数据）

注意：1.不可用箭头函数，因其this指向不是vue实例；2.新添属性deep，意为深度监听

[code]<div id="app">
分数：<input type="number" v-model="info.achievement"><br>
提示：<span> {{infoMsg}} </span>
</div>

<script>
new Vue({
el:"#app",
data:{
info:{
achievement:"",
}
infoMsg:""
},
watch:{
info:{
handler:function(newVal,oldVal){
if(newVal.achievement<60){
this.infoMsg="不及格"
}else if(newVal.achievement>60 && newVal.achievement<85){
this.infoMsg="良好"
}else{
this.infoMsg="优秀"
}
},
deep:true
}
}
})
</script>

3.高级监听：后台传值，且内部数值对有好多

[code]<div id="app">
分数：<input type="number" v-model="info.achievement"><br>
提示：<span> {{infoMsg}} </span>
</div>

<script>
new Vue({
el:"#app",
data:{
info:{
achievement:"",
age:"",
name:"",
city:""
}
infoMsg:""
},
computed:{
getAchievement:function(){
return this.info.achievement
}
},
watch:{
getAchievement:{
handler:function(newVal,oldVal){
if(newVal<60){
this.infoMsg="不及格"
}else if(newVal>60 && newVal<85){
this.infoMsg="良好"
}else{
this.infoMsg="优秀"
}
},
deep:true
}
}
})
</script>

前端工作不好做，具有耐心不用说。

加油学习别放弃，勤奋就是可补拙。