Vue学习笔记 —— 计算属性

最新推荐文章于 2023-10-11 19:14:42 发布

莫非C

最新推荐文章于 2023-10-11 19:14:42 发布

阅读量585

点赞数

分类专栏： Vue.js学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_43340295/article/details/108908267

版权

Vue.js学习笔记专栏收录该内容

36 篇文章 1 订阅

订阅专栏

一、什么是计算属性？

模板内的表达式非常便利，但是更适用于简单运算的。放入太多的逻辑会让模板过重且难以维护。例如：

<div>
  {{ message.split('').reverse().join('') }}
</div>

上面的表达式中包含了3个操作，看起来也不清晰，所以这种情况下，应该使用Vue的计算属性。

二、计算属性的用法

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

上面的例子用计算属性可以写成：

<div id="example">
  <p>{{ message }}</p>
  //这里把复杂处理放在计算属性里
  <p>Computed：{{ data}}</p>　　
</div>

var vm = new Vue({
    el: '#example',
    data: {
        message: 'A'
    },
    computed: {
        data: function () {
            // 这里的`this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
});

计算属性还可以依赖多个Vue 实例的数据，只要其中任一个数据变化，计算属性就会重新执行，视图也会更新。例：

<body>
    <div id="app">
        <button @click="add()">button</button>
        <div>{{sum}}</div>
    </div>
</body>

var app = new Vue({        
       el: '#app', 
   data: {
       mun1: {
           a: 5,
           b: 5
       },
       mun2: {
           a: 10,
           b: 10
       }
    },
    computed: {
     sum: function(){
         return this.package1.count*this.package1.price+this.package2.count*this.package2.price　　
     }
    },
    methods: {   
        add: function(){
            this.mun.a++
        }
    }
});

补充：
1. 计算属性可以依赖其他计算属性;
2. 计算属性不仅可以依赖当前Vue 实例的数据，还可以依赖其他实例的数据

例：

<div id="app1"></div>
<div id="app2">{{ dataText}}</div>

var app1 = new Vue({
   el: '#app1',
 data: {
      data: 'abcde'
    }
});

var app2 = new Vue({
    el: '#app2',
    computed: {
        dataText: function(){
        	//使用app1的数据进行计算
            return app1.data.split('').reverse().join('');  
        }
    }
});

计算属性包含一个getter属性和一个setter属性，一般我们都是使用计算属性的默认用法，利用了getter 来读取。

当需要手动修改计算属性的值就像修改一个普通数据那样时，就需要使用setter属性，触发setter 函数，执行一些自定义的操作，例如：

var vm = new Vue({
    el: 'app',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        newName: {
            // 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.newName = 'Byu Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

补充：很多时候我们只会用默认的getter 方法来读取一个计算属性，很少用到setter,所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter 和setter 都声明。

三、计算属性缓存

在上面的例子里，我们通过在表达式中调用方法也可以达到同样的效果，两种方式最终的结果是完全相同的。

<div>{{reverseTitle()}}</div>

// 在组件中
methods: {
  reverseTitle: function () {
    return this.title.split('').reverse().join('')
  }
}

补充：computed与methods的使用区别只有一个，methods使用reverseTitle()取值，computed使用reverseTitle取值。

更重要的不同是，计算属性是基于它的依赖进行缓存的。也就是说计算属性只有在它的相关依赖发生改变时才会重新求值。

而在methods中，不管它依赖的值有没有发生变化，她都会再次计算执行

莫非C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录