目录
一，关于监听的概述
在前端界面，当数据发生变化时，对变化后的数据做出及时处理。这里我举一个生活上的例子
在我们学生时代，我们指导，当中午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>测试结果
