class 4: vue.js 3监听器 watch

最新推荐文章于 2026-06-23 16:11:00 发布

原创

最新推荐文章于 2026-06-23 16:11:00 发布 · 1.6k 阅读

标签

#vue.js

收录于

某些情况下需要监听某个响应式数据的变化，这时就需要使用监听器(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: ''