1.watch 监听属性,常用来监听某些特定data数据的变化。
有些操作不方便或不能通过绑定事件来处理业务逻辑,如监听路由的变化,通过采用watch监听。
当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
2.methods 一般用来写业务逻辑代码。
3.computed 计算属性
计算属性,是把方法当做属性来使用的。属性的结果,可以基于它们的依赖进行缓存。多次调用同一属性,只有当它们的值发生变化,才会重新调用计算属性,否则就从缓存里取数据,只调用一次。
任何复杂逻辑,你都应当使用计算属性
下面举个例子
methods vs watch vs computed
<div id="app"> html
中文名输写:
<input type="text" v-model="firstname" @keyup="getname">+
<input type="text" v-model="lastname" @keyup="getname">=
<input type="text" v-model="fullname">
</div>
methods 通过绑定事件来操作业务逻辑
let vm = new Vue({ js
el: "#app",
data: {
firstname: "",
lastname: "",
fullname: ""
},
methods: {
getname() {
this.fullname = this.firstname + this.lastname;
}
},
}
watch
直接监听data的改变,键是需要观察的表达式:值是对应的回调函数
let vm = new Vue({
el: "#app",
data: {
firstname: "",
lastname: "",
fullname: ""
},
watch:{// watch 监视data数据改变
// newdata是改变后的新数据 olddata是改变前的数据
firstname:function(newdata,olddata){ // 回调函数
this.fullname = newdata + this.lastname;
},
lastname:function(newdata,olddata){
this.fullname = this.firstname + newdata;
}
},
}
computed
只需要一行代码即可搞定。
像这种业务逻辑采用计算属性更加合适。不会多次计算,消耗计算机性能。
let vm = new Vue({
el: "#app",
data: {
firstname: "",
lastname: ""
},
computed:{
fullname:function(){// 注意:属性名不能与data数据中属性名重复
return this.firstname + this.lastname; // 返回结果
}
}
})