前端Vue日常工作中--Watch数据监听
狐说狐有理 2024-06-17 17:33:02 阅读 70
Watch数据监听
文章目录
Watch数据监听普通应用1.1监听单个属性的变化:1.2监听嵌套对象的变化:1.3深度监听整个对象或数组: 组件中应用(父子组件)2.1在父组件中监听子组件的数据变化:子组件 Child.vue:父组件 Parent.vue: 2.2在子组件中监听父组件传递的props的变化:子组件 Child.vue:父组件 Parent.vue:
普通应用
在Vue.js中,watch
选项用于监视Vue实例的数据变化,并在数据变化时执行相应的操作。watch
可以用于监听单个数据属性的变化,也可以用于监听嵌套对象或数组的变化。
1.1监听单个属性的变化:
<template> <div> <p>{ { message }}</p> <input v-model="messageInput" /> </div></template><script>export default { data() { return { message: 'Hello, Vue!', messageInput: '', }; }, watch: { // 监听 message 属性的变化 message(newValue, oldValue) { console.log('message 发生变化:', newValue, oldValue); }, },};</script>
使用 watch
选项监听 message
属性的变化。每当 message
发生变化时,watch
中的回调函数将被调用,可以获取新值 newValue
和旧值 oldValue
。
1.2监听嵌套对象的变化:
<template> <div> <p>{ { user.name }}</p> <input v-model="user.name" /> </div></template><script>export default { data() { return { user: { name: 'John Doe', age: 25, }, }; }, watch: { // 监听 user 对象的变化 'user.name'(newValue, oldValue) { console.log('user.name 发生变化:', newValue, oldValue); }, },};</script>
监听user.name
属性的变化。注意,如果要监听嵌套属性,可以使用字符串形式的属性路径。
1.3深度监听整个对象或数组:
<template> <div> <p>{ { items.join(', ') }}</p> <button @click="addItem">添加项</button> </div></template><script>export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3'], }; }, watch: { // 深度监听整个 items 数组的变化 items: { handler(newValue, oldValue) { console.log('items 数组发生变化:', newValue, oldValue); }, deep: true, }, }, methods: { addItem() { this.items.push('New Item'); }, },};</script>
使用 deep: true
选项,以便深度监听整个 items
数组的变化。当数组中的项发生变化时,watch
中的回调函数将被调用。可用于响应式地处理数据的变化,执行一些逻辑或者触发其他操作。
组件中应用(父子组件)
在Vue.js中,使用watch
选项可以方便地在父组件中监听子组件的数据变化,或者在子组件中监听父组件传递的props的变化。
2.1在父组件中监听子组件的数据变化:
子组件 Child.vue:
<template> <div> <p>{ { message }}</p> <button @click="updateMessage">更新消息</button> </div></template><script>export default { data() { return { message: 'Hello from Child!', }; }, methods: { updateMessage() { this.message = 'Updated message from Child!'; }, },};</script>
父组件 Parent.vue:
<template> <div> <child-component :child-message="childMessage" @child-message-changed="handleChildMessageChange" /> <p>父组件收到子组件消息:{ { childMessage }}</p> </div></template><script>import ChildComponent from './Child.vue';export default { components: { ChildComponent, }, data() { return { childMessage: '', }; }, methods: { handleChildMessageChange(newMessage) { console.log('父组件收到子组件消息变化:', newMessage); this.childMessage = newMessage; }, }, watch: { childMessage(newChildMessage, oldChildMessage) { console.log('父组件监听到子组件消息变化:', newChildMessage, oldChildMessage); }, },};</script>
父组件通过在模板中使用子组件 <child-component>
,并传递 child-message
属性,来与子组件进行通信。子组件中通过点击按钮更新 message
数据,并通过 $emit
方法触发 child-message-changed
事件,将新的消息传递给父组件。
父组件中,通过监听 childMessage
属性的变化,可以在 watch
中捕获到子组件数据的变化。在 handleChildMessageChange
方法中,父组件也通过事件监听方式处理了子组件数据变化。
2.2在子组件中监听父组件传递的props的变化:
子组件 Child.vue:
<template> <div> <p>{ { message }}</p> </div></template><script>export default { props: ['parentMessage'], watch: { parentMessage(newParentMessage, oldParentMessage) { console.log('子组件监听到父组件传递的props变化:', newParentMessage, oldParentMessage); }, },};</script>
父组件 Parent.vue:
<template> <div> <child-component :parent-message="parentMessage" /> <button @click="updateParentMessage">更新父组件消息</button> </div></template><script>import ChildComponent from './Child.vue';export default { components: { ChildComponent, }, data() { return { parentMessage: 'Hello from Parent!', }; }, methods: { updateParentMessage() { this.parentMessage = 'Updated message from Parent!'; }, },};</script>
父组件通过使用子组件 <child-component>
并传递 parent-message
属性,将数据传递给子组件。在子组件中,通过 watch
监听 parentMessage
属性的变化,可以捕获到父组件传递的props的变化。
无论是在父组件中监听子组件的数据变化,还是在子组件中监听父组件传递的props的变化,watch
都是一个有用的工具,可以用于在Vue.js应用中响应式地处理数据的变化。
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。