【Vue】计算属性
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>currentTime1:{{currentTime1()}}</p> <p>currentTime2:{{currentTime2}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> var vm = new Vue({ el: "#app", data:{ message:"hello,java" }, methods: { currentTime1:function () { return Date.now(); } }, computed:{//计算属性 currentTime2:function () { this.message; return Date.now(); } } }); </script> </body> </html>
总结:
调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,如果这个结果不是经常变化的,此时就可以考虑将这个结果缓存起来,采用计算属性可以很防备的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们系统的开销。