Vue监听属性详细讲解

在 Vue 中，可以使用 watch/$watch 方法监听数据、计算属性、事件和路由的变化，从而实现数据绑定、事件监听和路由控制等功能。需要根据实际情况选择合适的监听方式，避免过度监听或监听不必要的属性，从而提高应用性能和用户体验。

定义要监听的属性

定义要监听的属性： “message” 初始值设置为 “Hello, Vue!”

data() {return {message: 'Hello, Vue!'}
}

定义 watch

下面例子中，定义了一个名为 “message” 的 watch 属性，它监听 “message” 属性的变化，并在变化时输出变化前后的值

watch: {message(newValue, oldValue) {console.log('message changed from', oldValue, 'to', newValue)}
}

修改监听的属性值

将 “message” 属性的值从 “Hello, Vue!” 修改为 “Hello, World!”
由于我们已经在 watch 属性中定义了监听函数，因此在属性值发生变化时，watch 函数会被调用，并输出变化前后的值

this.message = 'Hello, World!'

watch 函数的参数包括 newValue 和 oldValue，分别表示属性的新值和旧值
在 watch 函数中，可以根据这些参数来执行相应的操作，例如发送网络请求、更新视图等

除了监听单个属性之外，Vue 还支持监听多个属性和深度监听属性的变化
可以通过设置 watch 属性中的深度监听选项和 immediate 选项来实现这些功能

watch: {// 监听多个属性'message': function (newValue, oldValue) { /* ... */ },'firstName': function (newValue, oldValue) { /* ... */ },'lastName': function (newValue, oldValue) { /* ... */ },// 深度监听属性'user.profile': {handler: function (newValue, oldValue) { /* ... */ },deep: true},// 立即调用监听函数'message': {handler: function (newValue, oldValue) { /* ... */ },immediate: true}
}

监听数组变化

要监听数组变化，可以使用 watch 或 $watch 方法。

data() {return {items: [1, 2, 3]}
}

使用 watch 方法监听数组变化：
当数组发生变化时，watch 函数会被调用，并输出变化前后的值

watch: {items: function (newValue, oldValue) {console.log('items changed from', oldValue, 'to', newValue)}
}

需要注意的是，watch 只能监听到数组的长度变化和 $set 方法的调用，无法监听到数组元素的变化
如果需要监听数组元素的变化，可以使用 Vue 提供的 $watch 方法。例如：

created() {this.$watch('items', function (newValue, oldValue) {console.log('items changed from', oldValue, 'to', newValue)}, { deep: true })
}

使用 $watch方法监听数组的变化，并设置深度监听选项由于数组的元素也是响应式的，因此当数组元素发生变化时，$watch 函数也会被调用

监听对象变化

除了数组，Vue 中的对象也是响应式的，可以使用 watch 或 $watch 方法来监听对象的变化

data() {return {user: {name: 'Tom',age: 18}}
}

我们可以使用 watch 方法监听对象变化：

watch: {'user.name': function (newValue, oldValue) {console.log('user.name changed from', oldValue, 'to', newValue)},'user.age': function (newValue, oldValue) {console.log('user.age changed from', oldValue, 'to', newValue)}
}

如果对象的属性是动态添加的，那么 watch 方法可能无法监听到该属性的变化
这时可以使用 $watch 方法来实现动态属性的监听。例如：

created() {this.$watch('user', function (newValue, oldValue) {console.log('user changed from', oldValue, 'to', newValue)}, { deep: true })
}

监听计算属性变化

计算属性是一种特殊的属性，它的值是根据其他属性计算得出的

computed: {fullName() {return this.firstName + ' ' + this.lastName}
}

计算属性的值是根据其他属性计算得出的，因此如果监听的属性发生变化，计算属性的值也会发生变化，从而触发 watch 函数的调用
如果不需要监听属性的变化，可以使用 computed 属性来定义普通的计算属性，而不是监听计算属性

watch: {fullName: function (newValue, oldValue) {console.log('fullName changed from', oldValue, 'to', newValue)}
}

监听事件变化

组件可以通过 $emit 方法触发自定义事件，如果要监听事件的变化
可以使用 $on 方法。
定义一个名为 “my-event” 的自定义事件，并在方法中使用 $emit 方法触发事件，并传递参数 “hello”

<template><button @click="onClick">Click me</button>
</template><script>
export default {methods: {onClick() {this.$emit('my-event', 'hello')}}
}
</script>

在父组件中使用 $on 方法监听自定义事件：

<template><div><my-component @my-event="onEvent"></my-component></div>
</template><script>
import MyComponent from './MyComponent.vue'export default {components: { MyComponent },methods: {onEvent(value) {console.log('event value:', value)}}
}
</script>

我们在父组件中使用 @my-event 属性监听自定义事件，并在方法中输出事件参数的值
当子组件触发自定义事件时，父组件的方法会被调用，并输出事件参数的值

需要注意的是，$on 方法只能在组件实例中使用，无法在 Vue 实例中使用。
如果需要在 Vue 实例中监听事件，可以使用 $emit 方法触发事件，并在 Vue 实例中使用 $on 方法监听事件。

监听路由变化

路由是一种控制页面跳转的机制，如果要监听路由的变化，可以使用 beforeRouteUpdate 钩子或 $route/$watch 方法

const routes = [{path: '/',component: Home},{path: '/about',component: About  }
]

定义了两个路由：“/” 和 “/about”。可以使用 beforeRouteUpdate 钩子监听路由变化：

export default {beforeRouteUpdate(to, from, next) {console.log('route changed from', from.path, 'to', to.path)next()}
}

在组件中使用 beforeRouteUpdate 钩子，监听路由变化，并在控制台输出变化前后的路由路径
需要注意的是，beforeRouteUpdate 钩子只能在路由对应的组件中使用

如果需要在 Vue 实例中监听路由变化，可以使用 $route/$watch 方法：

export default {created() {this.$watch('$route', (to, from) => {console.log('route changed from', from.path, 'to', to.path)})}
}

在 Vue 实例中使用 $watch 方法，监听 $route 属性的变化，并在控制台输出变化前后的路由路径

需要注意的是，$route/$watch 方法只能在 Vue 实例中使用，无法在路由对应的组件中使用。如果需要在路由对应的组件中监听路由变化，可以使用 beforeRouteUpdate 钩子