学习vue3:监听器
目录
一，关于监听的概述
二，手动监听器（watch函数)
watch（）函数语法
监听基本数据类型
监听对象，对象属性
三，自动监听器（watchEffect函数）
watchEffect()函数语法
一，关于监听的概述
在前端界面，当数据发生变化时，对变化后的数据做出及时处理。这里我举一个生活上的例子
在我们学生时代，我们指导，当中午12点下课铃声响起时，就去吃饭。这如果套用“监听”的方式
是不是可以说，监听的数据是时间，当指向12点，就对变化后的时间做出反馈。
二，手动监听器（watch函数)
watch 是一个用于观察和响应Vue响应式系统中数据变化的方法。它允许你指定一个数据源（可以是响应式引用、计算属性、组件的属性等），当这个数据源的值发生变化时，你可以执行一些响应
watch（）函数语法
-
source：可以是一个响应式引用（ref）、响应式对象（reactive）、getter 函数或一个数组（包含多个监听源）。 -
callback：当监听的源发生变化时，会调用这个回调函数。回调函数接收两个参数：newValue和oldValue。 -
options：可选参数，用于配置watch的行为。常见的选项包括：-
immediate：布尔值，表示是否立即执行回调函数，默认为false。 -
代码
deep：布尔值，表示是否深度监听对象的变化，默认为false。
-
import { watch } from 'vue';watch(source, callback, options);示例
监听基本数据类型
<!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：回调函数
监听对象，对象属性
注意：如果监听的是复杂的数据，使用 回调函数
<!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：一个回调函数，用于触发回调函数执行。当依赖的响应式数据发生变化时，会调用这个回调函数。
watchEffect(effect, options)watchEffect函数 自动监听，没有设置监听对象，表示监听所有，通过条件判断，执行相关任务。
<!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>测试结果
