Vue 3 正式发布：Composition API 实战

等了两年，Vue 3 "One Piece" 在 9 月 18 日正式发布。用新 API 把去年设想的功能真正写了一遍。

完整功能示例：文章搜索

import { ref, reactive, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    const keyword = ref('') // 值类型用 ref，模板/JS 里访问要 .value
    const posts = ref([])
    const loading = ref(false)

    const filtered = computed(() => // 计算属性
      posts.value.filter(p => p.title.includes(keyword.value))
    )

    async function fetchPosts() {
      loading.value = true
      posts.value = await fetch('/api/posts').then(r => r.json())
      loading.value = false
    }

    watch(keyword, (val, old) => { // 侦听器，等价于 watch 选项
      console.log('关键词变化：', old, '→', val)
    })

    onMounted(fetchPosts) // 生命周期：onMounted/onUnmounted...

    return { keyword, filtered, loading } // 暴露给模板
  },
}

ref 还是 reactive

ref：可包装任意类型，模板自动解包，JS 中必须 .value
reactive：只用于对象，Proxy 代理，解构会丢失响应式（要配 toRefs）

const state = reactive({ name: 'a', age: 1 })
const { name } = state // name 不再响应式！
const { name: name2 } = toRefs(state) // 这样才安全

团队约定：独立原始值用 ref；一组相关状态用 reactive，返回时统一 toRefs。别混用得太随意。

相比 Vue 2 的其他变化

响应式从 Object.defineProperty 换成 Proxy（下一篇展开）
多根节点 Fragment、Teleport、Suspense
v-model 语法调整、移除 filter、事件 API 改为函数式
更小体积、Tree-shaking，TypeScript 支持重写

新项目可以放心上 Vue 3；老项目迁移官方提供了迁移构建版和工具辅助，不必一步到位。

Vue 3 正式发布：Composition API 实战

Vue 3 正式发布：Composition API 实战

完整功能示例：文章搜索

ref 还是 reactive

相比 Vue 2 的其他变化

评论0 条

发表评论