09-Vue核心-计算属性
Computed 计算属性是 Vue 中常用的一个功能，那为什么要使用计算属性
我们假定一个前提情况，如果我们需要用到一个属性，但这个属性不存在，却可以通过其他属性计算得来，我们则可以通过以下几个方法进行实现：
1) 插值语法实现
2) methods实现
3) 计算属性实现
例：我们已知 姓、名属性 firstName 和 lastName，想要得到姓名全名。就比如姓："马"，名："铃薯"，姓名全程："马-铃薯"
1) 插值语法实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值语法实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓：<input type="text" v-model:value="firstname" placeholder="请输入您的姓"><br/>
名：<input type="text" v-model:value="lastname" placeholder="请输入您的名"><br/>
<!--使用插值语法实现-->
<!--姓名全称：<span>{{firstname + "-" + lastname}}</span>-->
姓名全称：<span>{{firstname}}-{{lastname}}</span><br/>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false;
new Vue({
el:"#root",
data(){
return{
firstname:"任",
lastname:"先生"
}
}
})
</script>
</body>
</html>
2) methods实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>methods实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓：<input type="text" v-model:value="firstname" placeholder="请输入您的姓"><br/>
名：<input type="text" v-model:value="lastname" placeholder="请输入您的名"><br/><br/>
<!--使用methods实现-->
<!--{{fullName()}}代表调用fullName()函数，获取返回值-->
姓名全称：<span>{{fullName()}}</span><br/>
姓名全称：<span>{{fullName()}}</span><br/>
姓名全称：<span>{{fullName()}}</span><br/>
姓名全称：<span>{{fullName()}}</span><br/>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false;
new Vue({
el:"#root",
data(){
return{
firstname:"任",
lastname:"先生"
}
},
// 通过fullName()函数，返回所需要的内容
methods:{
fullName(){
console.log("@---正在调用fullName()函数...")
return this.firstname + "-" + this.lastname
}
}
})
</script>
</body>
</html>
3) 计算属性实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓：<input type="text" v-model:value="firstname" placeholder="请输入您的姓"><br/>
名：<input type="text" v-model:value="lastname" placeholder="请输入您的名"><br/><br/>
<!--使用计算属性实现-->
姓名全称：<span>{{fullName}}</span><br/>
姓名全称：<span>{{fullName}}</span><br/>
姓名全称：<span>{{fullName}}</span><br/>
姓名全称：<span>{{fullName}}</span><br/>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data(){
return{
firstname:"任",
lastname:"先生"
}
},
// 计算属性：要用的属性不存在，需要通过已有属性计算得来
// 计算属性一般用来描述依赖响应式状态的复杂逻辑
computed:{
// 1.计算属性的完整写法
fullName:{
// get什么时候调用（返回值作为fullName的值）
// 1.初次读取fullName时，get就会被调用
// 2.所依赖的数据发生改变时，get也会被调用
get(){
console.log("@---正在调用get()方法...")
return this.firstname + "-" + this.lastname
},
// get什么时候调用
// 只有当fullName发生修改时，set才会被调用
set(value){
console.log("@---正在调用set()方法...")
const arr = value.split("-")
this.firstname = arr[0]
this.lastname = arr[1]
}
}
// // 2.计算属性的简写写法(默认没有set方法)
// fullName(){
// console.log("@---正在调用get()方法...")
// return this.firstname + "-" + this.lastname;
// }
}
})
</script>
</body>
</html>
通过上述的几个案例，我们分析得出以下结论：
1) 插值语法实现虽然比较简洁方便，但是最大的缺点就是无法进行复杂的逻辑运算
2) methods实现虽然可以通过方法进行复杂的逻辑运算，但是methods中的方法只要被触发，被调用的方法就会立即执行对应函数，全部重新进行渲染。就如同上面的例子，四个<span>标签调用了四次fullName()函数（"@---正在调用fullName()函数..."），会显得比较冗余。
3) 计算属性相比于methods是具有缓存性质的，计算属性是基于它们的响应式依赖进行缓存的，只要依赖的数据不发生变化，都可以直接从缓存中立即返回结果。就如同上面的例子，四个<span>标签调用了一次fullName计算属性的get()方法（"@---正在调用get()方法..."），通过这种方法会比普通方法的效率更高、调试更方便。
计算属性的定义
要用的属性不存在，需要通过已有属性计算而得来的
计算属性的原理
底层借助了Object.defineproperty方法提供的getter和setter
计算属性的好处
具有缓存机制，当依赖的数据不发生变化时，都可以直接从缓存中立即返回结果；当依赖的数据发生改变时，就会立即重新计算，更新缓存
计算属性的 get() 和 set()方法
1. get()方法
1) 初次读取时，会调用一次get()方法
2) 当依赖的数据发生改变时，get()方法也会被再次调用
2. set()方法
只有当依赖的数据发生改变时，set()方法才会被调用
计算属性的完整写法
// 已有属性 data(){ return{ firstname:"任", lastname:"先生" } }, // 计算属性：要用的属性不存在，需要通过已有属性计算得来 computed:{ // 1.计算属性的完整写法 fullName:{ // get什么时候调用（返回值作为fullName的值） // 1)初次读取fullName时，get就会被调用 // 2)所依赖的数据发生改变时，get也会被调用 get(){ console.log("@---正在调用get()方法...") return this.firstname + "-" + this.lastname }, // get什么时候调用 // 只有当fullName发生修改时，set才会被调用 set(value){ console.log("@---正在调用set()方法...") const arr = value.split("-") this.firstname = arr[0] this.lastname = arr[1] } } }
计算属性的简写（当计算属性不考虑修改时，也就是不需要set()方法，可以使用计算属性的简写形式）
// 已有属性 data(){ return{ firstname:"任", lastname:"先生" } }, // 计算属性：要用的属性不存在，需要通过已有属性计算得来 computed:{ // 2.计算属性的简写写法 fullName(){ console.log("@---正在调用get()方法...") return this.firstname + "-" + this.lastname; }
浙公网安备 33010602011771号