Vue 计算属性用法笔记

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