Vue（九）：计算属性——computed
现在有一个需求，输入姓和名将其拼接为全名，全名要求根据姓名实时变化。
下面是三种实现：
1.插值语法实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>姓名案例-插值语法实现</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"><br> 名：<input type="text" v-model="lastName"><br> 全名：<span>{{firstName}}-{{lastName}}</span> </div> <script type="text/javascript"> const vm = new Vue({ el: "#root", data: { firstName: "", lastName: "" } }) </script> </body> </html>
插值语法可以实现所需要的功能，但是当需要更加复杂时，插值语法中的表达式就会变得十分冗余。
2.methods实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>姓名案例-methods实现</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"><br> 名：<input type="text" v-model="lastName"><br> 全名：<span>{{fullName()}}</span> </div> <script type="text/javascript"> const vm = new Vue({ el: "#root", data: { firstName: "", lastName: "" }, methods: { fullName() { return this.firstName + "-" + this.lastName } } }) </script> </body> </html>
使用methods实现，将插值语法的表达式转化为一个方法，模板中直接对方法进行调用，但是其他地方的数据变化，Vue模板刷新，会重复调用函数，进行计算。
3.计算属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>姓名案例-计算属性实现</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <!-- 计算属性 1.什么是计算属性？ 计算属性就是将Vue中的属性经过计算后得到的新的属性，计算属性会直接出现在vm上 2.计算属性的原理 底层借助了Object.defineProperty中的getter和setter 3.get函数什么时候执行？ a.计算属性被初次调用时 b.计算属性所依赖的属性发生改动时 4.计算属性对比methods的优势 计算属性内部有缓存机制，能够实现复用，效率更高 --> <body> <div id="root"> 姓：<input type="text" v-model="firstName"><br> 名：<input type="text" v-model="lastName"><br> 全名：<span>{{fullName}}</span> </div> </body> <script> const vm = new Vue({ el: "#root", data: { firstName: "", lastName: "" }, // //完整写法，setter非必要，如果没有修改的需求，setter可以省略 // computed: { // fullName: { // get() { // return this.firstName + "-" + this.lastName // }, // set(value) { // const arr = value.split("-") // this.firstName = arr[0] // this.lastName = arr[1] // } // } // } //省略写法，省略写法地前提是不需要setter computed: { fullName() { return this.firstName + "-" + this.lastName } } }) </script> </html>
计算属性的缓存机制解决了模板刷新时重复计算的问题，只有当计算属性所依赖的属性发生变化时，才会进行重新的计算。
