Vue.js学习笔记：计算属性

Myth丶恋晨 2021-09-14 01:54 375阅读 0赞

在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

** 计算属性就是vue实例里的computed属性**，对应一个对象，里面可以放各种方法，方法的作用就是可以生成和数据变量对应的计算后的变量，跟数据相关的复杂逻辑变量，都可以使用计算属性实现，computed里的函数名，对外就是一个变量，默认是getter。

vue.js   中getter是获取值的方法， setter是设置值的方法。

一.基础列子

①

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-model双向绑定</title> </head> <body > <div id="example"> a={ { a }}, b={ { b }} </div> <script src="js/vue.js"></script> <script> var vm =new Vue({ el: '#example', data: { a: 1 }, computed: { // 一个计算属性的 getter b: function () { // `this` 指向 vm 实例 return this.a + 1 } } }); console.log(vm.b) vm.a = 2; console.log(vm.b) </script> </body> </html>

![20170802112337063][]

你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 `vm.b` 依赖于 `vm.a`，因此当 `vm.a` 发生改变时，依赖于 `vm.b` 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系：计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。

如：

这里我们声明了一个计算机属性reversedMessage，我们提供的函数将用作属性vm.reversedMessage的getter。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> </head> <body > <div id="example"> <p>正常message的值为: "{ { message }}"</p> <p>Computed 后message值: "{ { reversedMessage }}"</p> </div> <script src="js/vue.js"></script> <script> var vm =new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 一个计算属性的 getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } }); console.log(vm.reversedMessage) // -> 'olleH' vm.message = 'Goodbye' console.log(vm.reversedMessage) // -> 'eybdooG' </script> </body> </html>

![20170802112837529][]

二.计算机缓存 vs Methods

可以通过调用表达式中的method来达到同样的效果：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性</title>
    </head>
    <body>
    <div id="example">
    	<p>Reversed message: "{
       { reversedMessage() }}"</p>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
    var vm =new Vue({
    	el: '#example',
    	data: {
    		message: 'Hello'
    	},
    	methods: {
    	  	reversedMessage: function () {
    	    	return this.message.split('').reverse().join('')
    	  	}
    	}
    });
    </script>
    </body>
    </html>

可以将同一个函数定义为一个method而不是一个计算机属性。

对于最终的结果，两种方式确实是相同的。然而，不同的是**计算机属性是基于它们的依赖进行缓存的**。计算属性只有在它的相关依赖发生改变时才会重新求值，这就意味着只要message还没有改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

**如果你不希望有缓存，请用 method 替代。**

三.计算属性 vs watch

一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。

有一些数据需要随着其它数据变动而变动时，不能滥用 `watch`,通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。

<div id="demo">{
       { fullName }}</div>
    
    <script src="js/vue.js"></script>
    <script>
    var vm =new Vue({
    	el: '#demo',
    	data: {
    	    firstName: 'Foo1',
    	    lastName: 'Bar3',
    	    fullName: 'Foo Bar'
    	},
    	watch: {
    	    firstName: function (val) {
    	      this.fullName = val + ' ' + this.lastName
    	    },
    	    lastName: function (val) {
    	      this.fullName = this.firstName + ' ' + val
    	    }
    	}
    });
    </script>

上面代码是命令式的重复的。跟计算属性对比：

var vm =new Vue({
    	el: '#demo',
    	data: {
    	    firstName: 'Foo',
    	    lastName: 'Bar'
    	},
    	computed: {
    	    fullName: function () {
    	      return this.firstName + ' ' + this.lastName
    	    }
    	}
    });

更好，不是吗？

四.计算setter

计算属性默认只有getter，不过在需要是可以提供一个setter

<div id="demo">\{ \{ fullName \}\}</div>

当运行vm.fullName = 'John Doe'时，setter会被调用，vm.firstName和vm.lastName  也相应的会被更新。

五.观察watchers

当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。

查看官网：[https://cn.vuejs.org/v2/guide/computed.html][https_cn.vuejs.org_v2_guide_computed.html]

[20170802112337063]: /images/20210813/8f46995e287546f9bb646ea6d2c4719c.png
[20170802112837529]: /images/20210813/9838f2cb04324795ab116a66cf47941f.png
[https_cn.vuejs.org_v2_guide_computed.html]: https://cn.vuejs.org/v2/guide/computed.html