问题:vue2使用watch监视对象属性,但是这个监视只执行了第一次,后面就没反应了

错误版本

这个版本node.a的监视只会执行一次

data(){
	node:{},
},
watch:{
	"node.a":{
		handler(newVal,oldVal){
			console.log("node.a改变了")
		}
	},
}

正确版本

这个可以正常监视node.a

data(){
	node:{
		a:'',
	},
},
watch:{
	"node.a":{
		handler(newVal,oldVal){
			console.log("node.a改变了")
		}
	},
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 的 `watch` 是一种监听视图属性变化并执行特定操作的功能。它可以在组件实例上创建自定义的观察者,当监视的目标(通常是数据)发生变化时,执行指定的回调函数。以下是 `watch` 的基本用法: 1. **简单监听**: ```javascript data() { return { message: "Hello", } }, watch: { message(newVal, oldVal) { console.log(`Message updated from "${oldVal}" to "${newVal}"`); } }, // 当message属性改变时,会在控制台打印出新旧值 this.message = "World"; // 输出: Message updated from "Hello" to "World" ``` 2. **深度监听**: 如果你想监听嵌套对象或数组的变化,可以设置第二个参数为 `true` 进行深度监听: ```javascript watch: { nestedObject: { handler(newValue, oldValue) { console.log('nestedObject changed'); }, deep: true, }, } ``` 3. **立即执行回调**: `immediate` 参数可用于在首次创建时就执行一次回调: ```javascript watch: { someProp({ value }, { immediate }) { if (immediate && value !== 'initial') { console.log('Initial value detected!'); } }, initial: 'initial', immediate: true, } ``` 4. **函数形式的处理器**: 也可以传入一个函数作为处理器,该函数将接收两个参数:当前的新值和旧值: ```javascript watch: { age(age) { console.log('Age is now:', age); } }, methods: { updateAge(newAge) { this.age = newAge; } }, mounted() { this.updateAge(25); // 触发watcher } ``` 5. **取消监听**: 如果不再需要监听,可以使用 `unwatch` 方法取消: ```javascript const watcher = this.$watch('someProperty', callback); // ... later this.unwatch(watcher); // 移除监听 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值