vue监视属性watch的作用是可以监视data和computed中属性发生了变化,并且记录了属性的新值和旧值
监视属性的位置
监视属性watch位置是和data属性computed属性methods属性平级
export default {
data() {//data
return {}
},
computed: {//计算属性},
methods: {//方法},
watch: {//监视属性},
}
监视属性的使用场景
接口请求三秒后才能再次发起请求,记录当前时间为新值减去再次点击时的时间是否大于3秒,3秒后才可再次执行操作
监视属性的写法
watch监视属性需要计算,所以写法为配置对象watch: {}
export default {
data() {//data
return {}
},
computed: {//计算属性},
methods: {//方法},
watch: {//监视属性},
}
监视属性可以监视属性
只要是属性都可以用watch来进行监视,例如data中的属性、computed中的计算属性都是属性
监视属性的配置参数
监视属性有handler、immediate、和deep
handler(有newValue,oldValue的形参)
handler函数在检测到监视的属性发生变化时自动调用
配置immediate:true
时,立即执行一次时调用handler,handler函数的形参newValue值为默认值,oldValue为undefined,因为监测的属性还没有改变
今天天气很{{info}}
–>
export default {
name: "HelloWorld",
data() {
return {
isHot: true,
}
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽';
}
},
watch: {
//监视计算属性info
info: {
immediate: true,//配置为true后即使info属性依赖的isHot没有发生变化时也调用一次handler函数
handler(newValue,oldValue) {
console.log("info值发生变化啦",newValue,oldValue);
},
}
},
}
immediate(默认值为false)立即调用监视属性方法
配置为true后即使检测的属性没有发生变化,handler函数也会调用一次
今天服务器托管网天气很{{info}}
export default {
data() {
return {
isHot: false,
}
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽';
},
},
methods: {
changeWeather() {
this.isHot = !this.isHot;
}
},
watch: {
isHot: {
immediate: true,//初始化时让handle调用一下
handler(newValue,oldValue) {
console.log("isHot属性被修改了",newValue,oldValue)
},
}
},
}
deep(默认为false)
配置depp:true
时,可以深度监视属性里面的多级属性
//监视多级结构中某个属性的变化
今天天气很{{info}}
export default {
name: "HelloWorld",
data() {
return {
isHot: false,
numbers: {
a: 1,
b: 1
},
}
},
computed: {
info: {
get() {
return this.isHot ? '炎热': '凉爽'
}
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot;
}
},
watch: {
//监视多级结构中某个属性的变化
"numbers.a": {
immediate: true,
handler(newValue,oldValue) {
console.log(newValue, oldValue);
}
}
}
}
//配置deep:true开启深度监视
今天天气很{{info}}
export default {
name: "HelloWorld",
data() {
return {
isHot: false,
numbers: {
a: 1,
b: 1
},
}
},
computed: {
info: {
get() {
return this.isHot ? '炎热': '凉爽'
}
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot;
}
},
watch: {
//监视多级结构中所有属性的变化
numbers: {
immediate: true,
deep: true,
handler(newValue,oldValue) {
console.log(newValue,oldValue);
}
},
}
}
监视属性的两种写法
1.写在watch的配置对象里
2.使用vm.$watch('检测属性名',监视属性里的函数体)
vm.$watch('numbers': {
immediate: true,
deep: true,
handler(newValue,oldValue) {
console.log(newValue,oldValue);
}
})
监视属性的简写
监视属性中,只用handler不需要用immediate和deep时才可进行简写,把handler的东西全部写到监视属性函数上
watch: {
//正常写法
/*isHot: {
immediate: true,
handler(newValue,oldValue) {
console.log(newValue, oldValue);
},
deep: true,
}*/
//简写
isHot(newValue,oldValue) {
console.log(newValue, oldValue);
}
}
//正常写法
vm.$watch('isHot', {
immediate: true,
handler(newValue,oldValue) {
console.log(newValue, oldValue);
},
deep: true,
})
//简写 function不能写成箭头函数,否则会造成this指向有问题,不指向vm而是
vm.$watch('isHot',function(newValue,oldValue) {
console.log(newValue, oldValue);
})
注意:vue管理的函数都不能写成箭头函数,其中有methods里的方法函服务器托管网数,计算属性的getter和setter以及简写计算属性函数,监测属性的handler以及watch的简写函数
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
很多新手经常遇到传奇架设跑步卡出刀卡多半是M2参数设置问题,还有就是本地测试无延迟调试好了架设到服务器感觉又卡了,稍微的延迟你可以在微调下,架设到服务器的不要精细调本地的游戏速度,这个问题归根结底来说网络的问题和版本设置问题。 M2-选项-参数-游戏速度 可以…