立即运行一个回调函数|副作用，同时自动感知代码依赖|追踪其中的数据源，并在其变化时重新执行回调函数
关注的是数据的状态变化，并不关注数据变化前后的值
需引入包 watchEffect
import { watchEffect } from 'vue'
function watchEffect(
effect: (onCleanup: OnCleanup) => void,
options?: WatchEffectOptions
): StopHandle
effect：回调函数，也叫副作用函数 side effect，即某种操作，如对外部可变数据或变量的修改，外部接口的调用等
onCleanup：回调函数的可选参数，是一个函数，用来注册清理回调；清理回调会在该副作用下一次执行前被调用
options：可选的选项，可以用来调整副作用的刷新时机或调试副作用的依赖
StopHandle：自动侦听器函数返回一个停止器函数，详见后续内容
watchEffect：会立即执行传入的函数，并自动追踪其中的所有响应式依赖。当这些依赖发生变化时，它会重新运行该函数
watch：需要显式指定要监听的响应式数据源（如 ref 或 reactive 对象），并且只在这些数据源变化时触发回调
watchEffect 也称自动侦听器，等同于使用了立即配置项 immediate；执行1-N次
watch 仅在侦听的数据源确实改变时才会触发回调；执行0-N次
watchEffect 更有效，只跟踪回调中被使用到的属性，而不是递归地跟踪所有的属性；但是不能获取旧值
watch 控制更为精细；旧值、新值、deep、immediate
[] 分析下面代码的功能
watchEffect((onCleanup) => {
str.value = msg.value.split('').reverse().join('');
onCleanup(()=>{
console.log('clean done');
})
})
[] 换肤 - 更新自定义属性实现
1. 准备2套变量
:root {
--bg-color: #fff;
--txt-color: #333;
}
html[data-theme='dark'] {
--bg-color: #333;
--txt-color: #fff;
}
2. 准备元素并添加事件，改变主题的值
<button @click="setMode">darkMode</button>
3. 准备数据并自动监听主题
import { ref, watchEffect } from 'vue'
let darkMode = ref('light')
const setMode = () => {
darkMode.value = darkMode.value === 'light' ? 'dark' : 'light'
}
watchEffect(() => {
document.documentElement.setAttribute('data-theme', darkMode.value)
// or
document.documentElement.dataset.theme = darkMode.value
})
[] 下拉菜单 - 副作用管理
使用下拉列表的双向绑定触发自动加载数据
应用1：门店/地址切换
应用2：加载不同类别的商品
<select v-model="selectedCategory">
<option value="electronics">电子产品</option>
<option value="clothing">服装</option>
<option value="books">书籍</option>
</select>
watchEffect(async () => {
try {
const response = await axios.get(`/api/items?category=${selectedCategory.value}`)
items.value = response.data
} catch (error) {
console.error(error)
}
})
[] 使用自动侦听改写 积分榜
[] 使用自动侦听改写 动态组件
[] 使用 watchEffect 自动侦听多个数据
ref 对象 - 自动侦听 name 和 age
let temp = ref(0)
let hei = ref(0)
watchEffect(() => {
//侦听1
if (temp.value > 10 || hei.value > 20) {
console.log('data is meet');
}
//侦听2
//侦听3
//侦听...
})
function tempCh() {
temp.value += 2
}
function heiCh() {
hei.value += 2
}