当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
语法1:
监听:data内 计算属性 属性名 ---简单数据类型
watch:{
"被侦听得属性名"(newVal,oldVal) {
}
}
示例代码:
<template>
<div>
<input type="text" v-model="name">
</div>
</template>
<script>
export default {
data(){
return {
name: ""
}
},
watch: {
// newVal: 改变后的值
// oldVal: 改变前的值
name(newVal, oldVal){
console.log(newVal, oldVal);//打开控制台观察name打印结果
}
}
}
</script>
语法2:
监听:复杂数据类型 ----- immediate立即侦听, deep深度侦听, handler固定方法触发
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: 0
}
}
},
watch: {
user: {
deep: true,
immediate: true,
handler(newVal, oldVal){
// user里的对象
console.log(newVal, oldVal);
}
}
}
}
</script>
<style>
</style>