前言
本篇案例由插值语法，methods中的函数引出Vue中一个非常重要的概念：计算属性。案例实现的是有两个输入框，一个是名，一个是姓，经过计算将姓名连接起来展示在dom元素上，并且在input框内的数据改变时dom展示也进行相应的改变。实现的结果如下：
插值语法实现
使用之前介绍过的双向数据绑定，在收集到数据之后将其展示在dom元素内。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="demo"> <input v-model="fontname"> <hr> <input v-model="lastname"> <hr> <p>{{fontname}}-{{lastname}}</p> </div> </body> <script> let vm= new Vue({ el:"#demo", data:{ fontname:"张", lastname:"三" } }) </script> </html>
methods实现
这里的话是在插值语法处调用函数，实现的具体逻辑在函数内部。相对于前一种方法，
简化了dom元素内的逻辑（实际生产过程中一定不要dom元素内的逻辑过于复杂）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="demo"> <input v-model="fontname"><hr> <input v-model="lastname"><hr> <!-- 插值语法在使用函数的时候必须显式的调用，否则将会打印函数的信息 --> <p>不加括号的效果：{{pick}}</p><hr> <!-- 这里得到的是正常的返回值 --> <p>加括号的效果：{{pick()}}</p> </div> </body> <script> let vm= new Vue({ el:"#demo", data:{ fontname:"张", lastname:"三" }, methods:{ pick(){ // 这里的this指向的是vm return this.fontname+"-"+this.lastname } } }) </script> </html>
计算属性实现
计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。 2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。 必须要实现getter函数，否则找不到计算属性的值 3.get函数什么时候执行？ (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。 4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。 5.备注： 1.计算属性最终会出现在vm上，直接读取使用即可。 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="demo"> <input v-model="fontname"><hr> <input v-model="lastname"><hr> <p>{{fullname}}</p> </div> </body> <script> let vm= new Vue({ el:"#demo", data:{ fontname:"张", lastname:"三" }, computed:{ //这是最完整的写法，实际的写法应该比这个简单的多。（往下看） fullname:{ //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值 //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。 get(){ return this.fontname+"-"+this.lastname }, set(value){ const arr=value.split("-") if (arr.length!=2){ alert("不合规范") return } this.fontname=arr[0] this.lastname=arr[1] alert("属性值修改") } } //简写 //fullname(){ // return this.fontname+"-"+this.lastname //} } }) </script> </html>
计算属性的原理剖析
刷新机制
在进行属性计算的时候，每当涉及到计算的属性有修改的时候， 系统就会扫描vue实例，并将容器内涉及到计算属性的位置进行更改
缓存机制
计算属性与方法不一样，计算属性有缓存机制，如果在同一页有5处地方用到计算属性 则这5处的值一样（直接在缓存内取值即可），并且只会触发一次属性计算，而如果是函数的话会触发5次
注意点：计算属性的简写方式没有办法对计算属性进行直接修改，因为简写方法只实现了他的getter方法。而完整的写法可以自定义一些规则，实现对计算属性的修改。
