Vue的计算属性

Vue模板（{{}}）可以用来展示一些数据，但是遇到数据的逻辑比较复杂的时候，此时要怎么办呢?,这个时候就会用到Vue的计算属性：

基本用法
计算属性也是用来存储数据的，常用于逻辑比较复杂的计算但有着一下几个特点：
          a）所有的计算属性一般以函数的形式写在Vue实例的computed选项中的，并最终返回计算后的结果。（或者是以一个对象的形式写在Vue实例中的computed选项中【有get 和set选项函数时】）;
          b）对计算属性中的数据进行监视（依赖发生变化的时候，计算属性的值也会随之改变）；

c）计算属性归根结底还是数据(虽然要其值还是一个有返回值的函数)
    例如:

var app = new Vue({
			el:"#container",
			data:{
				msg:"hello,world"
			},
			computed:{
				// 大写，计算属性一般是函数的形式写在Vue实例中的computed选项中的
				uppercase:function(){
					return this.msg.toUpperCase()//并终究要返回计算结果
				},
				greeting:{
					get:function(){
						return this.msg +" 你好，2018！"
					},
					set:function(){
						alert(1)//计算属性的值改变的时候触发----changeCompu函数执行的时候
					}
				},
				getOtherData:function(){
					return app1.newMsg.length//数据来源于其他Vue实例
				}
			},
			methods:{
				upper:function(){
					return this.msg.toUpperCase()
				},
				changeCompu:function(){
					this.greeting = "heheh"//改变计算属性greeting的值，触发该计算属性set函数
				}
			}
		})

计算属性和方法methods的区别

   一般而言，计算属性能实现的通过methods中的函数也可以实现,那么他们之间有什么区别呢？
                    a）.计算属性的值是基于他们的依赖进行更新的,只有在相关依赖发生变化的时候才会更新变化。
                    b）.计算属性是有缓存的，只有相关依赖没有发生改变，多次访问计算属性的值的时候的值是之前缓存的计算结果（也就是第一次计算的结果），不会多次改变;而函数方法则是次次执行
所以，选计算属性还是函数取决于你是否需要缓存，当遇到需要进行大量计算的时候，首选计算属性（因为缓存可以做到只计算一次只要数据不更新）

var app = new Vue({
			el:"#container",
			data:{
				msg:"hello,world"
			},
			computed:{
				// 大写，计算属性一般是函数的形式写在Vue实例中的computed选项中的
				uppercase:function(){
					console.log(Date.now())
					return this.msg.toUpperCase()//并终究要返回计算结果
				}
			},
			methods:{
				upper:function(){
					console.log(Date.now())
					return this.msg.toUpperCase()
				}
			}
		})
		setInterval(function(){
			app.uppercase;//只打印一次，说明
			app.upper()//次次都会有打印
		},1000)

get和set
计算属性有两个选项分别是get函数和set函数；前者是获取当前计算属性的值，后者则是当计算属性的值发生改变的时候会触发；
set函数是通过改变计算属性的值触发的(也就是说当计算属性的值发生改变的时候才会触发set函数)，在set函数中接受一个参数val作为改变后计算属性的值传递进来；

var app = new Vue({
			el:"#container",
			data:{
				msg:"hello,world"
			},
			computed:{
				greeting:{
					get:function(){
						return this.msg +" 你好，2018！"
					},
					set:function(){
						alert(1)//计算属性的值改变的时候触发----changeCompu函数执行的时候
					}
				}
			},
			methods:{
				changeCompu:function(){
					this.greeting = "heheh"//改变计算属性greeting的值，触发该计算属性set函数
				}
			}
		})