如何在petite-vue中通过纯JavaScript监听响应式对象变化？

核心原理 #

petite-vue 基于 Vue 的 @vue/reactivity 响应式系统，因此可以直接使用该系统提供的 watch 和 watchEffect 函数，在纯 JavaScript 中集中绑定监听器，无需在 HTML 中分散添加指令。

实现方法 #

1. 使用 watch 监听指定属性或对象 #

watch 允许你明确指定要监听的响应式属性或对象，当目标值变化时触发回调，还能获取新旧值。

示例代码：

// 引入petite-vue的响应式API
import { reactive, watch } from 'https://unpkg.com/petite-vue?module'

// 创建响应式对象
const state = reactive({
  count: 0,
  user: {
    name: 'Alice'
  }
})

// 监听单个属性
watch(() => state.count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 更新为 ${newVal}`)
  // 这里编写你的集中处理逻辑，比如更新全局状态、发送请求等
})

// 深层监听对象的所有属性变化
watch(() => state.user, (newUser, oldUser) => {
  console.log('用户信息发生变化', newUser)
}, { deep: true })

2. 使用 watchEffect 自动追踪依赖 #

watchEffect 会自动追踪回调中用到的响应式依赖，只要依赖发生变化就会执行回调，无需手动指定监听目标，适合需要监听多个关联属性的场景。

示例代码：

import { reactive, watchEffect } from 'https://unpkg.com/petite-vue?module'

const state = reactive({
  count: 0,
  total: 0
})

// 自动追踪state.count和state.total的变化
const stopListener = watchEffect(() => {
  console.log(`当前count: ${state.count}, total: ${state.total}`)
  // 执行你的集中处理逻辑
})

// 如需停止监听，调用返回的stop函数
// stopListener()

监听petite-vue实例中的状态 #

如果你的响应式状态是在petite-vue应用实例中定义的，同样可以直接在JS中监听：

import { createApp, watch } from 'https://unpkg.com/petite-vue?module'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

// 在实例外部监听状态变化
watch(() => app.count, (newVal) => {
  console.log('count更新:', newVal)
})

优势 #

• 集中管理：所有监听逻辑都在JS中集中实现，无需分散到HTML的v-on或v-effect指令中
• 全面覆盖：无论响应式状态是通过用户交互还是自动逻辑修改，只要状态变化就会触发回调
• 灵活控制：支持手动停止监听、深层监听等高级配置

内容的提问来源于stack exchange，提问作者Gabriel Cséfalvay