vuewatch写法

对于Vue的watch，可以使用以下两种写法：

对象写法：

watch: {
// 监听firstName这个属性
firstName: {
handler(newVal, oldVal) {
console.log('firstName changed');
},
// 立即执行一次handler
immediate: true,
// 深度监听对象内部属性的变化
deep: true
},
// 监听lastName这个属性
lastName: function(newVal, oldVal) {
console.log('lastName changed');
}
}
登录后复制

函数写法：

watch: function() {
var self = this;
return {
// 监听firstName这个属性
firstName: function(newVal, oldVal) {
console.log('firstName changed');
},
// 监听lastName这个属性
lastName: function(newVal, oldVal) {
console.log('lastName changed');
}
}
}
登录后复制

相关问题

vue watch写法

Vue中的watch是用来监测数据变化并执行相应的操作的。watch的写法有多种方式，以下是几种常见的写法：

基础写法：
new Vue({
data: {
text: 'Hello World'
},
watch: {
text: function(newVal, oldVal) {
console.log('text发生变化：', newVal, oldVal);
}
}
})
登录后复制

对象写法：
new Vue({
data: {
text: 'Hello World'
},
watch: {
text: {
handler: function(newVal, oldVal) {
console.log('text发生变化：', newVal, oldVal);
},
immediate: true, // 是否在初始化时立即执行
deep: true // 是否深度监听对象的变化
}
}
})
登录后复制

字符串写法：
new Vue({
data: {
text: 'Hello World'
},
watch: {
'text': function(newVal, oldVal) {
console.log('text发生变化：', newVal, oldVal);
}
}
})
登录后复制

数组写法：
new Vue({
data: {
text: 'Hello World',
count: 0
},
watch: [
{
handler: function(newVal, oldVal) {
console.log('text发生变化：', newVal, oldVal);
},
deep: true
},
'count'
]
})
登录后复制

vue watch写法handle

Vue中的watch写法可以有多种方式。其中，handle方法是一种常规写法，也可以进一步优化。另外，Vue还提供了immediate属性和handler方法，用于在watch挂载完成后立即执行。以下是几种常见的Vue watch写法示例：

常规写法：data: {
title: '刘华强'
},
watch: {
title: function(New, Old) {
console.log(New, Old);
}
},
methods: {
handle: function(New, Old) {
console.log(New, Old);
}
}
登录后复制

使用immediate属性的简洁写法：data: {
num: 0,
sum: 10
},
watch: {
num: {
handler: function(newValue, oldValue) {
this.sum = newValue;
},
immediate: true
}
}
登录后复制

使用handler方法的写法：data: {
num: 0,
sum: 10
},
watch: {
num: {
handler: function(newValue, oldValue) {
this.sum = newValue;
}
}
}
登录后复制
以上是几种常见的Vue watch写法。你可以根据自己的需求选择适合的方式来处理数据的变化。