1.什么是计算属性

　　computed：计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存！

2.编写程序

　　注意：methods 和 computed 里的东西不能重名

说明：

methods：定义方法，调用方法使用 currentTime1()，需要带括号
computed：定义计算属性，调用属性使用 currentTime2，不需要带括号；this.message 是为了能够让 currentTime2 观察到数据变化而变化
如何在方法中的值发生了变化，则缓存就会刷新！可以在控制台使用 vm.message="计算属性",改变下数据的值，再次测试观察效果！

结论：

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="vue">

     <!--注意，一个是方法，一个是属性-->

     <p>调用当前时间的方法：{{currentTime1()}}</p>

     <p>当前时间的计算属性：{{currentTime2}}</p>

 </div>

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

 <script type="text/javascript">

     var vm = new Vue({

         el: '#vue',

         data: {

             message: 'Hello Vue'

         },

         methods: {

             currentTime1: function () {

                 return Date.now();

             }

         },

         computed: {

             //currentTime2 ，这是一个属性！不是方法

             currentTime2: function () {

                 this.message;

                 return Date.now();

             }

         }

     });

 </script>

 </body>

 </html>

可以看出：

methods中的方法没有放入缓存中，调用一直改变
computed中的方法放入缓存中，调用不变。如果修改其中内容，则缓存中的内容改变。

巴特西

7.Vue的计算属性

1.什么是计算属性

2.编写程序

最新文章

热门文章