计算属性 vs 方法

a.计算属性是基于它的依赖进行更新 只有在相关依赖发生改变时才能进行更新
b.计算属性为缓存，依赖不变，多次访问方法结果为之前缓存结果，不会多次执行

计算属性必须依赖对象用 有所依赖才有存在意义

get和set

计算属性只能通过自己的get函数获得值 默认为get函数 不能用外部的赋值为无效
若要用外部改变计算属性 需通过设置set函数来改变他的依赖 使其自己的get函数获得我们想要的结果

话不多说 直接上代码

		<div class="app" v-if="seen">
			{{msg1}}
			<h2>{{reverseMsg}}</h2>
			<button @click='change'>修改msg值 bye world</button>
			<h2>{{computedGetNum}}</h2>
			
			<button @click='changeNum'>改变num 传值给计算属性</button>
			<button onclick="fn()">测试num 普通的方法</button>
		</div>


		<script>
			var vm = new Vue({
				el: '.app',
				data: {
					msg1: 'Hello world',
					seen: true,
					num:1
				},
				computed:{ // 计算属性可以包含逻辑操作 同时计算属性依赖于msg 与方法区别在于被依赖改变且只执行一次
					reverseMsg: function() {
						return this.msg1.split('').reverse().join();
					},
					computedGetNum:{
						get:function(){
						// 一秒执行一次 但只返回return 时间输出语句只执行一次
						console.log("Computed" + new Date());
						return this.num-1;				
						  // 只有当依赖的num改变时 才会重新输出时间语句 
						},
						set:function(val){			/* 定义一个接口连接到计算属性set方法 传入一个val 更改他的依赖 实现它的get方法输出我们想要的结果 */
							this.num = 111;
						}
					}
				},
				
				methods:{
					change(){
						this.msg1='bye world'
					},
					
					getNum(){								/* 普通的调用方法则会不停执行循环体 用计算属性不同 */
						console.log(new Date());
						return this.num-1;
					},
					
					changeNum(){
						this.computedGetNum = 111;
					}
				}
			});
			
			function fn(){
				setInterval(function(){
					console.log(vm.getNum())			/* 循环调用methods getNum */
				},1000)
			
			}			
		</script>