1,methods
不存在缓存,执行一次运行一次,执行n次,运行n次。
2,computed
使用场景:当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性。
计算属性 computed 是基于data中数据进行处理的,data数据变化,他也跟着变化。当data中数据没有发生改变时,我们调用computed中函数n次,只会进行缓存(执行一次),每个计算属性都包含两个set、get 属性
3,watch
使用场景:数据变化时执行异步或开销较大的操作,可以随时修改状态的变化。
watch:类似于监听机制+事件机制。在大部分情况下我们都会使用computed,但如果要在数据变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择。
watch为一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。
// 这里直接用 v-model 来绑定,不需要添加 change 事件
<input type="text" v-model="nameValue" style="margin-top:15px" />
data() {
return {
nameValue: "",
tip: ""
};
},
methods: {
checkName(value) {
var that = this;
setTimeout(() => {
if (value == "admin") {
that.tip = "用户名已存在";
} else {
that.tip = "用户名可以使用";
}
}, 2000);
}
},
watch: {// 数据变化时执行异步或开销较大的操作
nameValue(value) {
this.checkName(value);
this.tip = "正在验证......";
}
}
//当num的值发生变化时,就会调用num的方法,方法里面的形参对应的是num的新值和旧值
watch:{
num:function(val,oldval){
console.log(val,oldval);
}}
watch的高级用法
上面的watch方法是当改变值时候,才会触发监听事件,但是我们想刚进入页面时候,就触发监听事件,就要用handler()方法
handler():当页面刚进入时,自动绑定watch事件,不需要进行触发
watch: {// 页面加载时,就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
}
}
}
immediate属性:布尔值
immediate:true:首次加载就监听数据变化
immediate:false:只有发生改变才监听
watch: {// 页面加载时,就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
},
immediate: true
}
}
deep:true;是开启深层次的监听,即所有属性都加上监听器,如果其中一个发生改变了就执行handler函数。
watch: {// 页面加载时,就自动触发此事件
nameValue:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
},
immediate: true,
deep:true
}
}
为了方便查,转过来了。