您现在的位置是：首页 > 技术教程正文

前端Vue日常工作中--Watch数据监听

admin 阅读： 2024-03-28

后台-插件-广告管理-内容页头部广告（手机）

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-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>

父组件通过使用子组件并传递 parent-message 属性，将数据传递给子组件。在子组件中，通过 watch 监听 parentMessage 属性的变化，可以捕获到父组件传递的props的变化。

无论是在父组件中监听子组件的数据变化，还是在子组件中监听父组件传递的props的变化，watch 都是一个有用的工具，可以用于在Vue.js应用中响应式地处理数据的变化。

标签:

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）