Vue中计算属性computed—(详解计算属性vs方法Methods，包括案例+代码)
文章目录
- 计算属性computed
- 3.1 概述
- 3.2 使用
- 3.3 计算属性vs方法Methods
- 3.4 计算属性的完整写法
计算属性computed
3.1 概述
基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算
语法：
- 声明在 computed 配置项中，一个计算属性对应一个函数
- 使用起来和普通属性一样使用 {{ 计算属性名}}
注意事项：
- computed配置项和data配置项是同级的
- computed中的计算属性虽然是函数的写法，但他依然是个属性
- computed中的计算属性不能和data中的属性同名
- 使用computed中的计算属性和使用data中的属性是一样的用法
- computed中计算属性内部的this依然指向的是Vue实例
<script>
const app = new Vue({
el: '#app',
data: {
// 现有的数据
},
//computed和data同级
computed: {
totalCount () {}
}
</script>
3.2 使用
<style>
table {
border: 1px solid #000;
text-align: center;
width: 240px;
}
th,td {
border: 1px solid #000;
}
</style>
<body>
<div id="app">
<table>
<tr>
<th>名字</th>
<th>数量</th>
</tr>
<tr v-for="(item, index) in list" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.num }}个</td>
</tr>
</table>
<!-- 目标：统计求和，求得礼物总数 -->
<p>礼物总数：{{ totalCount }} 个</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
// 现有的数据
list: [{
id: 1,
name: '篮球',
num: 1
}, {
id: 2,
name: '玩具',
num: 2
}, {
id: 3,
name: '铅笔',
num: 5
}, ]
},
computed: {
totalCount() {
//基于现有的数据，编写求值逻辑
//计算属性函数内部，可以直接通过 this 访问到 app 实例
//console.log(this.list)
//需求:对this.list数组里面的num进行求和→reduce
let total = this.list
.reduce((sum, item)=>sum+item.num,0)
return total
}
}
})
</script>
3.3 计算属性vs方法Methods
computed计算属性
-
作用：封装了一段对于数据的处理，求得一个结果
-
语法：
- 写在computed配置项中
- 作为属性，直接使用
- js中使用计算属性： this.计算属性
- 模板中使用计算属性：{{计算属性}}
methods计算属性
-
作用：给Vue实例提供一个方法，调用以处理业务逻辑。
-
语法：
- 写在methods配置项中
- 作为方法调用
- js中调用：this.方法名()
- 模板中调用 {{方法名()}} 或者 @事件名=“方法名”
计算属性的优势:
-
缓存特性（提升性能）
计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
依赖项变化了，会自动重新计算 → 并再次缓存
-
methods没有缓存特性
<style>
table {
border: 1px solid #000;
text-align: center;
width: 300px;
}
th, td {
border: 1px solid #000;
}
h3 {
position: relative;
}
</style>
<body>
<div id="app">
<h3>666666<span>{{ totalCountFn() }}</span></h3>
<h3>666666<span>{{ totalCountFn() }}</span></h3>
<h3>666666<span>{{ totalCountFn() }}</span></h3>
<h3>666666<span>{{ totalCountFn() }}</span></h3>
<table>
<tr>
<th>名字</th>
<th>数量</th>
</tr>
<tr v-for="(item, index) in list"
:key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.num }}个</td>
</tr>
</table>
<p>礼物总数：{{ totalCountFn() }} 个</p>
<p>礼物总数：{{ totalCount}} 个</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
// 现有的数据
list: [
{ id: 1, name: '篮球', num: 3 },
{ id: 2,name: '足球', num: 2 },
{ id: 3, name: 'Java编程', num: 5 },
]
},
methods: {
totalCountFn() {
console.log('methods方法执行了')//执行五次
let total = this.list
.reduce((sum, item) => sum + item.num, 0)
return total
}
},
computed: {
// 计算属性：有缓存的，一旦计算出来结果，就会立刻缓存
// 下一次读取 → 直接读缓存就行 → 性能特别高
totalCount() {
console.log('totalCount计算属性执行了')//执行1次
let total = this.list
.reduce((sum, item) => sum + item.num, 0)
return total
}
}
})
</script>
3.4 计算属性的完整写法
- 计算属性默认的简写，只能读取访问，不能 “修改”
- 如果要 “修改” → 需要写计算属性的完整写法
<style>
input {
width: 30px;
}
</style>
<body>
<div id="app">
姓：<input type="text" v-model="firstName"> + 名：
<input type="text" v-model="lastName"> =
<span>{{fullName}}</span>
<button @click="changeName()">改名卡</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: '李',
lastName: '白',
},
methods: {
changeName() {
this.fullName = '你好'
}
},
computed: {
// 简写 → 获取，没有配置设置的逻辑
// fullName () {
// return this.firstName + this.lastName
// }
// 完整写法 → get()获取 + set()设置
fullName: {
//(1)当fullName计算属性，被获取求值时，
//执行get（有缓存，优先读缓存）
//会将返回值作为，求值的结果
get() {
return this.firstName + this.lastName
},
//(2)当fullName计算属性，被修改赋值时，执行set
//修改的值，传递给set方法的形参
set(value) {
//当点击执行changeName()方法后，
//‘你好’会传给形参value
this.firstName = value.slice(0, 1)
this.lastName = value.slice(1)
}
}
}
})
</script>
</body>