一:基本使用--直接代码(直观)
watch: {
name(nv, ov) {
// nv:新值,ov:旧值
console.log(nv, ov);
},
},
作用:用于侦听指定的属性值的变化,只要侦听的属性值发生了变化就会触发侦听器,进行相应事件处理
二:进阶:深度监听
<template>
<div>
<input type="text" v-model="username" />
</div>
</template>
<script>
export default {
data() {
return {
username: "",
str: "",
};
},
// 深度监听
watch: {
obj: {
// handler处理函数(名字固定)
// 只要对象任意属性值发生变化就会自动触发这个函数进行处理
handler(nv) {
console.log(999);
},
// 添加深度监听:deep-开启
deep: true,
// immediate: true,说明它会默认开始就触发一次
immediate: true,
},
},
};
</script>
<style>
</style>
deep:true -- 会对对象中所有属性进行监听,只要对象任意属性值发生变化就会自动触发这个函数进行处理。
immediate:true -- 默认开始会触发执行一次
三:深度监听-单个属性 -- 必须引号包起来
watch: {
// 深度监听-单个属性--必须用''号包起来
"obj.price"() {
console.log("HXY");
},
},
注意细节:侦听器的名称必须和你想侦听的属性名称完全一致
总结:大致就是这些其他的也不是很重要