计算属性computed
计算属性，方法名可以直接在对象中使用.这个属性是通过计算得出的。 这个方法中的任意属性改变，都会触发这个方法 使用场景：希望把一些计算的业务逻辑放在方法中，例如：全名计算、地址计算、购物车合计
下面的示例，我们使用了三种方式：
- 使用方法实现
- 使用vue的computed读写方式实现
- 使用vue的computed只读方式实现
注意：推荐使用computed的方式。有缓存机制。在页面重复调用多次的情况下，只执行一次
<body> <div id="app"> 姓：<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="fullName"><br> 全名：<input type="text" v-model="fullNameReadOnly"><br> </div> </body> <script src="./js/vue2.js"></script> <script> var app = new Vue({ el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串 data() { return { firstName:'张', lastName:'三', } }, methods:{ getFullName(){ return this.firstName+"-"+this.lastName } }, computed:{ fullName:{ // 读 get(){ return this.firstName+"-"+this.lastName }, // 写 set(value){ this.firstName = value.split("-")[0] this.lastName = value.split("-")[1] } }, // 只读方式的简写 fullNameReadOnly(){ return this.firstName+"-"+this.lastName } } }); </script>
侦听属性watch
// 前面在data中要定义好两个属性：plan、isSunny watch:{ // 监听isSunny属性，当isSunny属性改变时，执行对应的代码 isSunny:{ immediate:true, // 开启初始化调用 deep:true, // 开启深度监视 handler(newVal,oldVal){ // 晴天打篮球，否则写代码 this.plan = this.isSunny ? "打篮球" : "写代码" console.log('新的数据：'+newVal); console.log('旧的数据：'+oldVal); } }, // 监听复杂数据的某个属性，这也是一种简写方式 "person.name"(newVal,oldVal){ console.log('新的数据：'+newVal); console.log('旧的数据：'+oldVal); } }
- 被监视的属性发生改变时，调用回调函数，执行相关操作
- 配置
immediate:true实现初始化调用 - 监视的属性须存在才能进行监视
完整代码
<body> <div id="app"> <div> <input type="text" v-model="firetName"> <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"> </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> var app=new Vue({ el:"#app", data(){ return{ firetName:"科比", lastname:"布莱恩特", isSunny:true, person:{ age:18, name:'光头' } } }, methods:{ getFullName(){ return this.firetName+"."+this.lastname } }, computed:{ //只读方式的简写,写到computed,有缓存 fullNameReadonly(){ return this.firetName+"."+this.lastname }, funName:{ get(){ return this.firetName+"."+this.lastname }, set(value){ this.firetName=value.split(".")[0] this.lastname=value.split(".")[1] } } }, watch:{ //表示要对isSunny这个属性进行侦听 isSunny(newVal,oldval){ console.log("改变了",oldval,newVal); }, //深度监听可以用来监听整个随性的改变,但要慎用,因为 person:{ immediate:true, deep:true, handler(newVal,oldval){ console.log("改变了",newVal,oldval); } }, "person.name"(newVal,oldval){ console.log("我也侦听到了"); } } }) </script>
