reactive + effect 官方实现演示

这里会对 Vue 原生 reactivity 模块中的 reactive 和 effect 做一个最小、脱离模板系统的演示。

⚠️ 注意：本示例刻意绕开 Vue 的模板更新机制， 直接使用 effect 操作 DOM，用于理解响应式本质。

Demo 代码

<template>
    <div ref="wrapper"></div>
</template>

<script setup>
import { reactive, effect, onMounted, onBeforeUnmount, ref } from 'vue'

const wrapper = ref(null)

const state = reactive({
    name: '小李大人',
    age: 18
})

console.log(state)

let stopEffect

onMounted(() => {
    stopEffect = effect(() => {
        if (wrapper.value) {
            wrapper.value.innerHTML = `姓名：${state.name}，年龄：${state.age}`
        }
    })

    setTimeout(() => {
        state.age++
    }, 1000)
})

onBeforeUnmount(() => {
    stopEffect && stopEffect()
})
</script>

控制台输出: