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

Watch数据监听

文章目录

普通应用

在Vue.js中，

watch

选项用于监视Vue实例的数据变化，并在数据变化时执行相应的操作。

watch

可以用于监听单个数据属性的变化，也可以用于监听嵌套对象或数组的变化。

1.1监听单个属性的变化：

<template><div><p>{{ message }}</p><inputv-model="messageInput"/></div></template><script>exportdefault{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><inputv-model="user.name"/></div></template><script>exportdefault{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>exportdefault{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>exportdefault{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';exportdefault{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>exportdefault{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';exportdefault{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应用中响应式地处理数据的变化。