zoukankan      html  css  js  c++  java
  • Vue 计算属性(四)

    1、computed 选项:

    <template>
      <div id="app">
          {{ reversedText }}
      </div>
    </template>
    <script>
    export default {
      name: "App",
      data() {
        return {
          text: '123,456'
        };
      },
      computed: {
        reversedText: function() {
          // 这里的 this 指向的是当前 Vue 实例
          return this.text.split(',').reverse().join(',');
        }
      }
      
    };
    </script>

    2、methods 选项:

    <template>
      <div id="app">
          <!-- 注意,这里的 reversedText 是方法,所以要带() -->
          {{ reversedText() }}
      </div>
    </template>
    <script>
    export default {
      name: "App",
      data() {
        return {
          text: '123,456'
        };
      },
      methods: {
        reversedText: function() {
          // 这里的 this 指向的是当前 Vue 实例
          return this.text.split(',').reverse().join(',');
        }
      }
      
    };
    </script>

    3、可以发现methods里的方法与计算属性两种方式最终执行结果是完全相同的。然而,不同的是计算属性是基于它的依赖进行缓存的。一个计算属性所依赖的数据发生变化时,它才会重新取值。这就意味着只要 text 还没有发生改变,多次访问 reversedText 计算属性会立即返回之前的计算结果,而不必再次执行函数。

    4、使用计算属性还是 methods 取决于你是否需要缓存,出于性能考虑,当遍历大数组和做大量计算时,应当使用计算属性。

    参考:

    《Vue.js 实战》

    https://cn.vuejs.org/v2/guide/

    艺无止境,诚惶诚恐, 感谢开源贡献者的努力!!
  • 相关阅读:
    配置数据同步
    NET移动设备开发
    计算两个日期之间的工作日数
    ActionScript3.0程序开发工具
    常用JS积累之获取节点高度(基于浏览器)
    推荐40个优秀的免费CSS工具
    #include语法
    CSS3属性boxshadow使用教程
    CSS元素背景透明
    js获取网页高度
  • 原文地址:https://www.cnblogs.com/d0usr/p/12560693.html
Copyright © 2011-2022 走看看