Vue 3分离了一个可以在nodejs后端操作的响应式库@vue/reactivity,可直接通过 npm 安装,独立于框架使用。
npm install @vue/reactivity示例代码
const { reactive, ref, computed, watchEffect } = require('@vue/reactivity')
// 创建响应式对象
const user = reactive({
name: 'John',
age: 30,
address: {
city: 'New York',
street: '123 Main St'
}
})
// 创建响应式原始值
const counter = ref(0)
// 创建计算属性
const fullInfo = computed(() => {
return `${user.name}, ${user.age}, ${user.address.city}`
})
// 监听响应式数据变化
watchEffect(() => {
console.log(`[Watcher] User info: ${fullInfo.value}`)
})
watchEffect(() => {
console.log(`[Watcher] Counter: ${counter.value}`)
})
// 修改响应式数据(会触发 watchers)
user.age = 31
counter.value++
// 嵌套属性修改也会触发响应
user.address.city = 'San Francisco'
// 计算属性会自动更新
console.log(`Full info: ${fullInfo.value}`)
// 输出:
// [Watcher] User info: John, 30, New York
// [Watcher] Counter: 0
// [Watcher] User info: John, 31, New York
// [Watcher] Counter: 1
// [Watcher] User info: John, 31, San Francisco
// Full info: John, 31, San Francisco 网友回复


