当数据发生变化时，及时做出响应处理
第一种使用方式
<template>
<div div id="app">
<input type="text" v-model="msg" />
<input type="text" v-model="obj.name" />
</div>
</template>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'hello，你好呀！',
obj: {
name: '1'
}
},
watch: {
msg() {
console.log('msg 的值改变啦~')
},
}
})
// 更改 msg 的值
vm.msg = 'hello~~~~';
</script>
第二种使用方式
<template>
<div div id="app">
<input type="text" v-model="msg" />
<input type="text" v-model="obj.name" />
</div>
</template>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'hello，你好呀！',
obj: {
name: '1'
}
},
watch: {
obj: {
deep: true, // 深度监听
immediate: true, // 页面进来就会立即执行
async: true, // obj 一变化就会执行一次 handler，会执行两次 handler（若设置成 false，只会执行一次 handler）
handler(oldVal, newVal) {
console.log('obj的值改变啦~' + oldVal, newVal)
}
}
}
})
// 更改 obj.name 的值
obj.name = '张三';
obj.name = '李四';
</script>
第三种使用方式
<template>
<div div id="app">
<input type="text" v-model="msg" />
<input type="text" v-model="obj.name" />
</div>
</template>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'hello，你好呀！',
obj: {
name: '1'
}
},
watch: {
obj: [
{
deep: true, // 深度监听
immediate: true, // 页面进来就会立即执行
handler: 'handler', // 会去 methods 中寻找对应的方法
},
{
deep: true, // 深度监听
immediate: true, // 页面进来就会立即执行
handler: 'handler', // 会去 methods 中寻找对应的方法
}
]
},
methods: {
handler(oldVal, newVal) {
console.log('obj的值改变啦~' + oldVal, newVal)
}
}
})
// 更改 obj.name 的值
obj.name = '张三';
obj.name = '李四';
</script>
打赏作者
您的打赏是我前进的动力
微信
支付宝
vue2.x✍️ filters
上一篇
评论
