计算属性
什么是计算属性？
- 我们知道，在模板中可以直接通过插值语法显示一些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>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wclNVCBq-1609508903750)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记三/1.jpg)]](https://img-blog.csdnimg.cn/20210101214948837.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center)
计算属性的复杂操作
<!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>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sutX2xSX-1609508903754)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记三/2.jpg)]](https://img-blog.csdnimg.cn/20210101214957769.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center)
计算属性的setter和getter
- 我们上面用到的计算属性看起来像个函数，但实际上应该当成一个属性。（使用的时候千万不要加小括号）
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
}
- 实际上，因为计算属性的set方法一般都不用，只有get所以简化了：
fullName: {
// 一般情况set都没有，只有get
set: 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>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qinCPM5G-1609508903755)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记三/3.jpg)]](https://img-blog.csdnimg.cn/20210101215009510.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center)
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。