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/

    艺无止境,诚惶诚恐, 感谢开源贡献者的努力!!
  • 相关阅读:
    vue router 跳转动画
    less 循环
    在iconfont上批量下载图标
    function(h)
    三元表达式
    CSS3 object-fit 属性
    MaC 修改MySQL密码
    CSS3 animation 属性
    css控制文字超过2行不显示
    ionic动画
  • 原文地址:https://www.cnblogs.com/d0usr/p/12560693.html
Copyright © 2011-2022 走看看