计算属性 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>