Vue 3 组合式 API 学习笔记

发表于 2026-08-25 · 分类：前端

ref 与 reactive

ref 用于定义基本类型的响应式数据，读取和修改时通过 .value 访问；reactive 用于对象类型的数据。

import { ref, reactive } from 'vue'

const count = ref(0)
const state = reactive({ name: '刘' })

count.value++

computed 根据已有响应式数据派生新值，只有依赖变化时才会重新计算。

import { computed } from 'vue'

const double = computed(() => count.value * 2)

watch 用于监听数据变化后执行副作用操作。

import { watch } from 'vue'

watch(count, (newVal, oldVal) => {
    console.log('count 变化：', oldVal, '→', newVal)
})

以上是组合式 API 最基础的三块内容，后续继续补充 setup、生命周期钩子与自定义组合函数的笔记。