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; }