三，计算属性computed
计算属性，方法名可以直接在对象中使用.这个属性是通过计算得出的。
这个方法中的任意属性改变，都会触发这个方法
使用场景：希望把一些计算的业务逻辑放在方法中，例如：全名计算、地址计算、购物车合计
下面的示例，我们使用了三种方式：
- 使用方法实现
- 使用vue的computed读写方式实现
- 使用vue的computed只读方式实现
注意：推荐使用computed的方式。有缓存机制。在页面重复调用多次的情况下，只执行一次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div> <input type="text" v-model="firstName" ><br> <input type="text" v-model="lastName" ><br> <input type="text" v-model="getFullName()" ><br> <input type="text" v-model="fullNameReadOnly" ><br> <input type="text" v-model="funName" ><br> </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el:"#app", data(){ return{ firstName:'科比', lastName:'布莱恩特', } }, methods:{ getFullName(){ return this.firstName + "-" + this.lastName } }, computed:{ // 只读方式的简写 fullNameReadOnly(){ return this.firstName + "-" + this.lastName }, funName:{ get(){ return this.firstName + "-" + this.lastName }, set(value){ this.firstName = value.split("-")[0] this.lastName = value.split("-")[1] } } }, }) </script> </html>
四，监视属性watch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el:"#app", data(){ return{ isSunny:true, person:{ age:18, name:'王导', } } }, watch:{ // 表示要对isSunny这个属性进行监听 isSunny(newVal,oldVal){ console.log("改变了",oldVal,newVal); }, // 深度监听可以用来监听整个对象的改变，但要慎重使用，因为消耗性能 person:{ deep:true, handler(oldVal,newVal){ console.log("改变了",oldVal,newVal); } }, "person.name"(oldVal,newVal){ console.log("我也监听了"); } } }) </script> </html>
最后
送大家一句话： 世界上的好东西都是抢来的，只有弱者才会坐等分配
