class 4: vue.js 3监听器 watch

news2024/9/20 10:35:28

某些情况下需要监听某个响应式数据的变化，这时就需要使用监听器(watch)来实现了

watch的使用语法如下

选项：watch
类型：{ [key: string]: string | Function | Object | Array}
详解：watch属性是一个对象，该对象的键(key)是需要观察的表达式，值(value)可以是回调函数、方法名等。Vue.js 3实例会在实例化时调用$watch来遍历watch对象的每个属性

下面通过一个案例来演示watch的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        请输入问题：<input type="text" v-model="question">
        <div> {{ answer }}</div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    question: '',
                    answer: '',
                }
            },
            watch: {
                question: function (newValue, oldValue) {
                    console.log(`新value值: ${newValue}, 旧value值: ${oldValue}`)
                    this.questionAnswer()
                }
            },
            methods: {
                questionAnswer() {
                    this.answer = `你的问题是${this.question}? 答案: ahahahaha`
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>

上面使用的是watch的function语法，下面展示了一个对象语法的使用

watch: {
    question: {
        handler(newValue, oldValue) {
            console.log(`新value值: ${newValue}, 旧value值: ${oldValue}`)
            this.queryAnswer()
        }
    }
},

watch对象语法的常见配置选项有以下几种

handler:要监听的回调函数，当监听属性发生变化时会调用该函数
deep:是否深度监听对象或数组中每个属性的变化，默认是false
immediate:是否立即执行回调函数，默认值是false

handler选项

这是Vue.js 3中监听属性变化时的回调函数。当属性发生变化时，该函数会被调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <h2>{{ info.name }}</h2>
        <h2>{{ info.book.name }}</h2>
        <button @click="changeInfo">改变info</button>
        <button @click="changeInfoName">改变infoName</button>
        <button @click="changeInfoBookName">改变infoBookName</button>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    info: {
                        name: "clarence",
                        age: 18,
                        book: {
                            name: "harry potter"
                        }
                    }
                }
            },
            watch: {
                info: {
                    handler(newInfo, oldInfo) {
                        console.log(`newValue: ${newInfo}, oldValue: ${oldInfo}`)
                    }
                }
            },
            methods: {
                changeInfo() {
                    this.info = {
                        name: "liu",
                        age: 100,
                        book: {
                            name: "One hundred years of loneliness"
                        }
                    }
                },
                changeInfoName() {
                    this.info.name = "rose"
                },
                changeInfoBookName() {
                    this.info.book.name = "Vue"
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>

效果如下图，点击"改变info"之后，发现watch函数打印出结果，这说明调用到了watch函数，而当点击"改变infoName"和改变"infoBookName"按钮之后并没有调用到watch函数
这是因为默认情况下watch函数仅监听对info对象引用的变化，而不会监听其内部属性的变化，如果需要监听内部属性的变化，需要使用deep进行深度监听

deep

deep选项用于配置是否深度监听对象中属性的变化，修改watch函数如下

 watch: {
     info: {
         handler(newInfo, oldInfo) {
             console.log(`newValue: ${newInfo}, oldValue: ${oldInfo}`)
         },
         // 深度监听info对象的更新, info内部属性的改变均可被监听到
         deep: true
     }
 },

immediate

immediate选项可以让handler中定义的函数立即执行一次，默认情况下，该函数只在监听的数据发生变化时才会回调，像下面这样

 watch: {
     info: {
         handler(newInfo, oldInfo) {
             console.log(`newValue: ${newInfo}, oldValue: ${oldInfo}`)
         },
         // 深度监听info对象的更新, info内部属性的改变均可被监听到
         deep: true,
         // handler中定义的函数立即执行一次
         immediate: true,
     }
 },

可以实现的效果是每次刷新页面都会立即执行一次handler中定义的函数

此外，watch还可以只监听对象中的某个属性，比如上面的例子中，我只希望监听info中的name属性，那么watch可以这样写

 watch: {
     "info.name": {
         handler(newInfo, oldInfo) {
             console.log(`newValue: ${newInfo}, oldValue: ${oldInfo}`)
         },
         // 深度监听info对象的更新, info内部属性的改变均可被监听到
         deep: true,
         // handler中定义的函数立即执行一次
         immediate: true,
     }
 },