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

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监听单个属性的变化：

              
            
                
            {{ message }}
                
              
            
            
            export default {
              data() {
                return {
                  message: 'Hello, Vue!',
                  messageInput: '',
                };
              },
              watch: {
                // 监听 message 属性的变化
                message(newValue, oldValue) {
                  console.log('message 发生变化：', newValue, oldValue);
                },
              },
            };
            
            

            使用 watch 选项监听 message 属性的变化。每当 message 发生变化时，watch 中的回调函数将被调用，可以获取新值 newValue 和旧值 oldValue。

            
            （图片来源网络，侵删）

            1.2监听嵌套对象的变化：

              
            
                
            {{ user.name }}
                
              
            
            
            export default {
              data() {
                return {
                  user: {
                    name: 'John Doe',
                    age: 25,
                  },
                };
              },
              watch: {
                // 监听 user 对象的变化
                'user.name'(newValue, oldValue) {
                  console.log('user.name 发生变化：', newValue, oldValue);
                },
              },
            };
            
            

            监听user.name 属性的变化。注意，如果要监听嵌套属性，可以使用字符串形式的属性路径。

            1.3深度监听整个对象或数组：

              
            
                
            {{ items.join(', ') }}
                添加项
              
            
            
            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');
                },
              },
            };
            
            

            使用 deep: true 选项，以便深度监听整个 items 数组的变化。当数组中的项发生变化时，watch 中的回调函数将被调用。可用于响应式地处理数据的变化，执行一些逻辑或者触发其他操作。

            组件中应用(父子组件)

            在Vue.js中，使用watch选项可以方便地在父组件中监听子组件的数据变化，或者在子组件中监听父组件传递的props的变化。

            2.1在父组件中监听子组件的数据变化：

            子组件 Child.vue：

              
            
                
            {{ message }}
                更新消息
              
            
            
            export default {
              data() {
                return {
                  message: 'Hello from Child!',
                };
              },
              methods: {
                updateMessage() {
                  this.message = 'Updated message from Child!';
                },
              },
            };
            
            

            父组件 Parent.vue：

              
            
                
                
            父组件收到子组件消息：{{ childMessage }}
              
            
            
            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);
                },
              },
            };
            
            

            父组件通过在模板中使用子组件 ，并传递 child-message 属性，来与子组件进行通信。子组件中通过点击按钮更新 message 数据，并通过 $emit 方法触发 child-message-changed 事件，将新的消息传递给父组件。

            父组件中，通过监听 childMessage 属性的变化，可以在 watch 中捕获到子组件数据的变化。在 handleChildMessageChange 方法中，父组件也通过事件监听方式处理了子组件数据变化。

            2.2在子组件中监听父组件传递的props的变化：

            子组件 Child.vue：

              
            
                
            {{ message }}
              
            
            
            export default {
              props: ['parentMessage'],
              watch: {
                parentMessage(newParentMessage, oldParentMessage) {
                  console.log('子组件监听到父组件传递的props变化：', newParentMessage, oldParentMessage);
                },
              },
            };
            
            

            父组件 Parent.vue：

              
            
                
                更新父组件消息
              
            
            
            import ChildComponent from './Child.vue';
            export default {
              components: {
                ChildComponent,
              },
              data() {
                return {
                  parentMessage: 'Hello from Parent!',
                };
              },
              methods: {
                updateParentMessage() {
                  this.parentMessage = 'Updated message from Parent!';
                },
              },
            };
            
            

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

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