Vue笔记三——计算属性(computed)

阅读：评论：0

文章目录

计算属性
- 什么是计算属性？
- 计算属性的复杂操作
- 计算属性的setter和getter
- 计算属性的缓存

计算属性

什么是计算属性？

我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
- 比如我们又firstName和lastName两个变量，我们需要显示完整的名称。
- 但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}}{{lastName}}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01-计算属性的基本使用</title>
</head><body><div id="app"><h2>{{firstName + ' ' + lastName}}</h2><h2>{{firstName}} {{lastName}}</h2><h2>{{getFullName()}}</h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: 'Lebron',lastName: 'James'},methods: {getFullName() {return this.firstName + ' ' + this.lastName;}}})</script>
</body></html>

我们可以将上面的代码换成计算属性：
- OK，我们发现计算属性是写在实例computed选项中的。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01-计算属性的基本使用</title>
</head><body><div id="app"><h2>{{firstName + ' ' + lastName}}</h2><h2>{{firstName}} {{lastName}}</h2><h2>{{getFullName()}}</h2><h2>{{fullName}}</h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: 'Lebron',lastName: 'James'},// computed：计算属性()computed: {fullName: function() {return this.firstName + ' ' + this.lastName;}},methods: {getFullName() {return this.firstName + ' ' + this.lastName;}}})</script>
</body></html>

计算属性的复杂操作

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02-计算属性的复杂操作</title>
</head><body><div id="app"><h2>总价格：{{totalPrice}}</h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {books: [{id: 110,name: '深入理解计算机原理',price: 119}, {id: 111,name: '斗罗大陆之绝世唐门',price: 643}, {id: 112,name: 'JavaScript从入门到精通',price: 99}, {id: 113,name: '高等数学',price: 37}]},computed: {totalPrice: function() {let result = 0;for (let i = 0; i < this.books.length; i++) {result += this.books[i].price;}return result;}}})</script>
</body></html>

计算属性的setter和getter

我们上面用到的计算属性看起来像个函数，但实际上应该当成一个属性。（使用的时候千万不要加小括号）

computed: {fullName: function() {return this.firstName + ' ' + this.lastName;}
}

实际上，因为计算属性的set方法一般都不用，只有get所以简化了：

fullName: {// 一般情况set都没有，只有getset: function() {},get: function() {return this.firstName + ' ' + this.lastName;}
}

计算属性的缓存

我们可能会考虑这样一个问题：
- methods和computed看起来都可以实现我们的功能
- 那么为什么要多一个计算属性这个东西呢？
- 原因：计算属性会进行缓存，如果多次使用，计算属性只会调用一次。
我们看下面的代码，将methods与computed进行比较。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04-计算属性和methods的对比</title>
</head><body><div id="app"><!-- 1.直接拼接，过于繁琐 --><h2>{{firstName}} {{lastName}}</h2><!-- 2.通过定义methods --><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><h2>{{getFullName()}}</h2><!-- 3.通过定义computed --><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: 'Lebron',lastName: 'James'},// computed：计算属性()computed: {fullName: function() {console.log('通过computed');return this.firstName + ' ' + this.lastName;}},methods: {getFullName() {console.log('通过methods');return this.firstName + ' ' + this.lastName;}}})</script>
</body></html>

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

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

本文发布于:2024-01-30 21:11:47，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170662031022872.html

上一篇：HTML 标签(表格)

下一篇：忘川风华录读取服务器配置文件失败,忘川风华录进不去怎么回事,3.19忘川风华录维护多久才能进...

标签：属性笔记 Vue computed

留言与评论（共有 0 条评论）