Vue.js实战学习-计算属性

最新推荐文章于 2024-11-03 16:40:52 发布

YKiOS

最新推荐文章于 2024-11-03 16:40:52 发布

阅读量205

点赞数

分类专栏： Vue.js 文章标签： vue 前端

本文链接：https://blog.csdn.net/YKiOS/article/details/84870684

版权

Vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.什么是计算属性？

在表达式中如果有复杂的逻辑时就应该使用计算属性，所有的计算属性都以函数的形式写在Vue实例内computed选项内，最终返回计算后的结果，如：

<!DOCTYPE html>
<html>
<head>
  <title>计算属性</title>
</head>
<body>
  <div id="app">
    {{ reversedText }}
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data:{
        text: '123,456'
      },
      computed: {
        reversedText: function () {
          return this.text.split(',').reverse().join(',');
        }
      }
    })
  </script>
</body>
</html>

2.计算属性的用法：

计算属性可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以了。

计算属性除了一些简单的用法还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会做相应的更新。

每一个计算属性都包含一个getter和一个setter，绝大数情况下，我们只会用默认的getter方法来读取一个计算属性，在业务中很少用到setter，所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter和setter都声明。如：

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ');
                this.firstName = names[0];
                this.lastName = names[names.length - 1];
            }
        }
    }
});
//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

计算属性除了简单的文本插值外，还经常用于动态地设置元素的样式名称class和内联样式style。当使用组件时，计算属性也经常用来动态传递props。

两个实用的小技巧：一.计算属性可以依赖其他计算属性；二.计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其他实例的数据。如：

<!DOCTYPE html>
<html>
<head>
  <title>计算属性</title>
</head>
<body>
  <div id="app1"></div>
  <div id="app2">
    {{ reversedText }}
  </div>
  <script>
    var app1 = new Vue({
      el: '#app',
      data:{
        text: '123,456'
      }
    });
    var app2 = new Vue ({
      el: '#app2',
      computed: {
        reversedText: function () {
          //这里依赖的实例app1的数据text
          return app1.text.split(',').reverse().join(',');
        }
      }
    })
  </script>
</body>
</html>

3.计算属性缓存：

计算属性和methods里定义的方法都能实现相同的效果，使用计算属性是基于它的依赖缓存，一个计算属性所依赖的数据发生变化时，它才会重新取值。

使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。举个例子：

<div>{{reverseTitle}}</div>
<div>{{reverseTitle1()}}</div>
<button @click="add()">补充货物1</button>
<div>总价为：{{price}}</div>

computed: {
      reverseTitle: function(){
          return this.title.split('').reverse().join('')　　//而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
      },
     price: function(){
         return this.package1.count*this.package1.price+this.package2.count*this.package2.price
     }
    },
    methods: {   //对象的方法
        add: function(){
            this.package1.count++
        },
        reverseTitle1: function(){
            return this.title.split('').reverse().join('')　　//点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
        }
    },

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。

如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。