Vue 3 完全指南：响应式原理、组合式 API 与实战优化

// Vue 3响应式核心实现（简化版）

function reactive(target) {

  return new Proxy(target, {

    get(target, key) {

      track(target, key); // 收集依赖

      return Reflect.get(target, key);

    },

    set(target, key, value) {

      Reflect.set(target, key, value);

      trigger(target, key); // 触发更新

    }

  });

}

// 编译后带PatchFlag的VNode

createVNode('div', { id: 'app' }, \[

  createVNode('p', null, '静态文本', 1 /\* TEXT \*/),

  createVNode('p', null, ctx.message, 2 /\* PROPS \*/, \['message'])

])

\<!-- 组合式API：逻辑聚合 -->

\<script setup>

import { ref, onMounted } from 'vue'

// 状态

const user = ref(null)

const loading = ref(true)

// 方法

const fetchUser = async () => {

&#x20; loading.value = true

&#x20; user.value = await api.getUser()

&#x20; loading.value = false

}

// 生命周期

onMounted(fetchUser)

\</script>

const count = ref(0)

count.value++ // 触发更新

const user = reactive({ name: 'Vue' })

user.name = 'Vue 3' // 触发更新

const fullName = computed(() => \`\${user.firstName} \${user.lastName}\`)

// 监听ref

watch(count, (newVal, oldVal) => { ... })

// 监听对象属性

watch(() => user.name, (newVal) => { ... })

watchEffect(() => {

  // 自动监听user.name的变化

  console.log('Name changed:', user.name)

})

onMounted(() => {

  const timer = setInterval(updateData, 1000)

  // 组件卸载时清理

  onUnmounted(() => clearInterval(timer))

})

// useLocalStorage.js

import { ref, watchEffect } from 'vue'

export function useLocalStorage(key, defaultValue) {

  // 从localStorage读取初始值

  const value = ref(JSON.parse(localStorage.getItem(key)) || defaultValue)

  

  // 监听变化并同步到localStorage

  watchEffect(() => {

    localStorage.setItem(key, JSON.stringify(value.value))

  })

  

  return value

}

\<script setup>

import { useLocalStorage } from './useLocalStorage'

// 自动同步到localStorage的响应式状态

const theme = useLocalStorage('theme', 'light')

\</script>

\<!-- 父组件提供状态 -->

\<script setup>

import { reactive, provide } from 'vue'

const store = reactive({ count: 0, increment: () => store.count++ })

provide('store', store)

\</script>

\<!-- 子组件注入状态 -->

\<script setup>

import { inject } from 'vue'

const store = inject('store')

\</script>

// stores/cart.js

import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', {

  state: () => ({ items: \[] }),

  actions: {

    addItem(item) {

      this.items.push(item)

    }

  },

  getters: {

    totalPrice() {

      return this.items.reduce((sum, item) => sum + item.price, 0)

    }

  }

})

// router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const routes = \[

  { path: '/', component: () => import('@/views/Home.vue') },

  { path: '/user/:id', component: () => import('@/views/User.vue') }

]

const router = createRouter({

  history: createWebHistory(),

  routes

})

\<script setup>

import { useRoute, useRouter } from 'vue-router'

const route = useRoute() // 当前路由信息

const router = useRouter() // 路由操作方法

// 获取路由参数

console.log(route.params.id)

// 编程式导航

const goBack = () => router.back()

\</script>

// 全局前置守卫

router.beforeEach((to, from) => {

  // 未登录访问需要授权的页面时跳转登录页

  if (to.meta.requiresAuth && !isLogin()) {

    return '/login'

  }

})

\<KeepAlive>

&#x20; \<component :is="activeComponent" />

\</KeepAlive>

const HeavyComponent = defineAsyncComponent(() => 

  import('./HeavyComponent.vue')

)

\<!-- TodoList.vue -->

\<script setup>

import { useTodoStore } from '@/stores/todo'

import { computed } from 'vue'

const todoStore = useTodoStore()

const currentFilter = ref('all')

// 基于筛选条件的计算属性

const filteredTodos = computed(() => {

&#x20; switch(currentFilter.value) {

&#x20;   case 'done': return todoStore.todos.filter(t => t.done)

&#x20;   case 'active': return todoStore.todos.filter(t => !t.done)

&#x20;   default: return todoStore.todos

&#x20; }

})

\</script>