Vue计算属性

计算属性

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
  <script>
      //通过new Vue 可以声明全局变量,new返回的对象就是应用对象
      var vm = new Vue({
          //el:相当于js的element
          el: "#app",
          data: {
              message: "hello,vue!"
          },
          methods: {
              currentTime1:function(){
                  return Date.now();//返回一个时间戳
              }
          },
          computed: {//j计算属性:methods, computed 方法名不能重名,重名之后,自会调用methods的方法
          currentTime2:function(){
              return Date.now();//返回一个时间戳
          }
      }
      });
  </script>

说明

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

总结

  - computed:计算出的数据会放在缓存中,但如果在中间加上数据,并且那个数据被刷新了,缓存就会失效,重新计算
  - 计算属性的主要特征就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销