1. vue侦听器-watch
可以侦听data/computed属性值改变
使用场景(作用):主动侦听data/computed变量"值"的变化
语法:
watch: {
变量名 (newVal, oldVal){
// 变量名对应值改变这里自动触发
}
}
例子:
<template>
<div>
<input type="text" v-model="name">
</div>
</template>
<script>
export default {
data(){
return {
name: ""
}
},
// 目标: 侦听到name值的改变
/*
语法:
watch: {
变量名 (newVal, oldVal){
// 变量名对应值改变这里自动触发
}
}
*/
watch: {
// newVal: 当前最新值
// oldVal: 上一刻值
name(newVal, oldVal){
console.log(newVal, oldVal);
}
}
}
</script>
<style>
</style>
想要侦听一个属性变化, 可使用侦听属性watch
2. vue侦听器-深度侦听和立即执行
侦听复杂类型, 或者立即执行侦听函数
语法:
watch: {
"要侦听的属性名": {
immediate: true, // 立即执行
deep: true, // 深度侦听复杂类型内变化
handler (newVal, oldVal) {
}
}
}
例子:
<template>
<div>
<input type="text" v-model="user.name">
<input type="text" v-model="user.age">
</div>
</template>
<script>
export default {
data(){
return {
user: {
name: "小白",
age: 18
}
}
},
// 目标: 侦听对象
/*
语法:
watch: {
变量名 (newVal, oldVal){
// 变量名对应值改变这里自动触发
},
变量名: {
handler(newVal, oldVal){
},
deep: true, // 深度侦听(对象里面层的值改变)
immediate: true // 立即侦听(网页打开handler执行一次)
}
}
*/
watch: { // 固定属性(设置侦听哪些属性)
user: { // 具体属性名(被侦听)
handler(newVal, oldVal){ // 固定触发此函数
console.log(newVal,oldVal);
},
immediate: true, // 马上侦听触发
deep: true // 深度侦听(侦听name和age值的改变)
}
}
}
</script>
总结: immediate立即侦听, deep深度侦听, handler固定方法触发