这只是我自学vue的时候一些我容易忘的知识点自己随笔记下，便于复习。
1.Vue的计算属性computed
1、为什么要用到计算属性computed：
一般来说在模块内使用表达式比较方便，但是当表达式过于复杂的话，模块内放入过多的逻辑会让模块过重，使用了computed后，就可以将复杂的逻辑放入计算中进行处理。
<div id="app">
<h1>{{jiSuan}}</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
data: {a:2,
b:3},
computed:{
jiSuan(){
return this.a*this.b;
}
}
})
</script>
使用computed可以使得view层的代码十分简洁，便于维护。
2、计算属性的setter和getter
一般的计算属性默认为getter，不过可以在需要的时候提供一个setter。
setter和getter的区别在于，setter在computed这个属性的值发生变化的时候出发的。
类似上面的计算,其实类似于：
<div id="app">
<h1>{{jiSuan}}</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
data: {a:2,
b:3},
computed:{
jiSuan:{//括号注意一下
get:function () {
return this.a * this.b;
}
}
}
})
</script>
如果使用setter的话
<script>
var vm = new Vue({
el:"#app",
data: {a:2,
b:3},
computed:{
jiSuan:{
get:function () {
return this.a * this.b;
}
},
set:function (value){
var x=value;
this.a=x;
this.b=x;
}
}
})
</script>
类似于这样一种形式，computed下的这个jiSuan直接被修改值的时候，就会触发这个setter，类似使用v-model的时候，直接修改了jiSuan这样的情况下，就会调用setter了；而getter使用的方法是用来调用getter来修改jiSuan的值。
3、computed与methods的区别
其实上面的功能用methods也能轻松实现：
<div id="app">
<h1>{{jiSuan()}}</h1>//注意！！！要带上括号！！！
</div>
<script>
var vm = new Vue({
el:"#app",
data: {a:2,
b:3},
methods:{
jiSuan:function (){
return this.a*this.b;
}
}
})
</script>
这两者有什么区别呢：
计算属性computed是基于里面元素的依赖进行缓存的，计算属性只有在它的相关依赖发生变化的时候才会重新求值，这就意味着：只要元素的属性不变，多次访问计算属性都会立即返回之前的计算结果，不用再次执行函数。就像上述的a和b，只要a,b的属性没有变，那么调用计算属性下的jsSuan就会直接返回计算结果。
但是每当重新触发渲染的时候，调用方法总是会再次执行函数，因为methods没有缓存，所以每次访问都要重新执行，如果遇到性能比较大的计算属性，每次访问都将带来巨大负重。
注意点：计算属性部内的this指向的是vm的实例，模板调用的时候直接写计算属性名即可。
