vue全家桶进阶之路12:监听器 watch
在Vue2中,监听器(watch)用于监测数据的变化,并在数据变化时执行一些操作。监听器可以用来响应用户输入、观察数据变化、执行异步操作等。
监听器的使用方法如下:
-
在组件的
watch
选项中定义一个或多个监听器。 -
监听器由两部分组成:要监听的数据和数据变化时要执行的回调函数。
-
监听器的回调函数会在数据变化时被调用。回调函数接收两个参数:新值和旧值。
下面是一个简单的示例,演示如何在Vue2中使用监听器:
<template> <div> <input v-model="message"> <!-- 绑定输入框到message --> <p>{{ reversedMessage }}</p> </div> </template> <script> export default { data() { return { message: 'Hello Vue!', reversedMessage: '' } }, watch: { message(newVal, oldVal) { // 在watch选项中定义监听器,监听message的变化 this.reversedMessage = newVal.split('').reverse().join('') // 在回调函数中计算reversedMessage的值 } } } </script>
在上面的代码中,我们在组件的watch
选项中定义了一个监听器,用于监测message
数据的变化。当message
的值发生变化时,监听器的回调函数会被调用,从而重新计算reversedMessage
的值。
需要注意的是,在使用监听器时,应该避免在回调函数中修改监听的数据,因为这可能会导致无限循环的更新。如果需要修改监听的数据,应该使用计算属性或方法。
<template> <div> <input v-model="message"> <!-- 绑定输入框到message --> <p>{{ reversedMessage }}</p> </div> </template> <script> export default { data() { return { message: 'Hello Vue!' } }, computed: { reversedMessage() { return this.message.split('').reverse().join('') } }, watch: { reversedMessage(newVal, oldVal) { // 监听reversedMessage的变化 this.message = newVal.split('').reverse().join('') // 在回调函数中修改message的值 } } } </script>
在上面的代码中,我们在组件的watch
选项中定义了一个监听器,用于监测reversedMessage
数据的变化。当reversedMessage
的值发生变化时,监听器的回调函数会被调用,从而重新计算message
的值。
需要注意的是,在回调函数中修改监听的数据会导致无限循环的更新,因为修改数据会再次触发监听器。为了避免这种情况,我们可以使用计算属性来代替直接修改数据。在上面的代码中,我们使用计算属性reversedMessage
来计算反转后的字符串,从而避免了在回调函数中直接修改数据的情况。