学习vue3:监听器

一，关于监听的概述

二，手动监听器（watch函数))

watch（）函数语法

监听基本数据类型

监听对象，对象属性

三，自动监听器（watchEffect函数）

watchEffect()函数语法

一，关于监听的概述

在前端界面，当数据发生变化时，对变化后的数据做出及时处理。这里我举一个生活上的例子

在我们学生时代，我们指导，当中午12点下课铃声响起时，就去吃饭。这如果套用"监听"的方式

是不是可以说，监听的数据是时间，当指向12点，就对变化后的时间做出反馈。

二，手动监听器（watch函数)

watch 是一个用于观察和响应Vue响应式系统中数据变化的方法。它允许你指定一个数据源（可以是响应式引用、计算属性、组件的属性等），当这个数据源的值发生变化时，你可以执行一些响应

watch（）函数语法

source ：可以是一个响应式引用（ref）、响应式对象（reactive）、getter 函数或一个数组（包含多个监听源）。
callback ：当监听的源发生变化时，会调用这个回调函数。回调函数接收两个参数：newValue 和 oldValue。
options ：可选参数，用于配置 watch 的行为。常见的选项包括：
- immediate：布尔值，表示是否立即执行回调函数，默认为 false。
- 代码deep：布尔值，表示是否深度监听对象的变化，默认为 false。

html 复制代码

import { watch } from 'vue';

watch(source, callback, options);

示例

监听基本数据类型

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <select v-model="selectValue">
            <option value="0">请选择</option>
            <option value="100">西瓜</option>
            <option value="200">苹果</option>
            <option value="300">香蕉</option>
            <option value="400">草莓</option>
        </select>
      
    </div>
    <script type="module">
        import {createApp,ref,watch} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            setup(){
                const selectValue = ref(0)
         
                watch(selectValue,(e,e1,e2)=>{
                    console.log(e)
                    console.log(e1)
                    console.log(e2)
                })
                return {
                    selectValue,
                   
                }
            }
        }).mount('#app')
    </script>
</body> 
</html>

测试结果

通过watch函数监听selectValue(第一个参数）的变化，第二个参数是回调函数用于检测到数据发生变化后，做出处理！其中参数 e:当前数据值；e1：上一个数据值；e2：回调函数

监听对象，对象属性

注意：如果监听的是复杂的数据，使用回调函数

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
     
        <select v-model="obj.money">
            <option value="0">请选择</option>
            <option value="100">西瓜</option>
            <option value="200">苹果</option>
            <option value="300">香蕉</option>
            <option value="400">草莓</option>
        </select>
        <p>你选择了：{{obj.money}}</p>
    </div>
    <script type="module">
        import {createApp,ref,watch,reactive,watchEffect} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            setup(){
                const selectValue = ref(0)
                const obj=reactive({
                    name:"dj",
                    money:30
                })
           
                watch(()=>obj.money,(e,e1,e2)=>{
                 console.log(e)
                 console.log(e1)
                 console.log(e2)    

                })
                return {
                    obj
                }
            }
        }).mount('#app')
    </script>
</body> 
</html>

测试结果

注意到watch函数监听数据是对象的属性obj.money 的变化,e，e1,e2参数分别表示obj.money当前值，上一次值，以及回调函数本身

三，自动监听器（watchEffect函数）

watchEffect()函数语法

effect（必选） :回调函数，写监听后的逻辑代码

options（可选）

类型：Object

说明：配置选项，用于控制 watchEffect 的行为。常见的选项包括：

flush：控制回调函数的执行时机，默认值是 'pre'。
'pre'：在组件 DOM 更新之前执行回调函数。
'post'：在组件 DOM 更新之后执行回调函数。
'sync'：立即同步执行回调函数（默认行为）。
onTrack：一个回调函数，用于追踪依赖的响应式数据。当副作用函数访问响应式数据时，会调用这个回调函数。
onTrigger：一个回调函数，用于触发回调函数执行。当依赖的响应式数据发生变化时，会调用这个回调函数。

html 复制代码

watchEffect(effect, options)

watchEffect函数自动监听，没有设置监听对象，表示监听所有，通过条件判断，执行相关任务。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <select v-model="obj.money">
            <option value="0">请选择</option>
            <option value="100">西瓜</option>
            <option value="200">苹果</option>
            <option value="300">香蕉</option>
            <option value="400">草莓</option>
        </select>
        <p>你选择了：{{obj.money}}</p>
    </div>
    <script type="module">
        import {createApp,ref,watch,reactive,watchEffect} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            setup(){
                const selectValue = ref(0)
                const obj=reactive({
                    name:"dj",
                    money:30
                })
                watchEffect(()=>{
                    console.log("effect!!!!!!!!!!!!!!!!!")
             
                    if(obj.name=="100"){
                        console.log("西瓜")
                    }else if(obj.money=="200"){
                        console.log("苹果")
                    }else if(obj.money=="300"){
                        console.log("香蕉")
                    }else if(obj.money=="400"){
                        console.log("草莓")
                    }else{
                        console.log("请选择")
                        }
                    })
                  
                return {
                    selectValue,
                    obj
                }
            }
        }).mount('#app')
    </script>
</body> 
</html>

测试结果