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