一、计算属性和方法区别
将计算属性的get函数定义为方法，也可以实现类似的功能。不过计算属性和方法有本质的区别。计算属性和方法的区别：
- 计算属性是基于他的依赖进行更新的，只有在相关以来发生改变时才能更新变化
- 计算属性是有缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存存的计算结果，不会多次执行。
二、代码设计
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue计算属性</title> 6 <!--引入vue--> 7 <script src="../js/vue.js"></script> 8 9 </head> 10 <body> 11 <div id="hello"> 12 <!-- 计算属性 --> 13 <h3>计算属性返回的num2：{{num2}}</h3> 14 <button onclick="fn1()">定时执行计算属性</button> 15 16 <!-- 方法--> 17 <h3>方法返回的num2：{{getNum2()}}</h3> 18 <button onclick="fn2()">定时执行方法</button> 19 </div> 20 21 <script> 22 let vm = new Vue({ 23 //vue挂载目标 24 el:'#hello', 25 //vue属性 26 data:{ //普通属性 27 num:9 28 }, 29 //vue计算属性 30 computed:{ //计算属性 31 num2:function(){ //get函数 32 console.log('计算属性num2',new Date()); 33 return this.num-1; 34 }, 35 }, 36 //vue方法 37 methods:{ 38 getNum2(){ 39 console.log('方法getnum2()',new Date()); 40 return this.num-1; 41 }, 42 }, 43 }) 44 45 //自定义普通的函数，不属于vue，定时输出计算属性 46 function fn1(){ 47 setInterval(function(){ 48 console.log(vm.num2); 49 },1000); 50 } 51 52 //自定义普通的函数，不属于vue，定时输出方法 53 function fn2(){ 54 setInterval(function(){ 55 console.log(vm.getNum2()); 56 },1000); 57 } 58 59 </script> 60 61 </body> 62 </html>
三、效果展示
