计算属性
1. 基本用法
计算属性也是用来存储数据，但具有以下几个特点：
a.数据可以进行逻辑处理操作
b.对计算属性中的数据进行监视
2.计算属性 vs 方法
将计算属性的get函数定义为一个方法也可以实现类似的功能
区别：
a.计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化
b.计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行
3. get和set
计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性
默认只有get，如果需要set，要自己添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
</head> <body> <div id="app"> <!-- 1. 普通属性 -->
<h2>{{msg}}</h2>
<!-- 对数据处理再显示 -->
<h3>{{msg.split('').reverse().join('')}}</h3> <!-- 2. 计算属性 -->
<h2>{{msg2}}</h2>
<h3>{{reverseMsg}}</h2> <hr> <button v-on:click="change">修改msg的值</button> <hr> <h1>{{num1}}</h1>
<h1>{{num2}}</h1>
<h1>{{getNum2()}}</h1> <hr> <button v-on:click="changeNum1">修改num1的值</button>
<button onclick="fn()">测试</button> <hr> <!-- 计算属性的get、set方法 -->
<button @click="change2">修改计算属性</button> </div>
<script> var vm = new Vue({
el:'#app',
data:{ //普通属性
msg:'Hello World!~',
num1:9
},
computed:{ //计算属性
msg2:function(){ //该函数必须有返回值，用来获取属性，称为get函数
return "你好，世界"
},
reverseMsg:function(){
//可以包含逻辑处理操作，同时reverseMsg依赖于msg
return this.msg.split('').reverse().join('');
},
/* num2:function(){
console.log(new Date());
return this.num1-1;
}, */
num2:{
get:function(){
console.log(new Date());
return this.num1-1;
},
set:function(val){
this.num1=111;
}
}
},
methods:{
change(){
this.msg='Hello Kitty!~'
},
changeNum1(){
this.num1=666
},
getNum2(){
console.log(new Date());
return this.num1-1;
},
change2(){
this.num2=111;
}
}
}) function fn(){
setInterval(function(){
/* 计算属性与方法区别 */
/* console.log(vm.num2); */
console.log(vm.getNum2());
},1000)
} </script> </body> </html>