计算属性
对于任何的复杂逻辑，需使用计算属性
所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果
小栗子：
<div id="app">
{{fullName}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
firstName:"John",
lastName:"Green"
},
//计算属性
computed:{
fullName:function(){
return this.firstName + " " + this.lastName;
}
}
})
</script>
计算属性计算出的值会进行缓存，所依赖变量不改变的情况下，只会计算一次，后续调用缓存，若相关数据改变则重新进行渲染
getter和setter
每个计算属性都包含一个getter和一个setter函数
默认情况下，只是利用getter函数来读取实例的计算属性
如果需要时，可以提供setter函数，当手动修改计算属性的值时，就会触发setter函数，执行自定义操作
setter函数应用举例：
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ');
//将新修改的名字使用空格分开存入数组
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
在computed中的函数中，分别用get和set分隔开getter和setter函数，当对值重新设置时调用setter函数改变相关联的值，相关联的值改变也会引起页面显示内容的改变
计算属性缓存vs方法
计算属性是基于他们的相应式依赖进行缓存的，只有在相关的相应式依赖发生改变时才会重新求值
若将函数定义成方法放在表达式中进行调用，则在Vue实例中需要写在methods当中
小栗子：
<div id="app">
{{fullName()}}
</div>
methods:{
fullName:function(){
return this.firstName + " " + this.lastName;
}
methods与computed区别
- 调用方法时，只要页面重新渲染，方法就会重新执行，即使依赖的数据没有发生变化
- 调用计算属性，不管是否渲染，只要依赖的数据未发生改变，就不会改变
- 调用方法需要在函数名后面添加括号
- 计算属性也是属性，在双大括号内使用不需要添加括号
- 如果想要使用缓存则应该使用计算属性
计算属性vs侦听属性
Vue使用侦听属性来观察和响应实例上的数据变动，当有数据岁其他数据变化而变化时，很容易滥用watch，所以使用计算属性代替watch
小栗子：侦听器方式
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
使用监听属性当名字改变时，会调用相应的方法，放在这各代码当中，名和姓的改变会分别调用两个方法，代码也较多
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
使用计算属性，有效的减少了代码的数量，当一个值发生改变时就会调用该函数
侦听器
在需要自定义侦听器时，Vue提供使用watch选项来自定义侦听器，对数据改变前后的值进行操作
watch监听的时定义的变量，当变量的值发生改变时，调用对应的方法
$watch方法
观察变量的变化，并获取变化前后的值
使用方法：
vm.$watch('a',function(newval,oldval){
//回调函数
})
