vue监视属性watch简单使用
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
vue监视属性watch的作用是可以监视data和computed中属性发生了变化，并且记录了属性的新值和旧值
监视属性的位置
监视属性watch位置是和data属性computed属性methods属性平级
<script>
export default {
data() {//data
return {}
},
computed: {//计算属性},
methods: {//方法},
watch: {//监视属性},
}
</script>监视属性的使用场景
接口请求三秒后才能再次发起请求，记录当前时间为新值减去再次点击时的时间是否大于3秒，3秒后才可再次执行操作
监视属性的写法
watch监视属性需要计算，所以写法为配置对象watch: {}
<script>
export default {
data() {//data
return {}
},
computed: {//计算属性},
methods: {//方法},
watch: {//监视属性},
}
</script>监视属性可以监视属性
只要是属性都可以用watch来进行监视，例如data中的属性、computed中的计算属性都是属性
监视属性的配置参数
监视属性有handler、immediate、和deep
handler（有newValue,oldValue的形参）
handler函数在检测到监视的属性发生变化时自动调用
配置immediate:true时，立即执行一次时调用handler，handler函数的形参newValue值为默认值，oldValue为undefined，因为监测的属性还没有改变
<template>
<div>
<div>
<h2>今天天气很{{info}}</h2>–>
<button @click="isHot= !isHot;">切换天气</button>
</div>
</div>
</template>
<script>
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);
},
}
},
}
</script>immediate（默认值为false）立即调用监视属性方法
配置为true后即使检测的属性没有发生变化，handler函数也会调用一次
<template>
<div>
<div>
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
</div>
</template>
<script>
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)
},
}
},
}
</script>deep(默认为false)
配置depp:true时，可以深度监视属性里面的多级属性
//监视多级结构中某个属性的变化
<template>
<div>
<div>
<h2>今天天气很{{info}}</h2>
<button @click="numbers.a++">点击更改数量{{numbers.a}}</button>
<button @click="changeWeather">改变天气</button>
</div>
</div>
</template>
<script>
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);
}
}
}
}
</script>
//配置deep:true开启深度监视
<template>
<div>
<div>
<h2>今天天气很{{info}}</h2>
<button @click="numbers.a++">{{numbers.a}}</button>
<button @click="numbers.b++">{{numbers.b}}</button>
<button @click="changeWeather">改变天气</button>
</div>
</div>
</template>
<script>
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);
}
},
}
}
</script>监视属性的两种写法
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的简写函数
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |