Vue:计算属性

  • Post author:
  • Post category:vue




一,计算属性

通过前面的学习,我们可以在模板中双向绑定一些数据或表达式了。但是表达式如果过长,或逻辑更为复杂时,就会变得雕肿甚至难以阅读和维护。例如:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

这里是想要显示变量 message 的翻转字符串,为了达到目的。这个表达式包含了三个操作。显然,如果想要在模板中多包含此处的翻转字符串时,就会显得代码相当臃肿。

当一个属性的值

依赖于

其它属性的值时就可以使用的

计算属性



简化代码

。举个例子:

<div id="example">
	<p>Original message: "{{ message }}"</p>
	<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
    var vm = new Vue({
      el: '#example',
      data: {
        message: 'Hello'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      }
    })
</script>

结果如下:

在这里插入图片描述

所有的计算属性都以函数的形式写在 Vue 实例内的

comput

选项内,最终返回计算后的结果,即我们可以把一些计算的过程写到一个计算属性——

comput

选项内中去,然后让它动态地计算,例如:

在这里插入图片描述



二,缓存特性

在上面的例子里,我们完全可以在表达式中调用方法来完成反序操作而不用计算属性,那么为什么还需要计算属性呢?原因就是计算属性是基于它的

依赖缓存

的:

一个计算属性所依赖的数据发生变化时,它才会重新取值更新,否则只会返回之前的计算结果。

computed: {
  now: function () {
    return Date.now()
  }
}

上面的例子就不会实时更新,因为Date.now()不是响应式依赖。如果是在方法中使用Date.now(),则会在方法被调用时出现更新。



三,计算属性的使用


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



1, 使用vue实例内的多个数据

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>

		<style type="text/css">
			#example {
				color: red;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
        <div id="example">
			<p>商品总价: {{ totalPrice }}</p>
        </div>

        <script src="vue.js" type="text/javascript" charset="UTF-8"></script>

        <script>
            var vm = new Vue({
              el: '#example',
              data: {
                package1: [
                    {
                        name: 'iphone12 pro max 128GB',
                        price: 9299,
                        count: 2,
                    },
                    {
                        name: 'xiaomi10 至尊纪念版 8+256',
                        price: 5599,
                        count: 3,
                    }
                ],
                package2: [
                    {
                        name: 'apple',
                        price: 3,
                        count: 3,
                    },
                    {
                        name: 'millet',
                        price: 12,
                        count: 1,
                    }
                ]
              },
              computed: {
                  totalPrice: function () {
                    var price = 0;
                    for (var i=0; i<this.package1.length; i++){
                        price += this.package1[i].price * this.package1[i].count;
                    }
                    for (var i=0; i<this.package2.length; i++){
                        price += this.package2[i].price * this.package2[i].count;
                    }
                    return price;
                }
              }
            })
        </script>
    </body>
</html>



2,计算属性的getter与setter

每一个计算属性都有getter与setter。

前者用于读取,是默认使用的;

后者用于写入设置,会在修改数据后被触发,通常不使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>

		<style type="text/css">
			#example {
				color: red;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
        <div id="example">
			<p>姓名: {{ fullName }}</p>
        </div>

        <script src="vue.js" type="text/javascript" charset="UTF-8"></script>

        <script>
            var vm = new Vue({
              el: '#example',
              data: {
                first_name: 'Jack',
				last_name: 'Johnson'
              },
              computed: {
					fullName: {
						get: function (){
							return this.first_name + ' ' + this.last_name;
						},
						set: function (value){
							var new_nme = value.split(' ');
							this.first_name = new_nme[0];
							this.last_name = new_nme[name.length-1];
						}
					}
              }
            });

            vm.fullName = "Vincent van Gogh";
        </script>
    </body>
</html>



3,跨vue实例使用数据

计算属性除了依赖本vue实例的数据外,还可以依赖其它势力的数据。

<div id="app1">
	<p>app1's number: "{{ a }}"</p>
</div>
<div id="app2">
    <p>app2's number: "{{ b }}"</p>
    <p>the computed sum: "{{ sum }}"</p>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
    var app1 = new Vue({
        el: '#app1',
        data: {
            a: 1
        }
    })
    var app2 = new Vue({
        el: '#app2',
        data: {
            b: 2
        },
        computed: {
            sum: function () {
                return app1.a + this.b;
            }
        }
    })
</script>

结果如下:

在这里插入图片描述



4,计算属性依赖其它计算属性

除了数据依赖,计算属性也可依赖其它计算属性。

<div id="app">
	<p>a: "{{ a }}"</p>
    <p>a double: "{{ aDouble }}"</p>
    <p>a plus: "{{ aPlus }}"</p>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a: 1
        },
        computed: {
            aDouble: function (){
                return this.a * 2;
            },	
            aPlus: {
                get: function () {
						
                    return this.a += 4;
                },
                set: function (value) {
                    this.a = value - 1;
                }
            }
        }
    })
	
	console.log(vm.a)
	console.log(vm.aPlus) 
	console.log(vm.aPlus = 3)
	console.log(vm.a)
	console.log(vm.aDouble)
</script>

结果如下:

在这里插入图片描述



版权声明:本文为dangfulin原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。