{"id":94343,"date":"2026-08-14T10:40:58","date_gmt":"2026-08-14T02:40:58","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/94343.html"},"modified":"2026-08-14T10:40:58","modified_gmt":"2026-08-14T02:40:58","slug":"vue-3-%e7%9f%a5%e8%af%86%e7%82%b9%e6%80%bb%e7%bb%93","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/94343.html","title":{"rendered":"Vue 3 \u77e5\u8bc6\u70b9\u603b\u7ed3"},"content":{"rendered":"

Vue 3 \u77e5\u8bc6\u70b9\u603b\u7ed3<\/h2>\n

\u6700\u540e\u66f4\u65b0：2026-07-29<\/p>\n

\n

\u76ee\u5f55<\/h3>\n
  • Vue 3 \u6838\u5fc3\u53d8\u5316\u6982\u89c8<\/li>\n
  • \u7ec4\u5408\u5f0f API（Composition API）<\/li>\n
  • \u54cd\u5e94\u5f0f\u7cfb\u7edf<\/li>\n
  • \u751f\u547d\u5468\u671f\u94a9\u5b50<\/li>\n
  • \u8ba1\u7b97\u5c5e\u6027\u4e0e\u4fa6\u542c\u5668<\/li>\n
  • \u7ec4\u4ef6\u7cfb\u7edf<\/li>\n
  • \u6a21\u677f\u8bed\u6cd5\u4e0e\u6307\u4ee4<\/li>\n
  • \u5185\u7f6e\u7ec4\u4ef6<\/li>\n
  • \u8def\u7531（Vue Router 4）<\/li>\n
  • \u72b6\u6001\u7ba1\u7406（Pinia）<\/li>\n
  • TypeScript \u96c6\u6210<\/li>\n
  • \u6027\u80fd\u4f18\u5316<\/li>\n
  • \u7f16\u8bd1\u4f18\u5316<\/li>\n
  • Teleport \/ Suspense \/ \u5f02\u6b65\u7ec4\u4ef6<\/li>\n
  • \u81ea\u5b9a\u4e49\u6307\u4ee4<\/li>\n
  • \u63d2\u4ef6\u7cfb\u7edf<\/li>\n
  • \u6e32\u67d3\u51fd\u6570\u4e0e JSX<\/li>\n
  • \u670d\u52a1\u7aef\u6e32\u67d3（SSR）<\/li>\n
  • \u6d4b\u8bd5<\/li>\n
  • \u5e38\u89c1\u8bbe\u8ba1\u6a21\u5f0f\u4e0e\u6700\u4f73\u5b9e\u8df5<\/li>\n
    \n

    1. Vue 3 \u6838\u5fc3\u53d8\u5316\u6982\u89c8<\/h3>\n

    1.1 \u4e0e Vue 2 \u7684\u4e3b\u8981\u533a\u522b<\/h4>\n\n\u7279\u6027Vue 2Vue 3<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    API \u98ce\u683c<\/td>\nOptions API<\/td>\nOptions API + Composition API<\/td>\n<\/tr>\n
    \u54cd\u5e94\u5f0f\u539f\u7406<\/td>\nObject.defineProperty<\/td>\nProxy<\/td>\n<\/tr>\n
    \u591a\u6839\u8282\u70b9<\/td>\n\u4e0d\u652f\u6301（\u9700\u552f\u4e00\u6839\u8282\u70b9）<\/td>\n\u652f\u6301 Fragment<\/td>\n<\/tr>\n
    \u5168\u5c40 API<\/td>\nVue.xxx \u6302\u8f7d<\/td>\ncreateApp() \u5e94\u7528\u5b9e\u4f8b<\/td>\n<\/tr>\n
    \u72b6\u6001\u7ba1\u7406<\/td>\nVuex<\/td>\nPinia（\u5b98\u65b9\u63a8\u8350）<\/td>\n<\/tr>\n
    \u8def\u7531<\/td>\nVue Router 3<\/td>\nVue Router 4<\/td>\n<\/tr>\n
    TypeScript<\/td>\n\u652f\u6301\u8f83\u5f31<\/td>\n\u539f\u751f TS \u7f16\u5199，\u4e00\u7b49\u652f\u6301<\/td>\n<\/tr>\n
    \u5305\u4f53\u79ef<\/td>\n~23KB<\/td>\n~10KB（tree-shaking）<\/td>\n<\/tr>\n
    \u6e32\u67d3\u6027\u80fd<\/td>\n\u57fa\u7ebf<\/td>\n\u7ea6 1.3~2 \u500d\u63d0\u5347<\/td>\n<\/tr>\n
    v-model<\/td>\n\u4ec5\u4e00\u4e2a<\/td>\n\u591a\u4e2a v-model<\/td>\n<\/tr>\n
    \u8fc7\u6e21\u7c7b\u540d<\/td>\nv-enter<\/td>\nv-enter-from<\/td>\n<\/tr>\n
    \u8fc7\u6ee4\u5668<\/td>\n\u652f\u6301<\/td>\n\u5df2\u79fb\u9664<\/td>\n<\/tr>\n
    $on\/$off\/$once<\/td>\n\u652f\u6301<\/td>\n\u5df2\u79fb\u9664（\u7528 mitt \u7b49\u66ff\u4ee3）<\/td>\n<\/tr>\n
    \u51fd\u6570\u5f0f\u7ec4\u4ef6<\/td>\n\u652f\u6301<\/td>\n\u4ec5\u4fdd\u7559\u51fd\u6570\u5f0f\u5199\u6cd5，\u6027\u80fd\u4f18\u52bf\u6d88\u5931<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    1.2 \u521b\u5efa\u5e94\u7528<\/h4>\n

    \/\/ Vue 3<\/span>
    \nimport<\/span> {<\/span> createApp }<\/span> from<\/span> 'vue'<\/span>
    \nimport<\/span> App from<\/span> '.\/App.vue'<\/span><\/p>\n

    const<\/span> app =<\/span> createApp<\/span>(<\/span>App)<\/span>
    \napp.<\/span>use<\/span>(<\/span>router)<\/span>
    \napp.<\/span>use<\/span>(<\/span>pinia)<\/span>
    \napp.<\/span>mount<\/span>(<\/span>'#app'<\/span>)<\/span><\/p>\n

    1.3 \u5168\u5c40 API \u53d8\u66f4<\/h4>\n

    \/\/ Vue 2: Vue.component \/ Vue.directive \/ Vue.mixin<\/span>
    \n\/\/ Vue 3: \u6302\u5728 app \u5b9e\u4f8b\u4e0a<\/span>
    \napp.<\/span>component<\/span>(<\/span>'MyComp'<\/span>,<\/span> MyComp)<\/span>
    \napp.<\/span>directive<\/span>(<\/span>'focus'<\/span>,<\/span> {<\/span> mounted<\/span>(<\/span>el<\/span>)<\/span> {<\/span> el.<\/span>focus<\/span>(<\/span>)<\/span> }<\/span> }<\/span>)<\/span>
    \napp.<\/span>mixin<\/span>(<\/span>{<\/span> \/* … *\/<\/span> }<\/span>)<\/span>
    \napp.<\/span>config.<\/span>globalProperties.<\/span>$http =<\/span> axios
    \napp.<\/span>config.<\/span>errorHandler<\/span> =<\/span> (<\/span>err<\/span>)<\/span> =><\/span> {<\/span> \/* … *\/<\/span> }<\/span><\/p>\n

    \n

    2. \u7ec4\u5408\u5f0f API（Composition API）<\/h3>\n

    2.1 setup() \u51fd\u6570<\/h4>\n

    <script setup>
    \n\/\/ <script setup> \u662f\u8bed\u6cd5\u7cd6，\u65e0\u9700 return，\u9876\u5c42\u53d8\u91cf\/\u51fd\u6570\u81ea\u52a8\u66b4\u9732\u7ed9\u6a21\u677f
    \nimport { ref, computed, onMounted } from 'vue'<\/p>\n

    const count = ref(0)
    \nconst double = computed(() => count.value * 2)<\/p>\n

    function increment() {
    \n count.value++
    \n}<\/p>\n

    onMounted(() => {
    \n console.log('mounted')
    \n})
    \n<\/script><\/p>\n

    \u666e\u901a setup() \u5199\u6cd5：<\/p>\n

    export<\/span> default<\/span> {<\/span>
    \n setup<\/span>(<\/span>props,<\/span> {<\/span> emit,<\/span> expose,<\/span> slots,<\/span> attrs }<\/span><\/span>)<\/span> {<\/span>
    \n const<\/span> count =<\/span> ref<\/span>(<\/span>0<\/span>)<\/span>
    \n \/\/ \u5fc5\u987b return \u66b4\u9732\u7ed9\u6a21\u677f<\/span>
    \n return<\/span> {<\/span> count }<\/span>
    \n }<\/span>
    \n}<\/span><\/p>\n

    2.2 \u7ec4\u5408\u5f0f\u51fd\u6570（Composables）<\/h4>\n

    \u5c06\u53ef\u590d\u7528\u903b\u8f91\u62bd\u53d6\u4e3a\u51fd\u6570，\u4ee5 use \u5f00\u5934\u547d\u540d：<\/p>\n

    \/\/ useCounter.js<\/span>
    \nimport<\/span> {<\/span> ref }<\/span> from<\/span> 'vue'<\/span><\/p>\n

    export<\/span> function<\/span> useCounter<\/span>(<\/span>initial =<\/span> 0<\/span><\/span>)<\/span> {<\/span>
    \n const<\/span> count =<\/span> ref<\/span>(<\/span>initial)<\/span>
    \n const<\/span> increment<\/span> =<\/span> (<\/span>)<\/span> =><\/span> count.<\/span>value++<\/span>
    \n const<\/span> decrement<\/span> =<\/span> (<\/span>)<\/span> =><\/span> count.<\/span>value—<\/span>
    \n const<\/span> reset<\/span> =<\/span> (<\/span>)<\/span> =><\/span> (<\/span>count.<\/span>value =<\/span> initial)<\/span>
    \n return<\/span> {<\/span> count,<\/span> increment,<\/span> decrement,<\/span> reset }<\/span>
    \n}<\/span><\/p>\n

    <script setup>
    \nimport { useCounter } from '.\/useCounter'
    \nconst { count, increment } = useCounter(10)
    \n<\/script><\/p>\n

    \u5e38\u7528\u7ec4\u5408\u5f0f\u51fd\u6570\u793a\u4f8b：<\/p>\n

    \/\/ useMouse.js – \u8ffd\u8e2a\u9f20\u6807\u4f4d\u7f6e<\/span>
    \nimport<\/span> {<\/span> ref,<\/span> onMounted,<\/span> onUnmounted }<\/span> from<\/span> 'vue'<\/span><\/p>\n

    export<\/span> function<\/span> useMouse<\/span>(<\/span>)<\/span> {<\/span>
    \n const<\/span> x =<\/span> ref<\/span>(<\/span>0<\/span>)<\/span>
    \n const<\/span> y =<\/span> ref<\/span>(<\/span>0<\/span>)<\/span><\/p>\n

    function<\/span> update<\/span>(<\/span>e<\/span>)<\/span> {<\/span>
    \n x.<\/span>value =<\/span> e.<\/span>pageX
    \n y.<\/span>value =<\/span> e.<\/span>pageY
    \n }<\/span><\/p>\n

    onMounted<\/span>(<\/span>(<\/span>)<\/span> =><\/span> window.<\/span>addEventListener<\/span>(<\/span>'mousemove'<\/span>,<\/span> update)<\/span>)<\/span>
    \n onUnmounted<\/span>(<\/span>(<\/span>)<\/span> =><\/span> window.<\/span>removeEventListener<\/span>(<\/span>'mousemove'<\/span>,<\/span> update)<\/span>)<\/span><\/p>\n

    return<\/span> {<\/span> x,<\/span> y }<\/span>
    \n}<\/span><\/p>\n

    \/\/ useFetch.js – \u6570\u636e\u8bf7\u6c42<\/span>
    \nimport<\/span> {<\/span> ref,<\/span> watchEffect,<\/span> toValue }<\/span> from<\/span> 'vue'<\/span><\/p>\n

    export<\/span> function<\/span> useFetch<\/span>(<\/span>url<\/span>)<\/span> {<\/span>
    \n const<\/span> data =<\/span> ref<\/span>(<\/span>null<\/span>)<\/span>
    \n const<\/span> error =<\/span> ref<\/span>(<\/span>null<\/span>)<\/span>
    \n const<\/span> isPending =<\/span> ref<\/span>(<\/span>true<\/span>)<\/span><\/p>\n

    watchEffect<\/span>(<\/span>async<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
    \n isPending.<\/span>value =<\/span> true<\/span>
    \n data.<\/span>value =<\/span> null<\/span>
    \n error.<\/span>value =<\/span> null<\/span>
    \n try<\/span> {<\/span>
    \n const<\/span> res =<\/span> await<\/span> fetch<\/span>(<\/span>toValue<\/span>(<\/span>url)<\/span>)<\/span>
    \n if<\/span> (<\/span>!<\/span>res.<\/span>ok)<\/span> throw<\/span> new<\/span> Error<\/span>(<\/span>res.<\/span>statusText)<\/span>
    \n data.<\/span>value =<\/span> await<\/span> res.<\/span>json<\/span>(<\/span>)<\/span>
    \n }<\/span> catch<\/span> (<\/span>e)<\/span> {<\/span>
    \n error.<\/span>value =<\/span> e
    \n }<\/span> finally<\/span> {<\/span>
    \n isPending.<\/span>value =<\/span> false<\/span>
    \n }<\/span>
    \n }<\/span>)<\/span><\/p>\n

    return<\/span> {<\/span> data,<\/span> error,<\/span> isPending }<\/span>
    \n}<\/span><\/p>\n

    2.3 provide \/ inject（\u4f9d\u8d56\u6ce8\u5165）<\/h4>\n

    \/\/ \u7236\u7ec4\u4ef6<\/span>
    \nimport<\/span> {<\/span> provide,<\/span> ref,<\/span> readonly }<\/span> from<\/span> 'vue'<\/span><\/p>\n

    const<\/span> count =<\/span> ref<\/span>(<\/span>0<\/span>)<\/span>
    \nprovide<\/span>(<\/span>'count'<\/span>,<\/span> readonly<\/span>(<\/span>count)<\/span>)<\/span> \/\/ \u53ea\u8bfb\u6ce8\u5165<\/span>
    \nprovide<\/span>(<\/span>'increment'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> count.<\/span>value++<\/span>)<\/span> \/\/ \u6ce8\u5165\u65b9\u6cd5<\/span><\/p>\n

    \/\/ \u4e5f\u53ef\u7528 Symbol \/ InjectionKey \u505a\u7c7b\u578b\u5b89\u5168<\/span>
    \nexport<\/span> const<\/span> CountKey =<\/span> Symbol<\/span>(<\/span>'count'<\/span>)<\/span>
    \nprovide<\/span>(<\/span>CountKey,<\/span> count)<\/span><\/p>\n

    \/\/ \u5b50\u7ec4\u4ef6（\u4efb\u610f\u6df1\u5ea6）<\/span>
    \nimport<\/span> {<\/span> inject }<\/span> from<\/span> 'vue'<\/span>
    \nconst<\/span> count =<\/span> inject<\/span>(<\/span>'count'<\/span>,<\/span> 0<\/span>)<\/span> \/\/ \u7b2c\u4e8c\u4e2a\u53c2\u6570\u4e3a\u9ed8\u8ba4\u503c<\/span><\/p>\n

    \n

    3. \u54cd\u5e94\u5f0f\u7cfb\u7edf<\/h3>\n

    3.1 \u6838\u5fc3 API<\/h4>\n

    ref()<\/h5>\n

    import<\/span> {<\/span> ref }<\/span> from<\/span> 'vue'<\/span><\/p>\n

    const<\/span> count =<\/span> ref<\/span>(<\/span>0<\/span>)<\/span> \/\/ \u57fa\u672c\u7c7b\u578b<\/span>
    \ncount.<\/span>value++<\/span> \/\/ \u901a\u8fc7 .value \u8bbf\u95ee\/\u4fee\u6539<\/span><\/p>\n

    const<\/span> obj =<\/span> ref<\/span>(<\/span>{<\/span> a<\/span>:<\/span> 1<\/span> }<\/span>)<\/span> \/\/ \u5bf9\u8c61\u4e5f\u53ef\u4ee5，\u5185\u90e8\u7528 reactive \u5305\u88c5<\/span>
    \nobj.<\/span>value.<\/span>a =<\/span> 2<\/span><\/p>\n

    \/\/ \u6a21\u677f\u4e2d\u81ea\u52a8\u89e3\u5305，\u65e0\u9700 .value<\/span>
    \n\/\/ <p>{{ count }}<\/p><\/span><\/p>\n

    reactive()<\/h5>\n

    import<\/span> {<\/span> reactive }<\/span> from<\/span> 'vue'<\/span><\/p>\n

    const<\/span> state =<\/span> reactive<\/span>(<\/span>{<\/span>
    \n count<\/span>:<\/span> 0<\/span>,<\/span>
    \n nested<\/span>:<\/span> {<\/span> deep<\/span>:<\/span> true<\/span> }<\/span>
    \n}<\/span>)<\/span><\/p>\n

    state.<\/span>count++<\/span> \/\/ \u76f4\u63a5\u4fee\u6539，\u65e0\u9700 .value<\/span>
    \nstate.<\/span>nested.<\/span>deep \/\/ \u6df1\u5c42\u4e5f\u662f\u54cd\u5e94\u5f0f\u7684<\/span><\/p>\n

    \/\/ \u26a0\ufe0f \u4e0d\u80fd\u89e3\u6784，\u5426\u5219\u4e22\u5931\u54cd\u5e94\u6027<\/span>
    \n\/\/ const { count } = state \/\/ \u274c count \u4e0d\u518d\u662f\u54cd\u5e94\u5f0f<\/span><\/p>\n

    ref vs reactive \u9009\u62e9<\/h5>\n\n\u573a\u666f\u63a8\u8350<\/tr>\n\n\n\n\n\n
    \u57fa\u672c\u7c7b\u578b（number\/string\/boolean）<\/td>\nref<\/td>\n<\/tr>\n
    \u9700\u8981\u6574\u4f53\u66ff\u6362\u7684\u5bf9\u8c61<\/td>\nref<\/td>\n<\/tr>\n
    \u8868\u5355\u7b49\u56fa\u5b9a\u7ed3\u6784\u7684\u5bf9\u8c61<\/td>\nreactive<\/td>\n<\/tr>\n
    \u901a\u7528 \/ \u4e0d\u786e\u5b9a<\/td>\nref（\u66f4\u5b89\u5168）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    3.2 \u89e3\u6784\u4fdd\u6301\u54cd\u5e94\u6027<\/h4>\n

    import<\/span> {<\/span> reactive,<\/span> toRefs,<\/span> toRef }<\/span> from<\/span> 'vue'<\/span><\/p>\n

    const<\/span> state =<\/span> reactive<\/span>(<\/span>{<\/span> name<\/span>:<\/span> 'Vue'<\/span>,<\/span> version<\/span>:<\/span> 3<\/span> }<\/span>)<\/span><\/p>\n

    \/\/ toRefs：\u6574\u4f53\u89e3\u6784<\/span>
    \nconst<\/span> {<\/span> name,<\/span> version }<\/span> =<\/span> toRefs<\/span>(<\/span>state)<\/span> \/\/ \u6bcf\u4e2a\u90fd\u662f ref<\/span><\/p>\n

    \/\/ toRef：\u5355\u4e2a\u5c5e\u6027<\/span>
    \nconst<\/span> nameRef =<\/span> toRef<\/span>(<\/span>state,<\/span> 'name'<\/span>)<\/span><\/p>\n

    3.3 \u53ea\u8bfb\u4e0e\u6d45\u5c42<\/h4>\n

    import<\/span> {<\/span> readonly,<\/span> shallowRef,<\/span> shallowReactive,<\/span> shallowReadonly,<\/span> triggerRef }<\/span> from<\/span> 'vue'<\/span><\/p>\n

    const<\/span> original =<\/span> reactive<\/span>(<\/span>{<\/span> count<\/span>:<\/span> 0<\/span> }<\/span>)<\/span>
    \nconst<\/span> copy =<\/span> readonly<\/span>(<\/span>original)<\/span>
    \n\/\/ copy.count++ \/\/ \u274c \u8b66\u544a，\u4e0d\u53ef\u4fee\u6539<\/span><\/p>\n

    const<\/span> shallow =<\/span> shallowRef<\/span>(<\/span>{<\/span> nested<\/span>:<\/span> {<\/span> count<\/span>:<\/span> 0<\/span> }<\/span> }<\/span>)<\/span>
    \n\/\/ shallow.value.nested.count++ \/\/ \u274c \u4e0d\u89e6\u53d1\u66f4\u65b0<\/span>
    \nshallow.<\/span>value =<\/span> {<\/span> nested<\/span>:<\/span> {<\/span> count<\/span>:<\/span> 1<\/span> }<\/span> }<\/span> \/\/ \u2705 \u66ff\u6362\u6574\u4e2a .value \u624d\u89e6\u53d1<\/span><\/p>\n

    \/\/ \u624b\u52a8\u89e6\u53d1 shallowRef \u66f4\u65b0<\/span>
    \ntriggerRef<\/span>(<\/span>shallow)<\/span><\/p>\n

    3.4 \u54cd\u5e94\u5f0f\u539f\u7406（Proxy）<\/h4>\n

    reactive(obj)
    \n \u2192 new Proxy(obj, {
    \n get(target, key, receiver) {
    \n track(target, key) \/\/ \u6536\u96c6\u4f9d\u8d56
    \n const res = Reflect.get(target, key, receiver)
    \n return isObject(res) ? reactive(res) : res \/\/ \u60f0\u6027\u6df1\u5c42\u4ee3\u7406
    \n },
    \n set(target, key, value, receiver) {
    \n const oldVal = target[key]
    \n const res = Reflect.set(target, key, value, receiver)
    \n if (oldVal !== value) trigger(target, key) \/\/ \u89e6\u53d1\u66f4\u65b0
    \n return res
    \n },
    \n deleteProperty(target, key) { … }
    \n })<\/p>\n

    \u4f18\u52bf：<\/p>\n

      \n
    • \u53ef\u68c0\u6d4b\u5c5e\u6027\u65b0\u589e\/\u5220\u9664<\/li>\n
    • \u53ef\u68c0\u6d4b\u6570\u7ec4\u7d22\u5f15\/length \u53d8\u5316<\/li>\n
    • \u60f0\u6027\u6df1\u5c42\u4ee3\u7406（\u8bbf\u95ee\u65f6\u624d\u4ee3\u7406\u5b50\u5bf9\u8c61），\u6027\u80fd\u66f4\u597d<\/li>\n<\/ul>\n

      3.5 \u54cd\u5e94\u5f0f\u5de5\u5177\u51fd\u6570<\/h4>\n

      import<\/span> {<\/span> isRef,<\/span> isReactive,<\/span> isReadonly,<\/span> isProxy,<\/span> toRaw,<\/span> markRaw,<\/span> customRef }<\/span> from<\/span> 'vue'<\/span><\/p>\n

      isRef<\/span>(<\/span>ref<\/span>(<\/span>0<\/span>)<\/span>)<\/span> \/\/ true<\/span>
      \nisReactive<\/span>(<\/span>reactive<\/span>(<\/span>{<\/span>}<\/span>)<\/span>)<\/span> \/\/ true<\/span>
      \nisProxy<\/span>(<\/span>reactive<\/span>(<\/span>{<\/span>}<\/span>)<\/span>)<\/span> \/\/ true<\/span><\/p>\n

      \/\/ toRaw：\u83b7\u53d6\u539f\u59cb\u5bf9\u8c61（\u8df3\u8fc7\u4ee3\u7406）<\/span>
      \nconst<\/span> raw =<\/span> toRaw<\/span>(<\/span>state)<\/span><\/p>\n

      \/\/ markRaw：\u6807\u8bb0\u5bf9\u8c61\u6c38\u4e0d\u8f6c\u4e3a\u54cd\u5e94\u5f0f（\u9002\u5408\u7b2c\u4e09\u65b9\u5e93\u5b9e\u4f8b）<\/span>
      \nconst<\/span> chart =<\/span> markRaw<\/span>(<\/span>new<\/span> ECharts<\/span>(<\/span>)<\/span>)<\/span><\/p>\n

      \/\/ customRef：\u81ea\u5b9a\u4e49 ref（\u5982\u9632\u6296）<\/span>
      \nfunction<\/span> useDebouncedRef<\/span>(<\/span>value,<\/span> delay =<\/span> 200<\/span><\/span>)<\/span> {<\/span>
      \n let<\/span> timeout
      \n return<\/span> customRef<\/span>(<\/span>(<\/span>track,<\/span> trigger<\/span>)<\/span> =><\/span> (<\/span>{<\/span>
      \n get<\/span>(<\/span>)<\/span> {<\/span>
      \n track<\/span>(<\/span>)<\/span>
      \n return<\/span> value
      \n }<\/span>,<\/span>
      \n set<\/span>(<\/span>newValue)<\/span> {<\/span>
      \n clearTimeout<\/span>(<\/span>timeout)<\/span>
      \n timeout =<\/span> setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
      \n value =<\/span> newValue
      \n trigger<\/span>(<\/span>)<\/span>
      \n }<\/span>,<\/span> delay)<\/span>
      \n }<\/span>
      \n }<\/span>)<\/span>)<\/span>
      \n}<\/span><\/p>\n

      \n

      4. \u751f\u547d\u5468\u671f\u94a9\u5b50<\/h3>\n

      4.1 \u9009\u9879\u5f0f vs \u7ec4\u5408\u5f0f\u5bf9\u7167<\/h4>\n\nOptions APIComposition API\u8bf4\u660e<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      beforeCreate<\/td>\nsetup() \u672c\u8eab<\/td>\nsetup \u5728\u6b64\u9636\u6bb5\u6267\u884c<\/td>\n<\/tr>\n
      created<\/td>\nsetup() \u672c\u8eab<\/td>\n<\/td>\n<\/tr>\n
      beforeMount<\/td>\nonBeforeMount<\/td>\n<\/td>\n<\/tr>\n
      mounted<\/td>\nonMounted<\/td>\nDOM \u5df2\u6302\u8f7d<\/td>\n<\/tr>\n
      beforeUpdate<\/td>\nonBeforeUpdate<\/td>\n<\/td>\n<\/tr>\n
      updated<\/td>\nonUpdated<\/td>\n<\/td>\n<\/tr>\n
      beforeUnmount<\/td>\nonBeforeUnmount<\/td>\n<\/td>\n<\/tr>\n
      unmounted<\/td>\nonUnmounted<\/td>\n\u6e05\u7406\u526f\u4f5c\u7528<\/td>\n<\/tr>\n
      errorCaptured<\/td>\nonErrorCaptured<\/td>\n<\/td>\n<\/tr>\n
      renderTracked<\/td>\nonRenderTracked<\/td>\n\u8c03\u8bd5：\u4f9d\u8d56\u8ffd\u8e2a<\/td>\n<\/tr>\n
      renderTriggered<\/td>\nonRenderTriggered<\/td>\n\u8c03\u8bd5：\u89e6\u53d1\u66f4\u65b0<\/td>\n<\/tr>\n
      activated<\/td>\nonActivated<\/td>\nKeepAlive \u6fc0\u6d3b<\/td>\n<\/tr>\n
      deactivated<\/td>\nonDeactivated<\/td>\nKeepAlive \u505c\u7528<\/td>\n<\/tr>\n
      serverPrefetch<\/td>\nonServerPrefetch<\/td>\nSSR \u4e13\u7528<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      4.2 \u4f7f\u7528\u793a\u4f8b<\/h4>\n

      <script setup>
      \nimport { onMounted, onUnmounted, onUpdated } from 'vue'<\/p>\n

      onMounted(() => {
      \n console.log('DOM ready')
      \n window.addEventListener('resize', handler)
      \n})<\/p>\n

      onUnmounted(() => {
      \n window.removeEventListener('resize', handler)
      \n})<\/p>\n

      \/\/ \u53ef\u591a\u6b21\u8c03\u7528，\u6309\u6ce8\u518c\u987a\u5e8f\u6267\u884c
      \nonMounted(() => { \/* \u7b2c\u4e8c\u4e2a\u56de\u8c03 *\/ })
      \n<\/script><\/p>\n

      4.3 \u751f\u547d\u5468\u671f\u56fe\u793a<\/h4>\n

      setup()
      \n \u2502
      \n \u251c\u2500 onBeforeMount
      \n \u2502 \u2502
      \n \u2502 \u6302\u8f7d DOM
      \n \u2502 \u2502
      \n \u251c\u2500 onMounted \u25c4\u2500\u2500 \u53ef\u8bbf\u95ee DOM \/ \u53d1\u8d77\u8bf7\u6c42
      \n \u2502 \u2502
      \n \u2502 \u6570\u636e\u53d8\u5316 \u2192 \u91cd\u65b0\u6e32\u67d3
      \n \u2502 \u2502
      \n \u251c\u2500 onBeforeUpdate
      \n \u251c\u2500 onUpdated
      \n \u2502 \u2502
      \n \u2502 \u5378\u8f7d\u7ec4\u4ef6
      \n \u2502 \u2502
      \n \u251c\u2500 onBeforeUnmount \u25c4\u2500\u2500 \u6e05\u7406\u5b9a\u65f6\u5668\/\u4e8b\u4ef6
      \n \u2514\u2500 onUnmounted<\/p>\n

      \n

      5. \u8ba1\u7b97\u5c5e\u6027\u4e0e\u4fa6\u542c\u5668<\/h3>\n

      5.1 computed<\/h4>\n

      import<\/span> {<\/span> ref,<\/span> computed }<\/span> from<\/span> 'vue'<\/span><\/p>\n

      const<\/span> firstName =<\/span> ref<\/span>(<\/span>'John'<\/span>)<\/span>
      \nconst<\/span> lastName =<\/span> ref<\/span>(<\/span>'Doe'<\/span>)<\/span><\/p>\n

      \/\/ \u53ea\u8bfb\u8ba1\u7b97\u5c5e\u6027<\/span>
      \nconst<\/span> fullName =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> `<\/span>${<\/span>firstName.<\/span>value}<\/span><\/span> <\/span>${<\/span>lastName.<\/span>value}<\/span><\/span>`<\/span><\/span>)<\/span><\/p>\n

      \/\/ \u53ef\u5199\u8ba1\u7b97\u5c5e\u6027<\/span>
      \nconst<\/span> fullNameWritable =<\/span> computed<\/span>(<\/span>{<\/span>
      \n get<\/span>:<\/span> (<\/span>)<\/span> =><\/span> `<\/span>${<\/span>firstName.<\/span>value}<\/span><\/span> <\/span>${<\/span>lastName.<\/span>value}<\/span><\/span>`<\/span><\/span>,<\/span>
      \n set<\/span>:<\/span> (<\/span>val<\/span>)<\/span> =><\/span> {<\/span>
      \n const<\/span> [<\/span>first,<\/span> last]<\/span> =<\/span> val.<\/span>split<\/span>(<\/span>' '<\/span>)<\/span>
      \n firstName.<\/span>value =<\/span> first
      \n lastName.<\/span>value =<\/span> last
      \n }<\/span>
      \n}<\/span>)<\/span><\/p>\n

      \u7279\u70b9： \u57fa\u4e8e\u4f9d\u8d56\u7f13\u5b58，\u4f9d\u8d56\u4e0d\u53d8\u5219\u4e0d\u91cd\u65b0\u8ba1\u7b97\u3002<\/p>\n

      5.2 watch<\/h4>\n

      import<\/span> {<\/span> ref,<\/span> watch,<\/span> reactive }<\/span> from<\/span> 'vue'<\/span><\/p>\n

      const<\/span> count =<\/span> ref<\/span>(<\/span>0<\/span>)<\/span>
      \nconst<\/span> state =<\/span> reactive<\/span>(<\/span>{<\/span> name<\/span>:<\/span> ''<\/span>,<\/span> age<\/span>:<\/span> 0<\/span> }<\/span>)<\/span><\/p>\n

      \/\/ 1. \u4fa6\u542c ref<\/span>
      \nwatch<\/span>(<\/span>count,<\/span> (<\/span>newVal,<\/span> oldVal<\/span>)<\/span> =><\/span> {<\/span>
      \n console.<\/span>log<\/span>(<\/span>`<\/span>${<\/span>oldVal}<\/span><\/span> \u2192 <\/span>${<\/span>newVal}<\/span><\/span>`<\/span><\/span>)<\/span>
      \n}<\/span>)<\/span><\/p>\n

      \/\/ 2. \u4fa6\u542c reactive \u5bf9\u8c61\u7684\u67d0\u4e2a\u5c5e\u6027（\u5fc5\u987b\u7528 getter）<\/span>
      \nwatch<\/span>(<\/span>
      \n (<\/span>)<\/span> =><\/span> state.<\/span>name,<\/span>
      \n (<\/span>newName<\/span>)<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>newName)<\/span>
      \n)<\/span><\/p>\n

      \/\/ 3. \u4fa6\u542c\u591a\u4e2a\u6e90<\/span>
      \nwatch<\/span>(<\/span>[<\/span>count,<\/span> (<\/span>)<\/span> =><\/span> state.<\/span>name]<\/span>,<\/span> (<\/span>[<\/span>newCount,<\/span> newName]<\/span><\/span>)<\/span> =><\/span> {<\/span>
      \n \/\/ …<\/span>
      \n}<\/span>)<\/span><\/p>\n

      \/\/ 4. \u6df1\u5ea6\u4fa6\u542c<\/span>
      \nwatch<\/span>(<\/span>state,<\/span> (<\/span>newState<\/span>)<\/span> =><\/span> {<\/span>
      \n \/\/ \u4efb\u4f55\u5d4c\u5957\u5c5e\u6027\u53d8\u5316\u90fd\u89e6\u53d1<\/span>
      \n}<\/span>,<\/span> {<\/span> deep<\/span>:<\/span> true<\/span> }<\/span>)<\/span><\/p>\n

      \/\/ 5. \u7acb\u5373\u6267\u884c<\/span>
      \nwatch<\/span>(<\/span>count,<\/span> (<\/span>val<\/span>)<\/span> =><\/span> {<\/span>
      \n \/\/ \u7acb\u5373\u6267\u884c\u4e00\u6b21<\/span>
      \n}<\/span>,<\/span> {<\/span> immediate<\/span>:<\/span> true<\/span> }<\/span>)<\/span><\/p>\n

      \/\/ 6. \u56de\u8c03\u5237\u65b0\u65f6\u673a<\/span>
      \nwatch<\/span>(<\/span>count,<\/span> cb,<\/span> {<\/span> flush<\/span>:<\/span> 'post'<\/span> }<\/span>)<\/span> \/\/ DOM \u66f4\u65b0\u540e\u6267\u884c<\/span>
      \nwatch<\/span>(<\/span>count,<\/span> cb,<\/span> {<\/span> flush<\/span>:<\/span> 'sync'<\/span> }<\/span>)<\/span> \/\/ \u540c\u6b65\u6267\u884c（\u8c28\u614e\u4f7f\u7528）<\/span><\/p>\n

      \/\/ 7. \u4e00\u6b21\u6027\u4fa6\u542c（Vue 3.4+）<\/span>
      \nwatch<\/span>(<\/span>count,<\/span> cb,<\/span> {<\/span> once<\/span>:<\/span> true<\/span> }<\/span>)<\/span><\/p>\n

      \/\/ 8. \u505c\u6b62\u4fa6\u542c<\/span>
      \nconst<\/span> stop =<\/span> watch<\/span>(<\/span>count,<\/span> cb)<\/span>
      \nstop<\/span>(<\/span>)<\/span> \/\/ \u624b\u52a8\u505c\u6b62<\/span><\/p>\n

      5.3 watchEffect<\/h4>\n

      import<\/span> {<\/span> watchEffect }<\/span> from<\/span> 'vue'<\/span><\/p>\n

      \/\/ \u81ea\u52a8\u8ffd\u8e2a\u56de\u8c03\u4e2d\u4f7f\u7528\u7684\u6240\u6709\u54cd\u5e94\u5f0f\u4f9d\u8d56<\/span>
      \nconst<\/span> stop =<\/span> watchEffect<\/span>(<\/span>(<\/span>onCleanup<\/span>)<\/span> =><\/span> {<\/span>
      \n console.<\/span>log<\/span>(<\/span>count.<\/span>value)<\/span> \/\/ \u81ea\u52a8\u4f9d\u8d56 count<\/span><\/p>\n

      \/\/ \u6e05\u7406\u51fd\u6570：\u4e0b\u6b21\u6267\u884c\u524d\u6216\u7ec4\u4ef6\u5378\u8f7d\u65f6\u8c03\u7528<\/span>
      \n const<\/span> timer =<\/span> setInterval<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>}<\/span>,<\/span> 1000<\/span>)<\/span>
      \n onCleanup<\/span>(<\/span>(<\/span>)<\/span> =><\/span> clearInterval<\/span>(<\/span>timer)<\/span>)<\/span>
      \n}<\/span>)<\/span><\/p>\n

      \/\/ \u505c\u6b62<\/span>
      \nstop<\/span>(<\/span>)<\/span><\/p>\n

      5.4 watch vs watchEffect<\/h4>\n\n\u7279\u6027watchwatchEffect<\/tr>\n\n\n\n\n\n
      \u6307\u5b9a\u4fa6\u542c\u6e90<\/td>\n\u2705 \u663e\u5f0f\u6307\u5b9a<\/td>\n\u274c \u81ea\u52a8\u8ffd\u8e2a<\/td>\n<\/tr>\n
      \u8bbf\u95ee\u65e7\u503c<\/td>\n\u2705 (new, old)<\/td>\n\u274c<\/td>\n<\/tr>\n
      \u60f0\u6027\u6267\u884c<\/td>\n\u2705 \u9ed8\u8ba4\u60f0\u6027<\/td>\n\u274c \u7acb\u5373\u6267\u884c<\/td>\n<\/tr>\n
      \u6df1\u5ea6\u9009\u9879<\/td>\n\u2705 { deep: true }<\/td>\n\u81ea\u52a8\u6df1\u5ea6\u8ffd\u8e2a<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \n

      6. \u7ec4\u4ef6\u7cfb\u7edf<\/h3>\n

      6.1 \u7ec4\u4ef6\u5b9a\u4e49<\/h4>\n

      <!– \u5355\u6587\u4ef6\u7ec4\u4ef6 SFC –>
      \n<script setup lang="ts">
      \n\/\/ \u7ec4\u4ef6\u903b\u8f91
      \n<\/script><\/p>\n

      <template>
      \n <!– \u6a21\u677f –>
      \n<\/template><\/p>\n

      <style scoped>
      \n\/* \u5c40\u90e8\u6837\u5f0f *\/
      \n<\/style><\/p>\n

      6.2 Props<\/h4>\n

      <script setup lang="ts">
      \n\/\/ \u65b9\u5f0f\u4e00：defineProps \u5b8f（\u7f16\u8bd1\u65f6，\u65e0\u9700 import）
      \nconst props = defineProps<{
      \n title: string
      \n count?: number
      \n}>()<\/p>\n

      \/\/ \u5e26\u9ed8\u8ba4\u503c
      \nconst props = withDefaults(defineProps<{
      \n title: string
      \n count?: number
      \n}>(), {
      \n count: 0
      \n})<\/p>\n

      \/\/ \u8fd0\u884c\u65f6\u58f0\u660e
      \nconst props = defineProps({
      \n title: { type: String, required: true },
      \n count: { type: Number, default: 0 },
      \n list: { type: Array as PropType<string[]>, default: () => [] }
      \n})
      \n<\/script><\/p>\n

      Props \u6ce8\u610f\u4e8b\u9879：<\/p>\n

        \n
      • Props \u662f\u53ea\u8bfb\u7684，\u4e0d\u8981\u76f4\u63a5\u4fee\u6539<\/li>\n
      • \u5bf9\u8c61\/\u6570\u7ec4\u7c7b\u578b\u7684 default \u5fc5\u987b\u7528\u5de5\u5382\u51fd\u6570<\/li>\n
      • \u672a\u58f0\u660e\u7684 attribute \u4f1a\u843d\u5165 $attrs<\/li>\n<\/ul>\n

        6.3 Emits<\/h4>\n

        <script setup lang="ts">
        \nconst emit = defineEmits<{
        \n change: [value: string]
        \n update: [id: number, data: object]
        \n}>()<\/p>\n

        \/\/ \u8fd0\u884c\u65f6\u58f0\u660e
        \nconst emit = defineEmits(['change', 'update'])<\/p>\n

        \/\/ \u89e6\u53d1
        \nemit('change', 'hello')
        \nemit('update', 1, { name: 'test' })
        \n<\/script><\/p>\n

        6.4 v-model（\u7ec4\u4ef6\u53cc\u5411\u7ed1\u5b9a）<\/h4>\n

        <!– \u7236\u7ec4\u4ef6：\u591a\u4e2a v-model –>
        \n<UserForm
        \n v-model:firstName="first"
        \n v-model:lastName="last"
        \n\/><\/p>\n

        <!– UserForm.vue –>
        \n<script setup>
        \nconst firstName = defineModel('firstName') \/\/ Vue 3.4+ \u8bed\u6cd5\u7cd6
        \nconst lastName = defineModel('lastName')<\/p>\n

        \/\/ \u7b49\u4ef7\u4e8e：
        \n\/\/ const props = defineProps(['firstName', 'lastName'])
        \n\/\/ const emit = defineEmits(['update:firstName', 'update:lastName'])
        \n<\/script><\/p>\n

        \u4fee\u9970\u7b26：<\/p>\n

        <UserForm v-model:firstName.trim="first" \/><\/p>\n

        <!– \u5b50\u7ec4\u4ef6\u4e2d –>
        \n<script setup>
        \nconst [model, modifiers] = defineModel('firstName')
        \nif (modifiers.trim) { \/* … *\/ }
        \n<\/script><\/p>\n

        6.5 Slots \u63d2\u69fd<\/h4>\n

        <!– \u7236\u7ec4\u4ef6 –>
        \n<Card>
        \n <template #header>\u6807\u9898<\/template>
        \n <template #default="{ item }">
        \n {{ item.name }}
        \n <\/template>
        \n <template #footer>\u5e95\u90e8<\/template>
        \n<\/Card><\/p>\n

        <!– Card.vue –>
        \n<template>
        \n <div class="card">
        \n <header><slot name="header" \/><\/header>
        \n <main><slot :item="currentItem" \/><\/main>
        \n <footer><slot name="footer">\u9ed8\u8ba4\u5e95\u90e8<\/slot><\/footer>
        \n <\/div>
        \n<\/template><\/p>\n

        \/\/ \u5728 setup \u4e2d\u8bbf\u95ee\u63d2\u69fd<\/span>
        \nimport<\/span> {<\/span> useSlots }<\/span> from<\/span> 'vue'<\/span>
        \nconst<\/span> slots =<\/span> useSlots<\/span>(<\/span>)<\/span>
        \n\/\/ slots.default?.()<\/span>
        \n\/\/ slots.header?.()<\/span><\/p>\n

        6.6 expose \/ \u7ec4\u4ef6\u5b9e\u4f8b<\/h4>\n

        <!– \u5b50\u7ec4\u4ef6 –>
        \n<script setup>
        \nimport { ref } from 'vue'
        \nconst count = ref(0)
        \nconst reset = () => (count.value = 0)<\/p>\n

        \/\/ \u53ea\u66b4\u9732 reset，\u4e0d\u66b4\u9732 count
        \ndefineExpose({ reset })
        \n<\/script><\/p>\n

        <!– \u7236\u7ec4\u4ef6 –>
        \n<script setup>
        \nimport { ref, onMounted } from 'vue'
        \nimport Child from '.\/Child.vue'<\/p>\n

        const childRef = ref(null)
        \nonMounted(() => {
        \n childRef.value.reset() \/\/ \u2705
        \n \/\/ childRef.value.count \/\/ \u274c \u672a\u66b4\u9732
        \n})
        \n<\/script><\/p>\n

        <template>
        \n <Child ref="childRef" \/>
        \n<\/template><\/p>\n

        6.7 attrs \u900f\u4f20<\/h4>\n

        <!– \u81ea\u52a8\u7ee7\u627f：\u672a\u58f0\u660e\u7684 props\/emits \u81ea\u52a8\u7ed1\u5b9a\u5230\u6839\u5143\u7d20 –>
        \n<!– \u7981\u7528\u7ee7\u627f –>
        \n<script setup>
        \ndefineOptions({ inheritAttrs: false })
        \n<\/script><\/p>\n

        <template>
        \n <input v-bind="$attrs" \/>
        \n<\/template><\/p>\n

        6.8 \u52a8\u6001\u7ec4\u4ef6<\/h4>\n

        <script setup>
        \nimport { shallowRef } from 'vue'
        \nimport TabA from '.\/TabA.vue'
        \nimport TabB from '.\/TabB.vue'<\/p>\n

        const current = shallowRef(TabA)
        \n<\/script><\/p>\n

        <template>
        \n <component :is="current" \/>
        \n<\/template><\/p>\n

        \n

        7. \u6a21\u677f\u8bed\u6cd5\u4e0e\u6307\u4ee4<\/h3>\n

        7.1 \u63d2\u503c\u4e0e\u7ed1\u5b9a<\/h4>\n

        <!– \u6587\u672c\u63d2\u503c –><\/span>
        \n<<\/span>p<\/span>><\/span><\/span>{{ message }}<\/<\/span>p<\/span>><\/span><\/span><\/p>\n

        <!– \u539f\u59cb HTML –><\/span>
        \n<<\/span>div<\/span> v-html<\/span>=<\/span>"<\/span>rawHtml"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span><\/p>\n

        <!– \u5c5e\u6027\u7ed1\u5b9a –><\/span>
        \n<<\/span>img<\/span> :src<\/span>=<\/span>"<\/span>imageUrl"<\/span><\/span> :alt<\/span>=<\/span>"<\/span>title"<\/span><\/span> \/><\/span><\/span>
        \n<<\/span>div<\/span> :class<\/span>=<\/span>"<\/span>{ active: isActive, 'text-danger': hasError }"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
        \n<<\/span>div<\/span> :class<\/span>=<\/span>"<\/span>[activeClass, errorClass]"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
        \n<<\/span>div<\/span> :style<\/span>=<\/span>"<\/span>{ color: activeColor, fontSize: fontSize + 'px' }"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span><\/p>\n

        <!– \u52a8\u6001\u53c2\u6570 –><\/span>
        \n<<\/span>a<\/span> :[attrName]<\/span>=<\/span>"<\/span>url"<\/span><\/span>><\/span><\/span>Link<\/<\/span>a<\/span>><\/span><\/span>
        \n<<\/span>button<\/span> @[eventName]<\/span>=<\/span>"<\/span>handler"<\/span><\/span>><\/span><\/span>Click<\/<\/span>button<\/span>><\/span><\/span><\/p>\n

        7.2 \u6761\u4ef6\u6e32\u67d3<\/h4>\n

        <<\/span>div<\/span> v-if<\/span>=<\/span>"<\/span>type === 'A'"<\/span><\/span>><\/span><\/span>A<\/<\/span>div<\/span>><\/span><\/span>
        \n<<\/span>div<\/span> v-else-if<\/span>=<\/span>"<\/span>type === 'B'"<\/span><\/span>><\/span><\/span>B<\/<\/span>div<\/span>><\/span><\/span>
        \n<<\/span>div<\/span> v-else<\/span>><\/span><\/span>C<\/<\/span>div<\/span>><\/span><\/span><\/p>\n

        <!– v-show：\u5207\u6362 display，\u9891\u7e41\u5207\u6362\u65f6\u6027\u80fd\u66f4\u597d –><\/span>
        \n<<\/span>div<\/span> v-show<\/span>=<\/span>"<\/span>isVisible"<\/span><\/span>><\/span><\/span>Toggle me<\/<\/span>div<\/span>><\/span><\/span><\/p>\n

        <!– template \u4e0a\u4f7f\u7528 v-if（\u4e0d\u6e32\u67d3\u989d\u5916\u5143\u7d20） –><\/span>
        \n<<\/span>template<\/span> v-if<\/span>=<\/span>"<\/span>showGroup"<\/span><\/span>><\/span><\/span>
        \n <<\/span>h1<\/span>><\/span><\/span>Title<\/<\/span>h1<\/span>><\/span><\/span>
        \n <<\/span>p<\/span>><\/span><\/span>Content<\/<\/span>p<\/span>><\/span><\/span>
        \n<\/<\/span>template<\/span>><\/span><\/span><\/p>\n

        7.3 \u5217\u8868\u6e32\u67d3<\/h4>\n

        <<\/span>li<\/span> v-for<\/span>=<\/span>"<\/span>(item, index) in items"<\/span><\/span> :key<\/span>=<\/span>"<\/span>item.id"<\/span><\/span>><\/span><\/span>
        \n {{ index }} – {{ item.name }}
        \n<\/<\/span>li<\/span>><\/span><\/span><\/p>\n

        <!– \u5bf9\u8c61\u904d\u5386 –><\/span>
        \n<<\/span>div<\/span> v-for<\/span>=<\/span>"<\/span>(value, key, index) in obj"<\/span><\/span> :key<\/span>=<\/span>"<\/span>key"<\/span><\/span>><\/span><\/span>
        \n {{ key }}: {{ value }}
        \n<\/<\/span>div<\/span>><\/span><\/span><\/p>\n

        <!– \u8303\u56f4 –><\/span>
        \n<<\/span>span<\/span> v-for<\/span>=<\/span>"<\/span>n in 10"<\/span><\/span> :key<\/span>=<\/span>"<\/span>n"<\/span><\/span>><\/span><\/span>{{ n }}<\/<\/span>span<\/span>><\/span><\/span><\/p>\n

        \u26a0\ufe0f key \u7684\u91cd\u8981\u6027： \u5fc5\u987b\u7528\u552f\u4e00\u6807\u8bc6（\u5982 id），\u4e0d\u8981\u7528 index\u3002<\/p>\n

        7.4 \u4e8b\u4ef6\u5904\u7406<\/h4>\n

        <<\/span>button<\/span> @click<\/span>=<\/span>"<\/span>handler"<\/span><\/span>><\/span><\/span>Click<\/<\/span>button<\/span>><\/span><\/span>
        \n<<\/span>button<\/span> @click<\/span>=<\/span>"<\/span>handler($event, 'arg')"<\/span><\/span>><\/span><\/span>With args<\/<\/span>button<\/span>><\/span><\/span><\/p>\n

        <!– \u4fee\u9970\u7b26 –><\/span>
        \n<<\/span>form<\/span> @submit.prevent<\/span>=<\/span>"<\/span>onSubmit"<\/span><\/span>><\/span><\/span> <!– \u963b\u6b62\u9ed8\u8ba4 –><\/span>
        \n<<\/span>a<\/span> @click.stop<\/span>=<\/span>"<\/span>doThis"<\/span><\/span>><\/span><\/span> <!– \u963b\u6b62\u5192\u6ce1 –><\/span>
        \n<<\/span>div<\/span> @click.self<\/span>=<\/span>"<\/span>onlySelf"<\/span><\/span>><\/span><\/span> <!– \u4ec5\u81ea\u8eab\u89e6\u53d1 –><\/span>
        \n<<\/span>input<\/span> @keyup.enter<\/span>=<\/span>"<\/span>submit"<\/span><\/span>><\/span><\/span> <!– \u6309\u952e\u4fee\u9970\u7b26 –><\/span>
        \n<<\/span>button<\/span> @click.once<\/span>=<\/span>"<\/span>doOnce"<\/span><\/span>><\/span><\/span> <!– \u4ec5\u89e6\u53d1\u4e00\u6b21 –><\/span>
        \n<<\/span>div<\/span> @scroll.passive<\/span>=<\/span>"<\/span>onScroll"<\/span><\/span>><\/span><\/span> <!– passive \u76d1\u542c –><\/span><\/p>\n

        7.5 \u8868\u5355\u7ed1\u5b9a<\/h4>\n

        <<\/span>input<\/span> v-model<\/span>=<\/span>"<\/span>text"<\/span><\/span> \/><\/span><\/span>
        \n<<\/span>textarea<\/span> v-model<\/span>=<\/span>"<\/span>desc"<\/span><\/span>><\/span><\/span><\/<\/span>textarea<\/span>><\/span><\/span>
        \n<<\/span>input<\/span> type<\/span>=<\/span>"<\/span>checkbox"<\/span><\/span> v-model<\/span>=<\/span>"<\/span>checked"<\/span><\/span> \/><\/span><\/span>
        \n<<\/span>input<\/span> type<\/span>=<\/span>"<\/span>checkbox"<\/span><\/span> v-model<\/span>=<\/span>"<\/span>picked"<\/span><\/span> value<\/span>=<\/span>"<\/span>a"<\/span><\/span> \/><\/span><\/span>
        \n<<\/span>input<\/span> type<\/span>=<\/span>"<\/span>radio"<\/span><\/span> v-model<\/span>=<\/span>"<\/span>picked"<\/span><\/span> value<\/span>=<\/span>"<\/span>b"<\/span><\/span> \/><\/span><\/span>
        \n<<\/span>select<\/span> v-model<\/span>=<\/span>"<\/span>selected"<\/span><\/span>><\/span><\/span>
        \n <<\/span>option<\/span> value<\/span>=<\/span>"<\/span>1"<\/span><\/span>><\/span><\/span>One<\/<\/span>option<\/span>><\/span><\/span>
        \n<\/<\/span>select<\/span>><\/span><\/span><\/p>\n

        <!– \u4fee\u9970\u7b26 –><\/span>
        \n<<\/span>input<\/span> v-model.trim<\/span>=<\/span>"<\/span>msg"<\/span><\/span> \/><\/span><\/span> <!– \u81ea\u52a8 trim –><\/span>
        \n<<\/span>input<\/span> v-model.number<\/span>=<\/span>"<\/span>age"<\/span><\/span> \/><\/span><\/span> <!– \u8f6c number –><\/span>
        \n<<\/span>input<\/span> v-model.lazy<\/span>=<\/span>"<\/span>msg"<\/span><\/span> \/><\/span><\/span> <!– change \u800c\u975e input \u4e8b\u4ef6 –><\/span><\/p>\n

        \n

        8. \u5185\u7f6e\u7ec4\u4ef6<\/h3>\n

        8.1 Transition<\/h4>\n

        <template>
        \n <Transition name="fade" mode="out-in">
        \n <p v-if="show">Hello<\/p>
        \n <\/Transition>
        \n<\/template><\/p>\n

        <style>
        \n.fade-enter-active,
        \n.fade-leave-active {
        \n transition: opacity 0.3s ease;
        \n}
        \n.fade-enter-from,
        \n.fade-leave-to {
        \n opacity: 0;
        \n}
        \n<\/style><\/p>\n

        \u8fc7\u6e21\u7c7b\u540d（Vue 3）：<\/p>\n

          \n
        • v-enter-from \u2192 v-enter-active \u2192 v-enter-to<\/li>\n
        • v-leave-from \u2192 v-leave-active \u2192 v-leave-to<\/li>\n<\/ul>\n

          8.2 TransitionGroup<\/h4>\n

          <TransitionGroup name="list" tag="ul">
          \n <li v-for="item in items" :key="item.id">{{ item.text }}<\/li>
          \n<\/TransitionGroup><\/p>\n

          <style>
          \n.list-enter-active, .list-leave-active {
          \n transition: all 0.5s ease;
          \n}
          \n.list-enter-from, .list-leave-to {
          \n opacity: 0;
          \n transform: translateX(30px);
          \n}
          \n.list-move {
          \n transition: transform 0.5s ease;
          \n}
          \n<\/style><\/p>\n

          8.3 KeepAlive<\/h4>\n

          <KeepAlive :include="['TabA', 'TabB']" :max="10">
          \n <component :is="currentTab" \/>
          \n<\/KeepAlive><\/p>\n

          <!– \u914d\u5408\u751f\u547d\u5468\u671f –>
          \n<script setup>
          \nimport { onActivated, onDeactivated } from 'vue'<\/p>\n

          onActivated(() => { \/* \u4ece\u7f13\u5b58\u6062\u590d *\/ })
          \nonDeactivated(() => { \/* \u8fdb\u5165\u7f13\u5b58 *\/ })
          \n<\/script><\/p>\n

          \n

          9. \u8def\u7531（Vue Router 4）<\/h3>\n

          9.1 \u57fa\u672c\u914d\u7f6e<\/h4>\n

          \/\/ router\/index.js<\/span>
          \nimport<\/span> {<\/span> createRouter,<\/span> createWebHistory }<\/span> from<\/span> 'vue-router'<\/span><\/p>\n

          const<\/span> routes =<\/span> [<\/span>
          \n {<\/span>
          \n path<\/span>:<\/span> '\/'<\/span>,<\/span>
          \n name<\/span>:<\/span> 'Home'<\/span>,<\/span>
          \n component<\/span>:<\/span> (<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'..\/views\/Home.vue'<\/span>)<\/span> \/\/ \u61d2\u52a0\u8f7d<\/span>
          \n }<\/span>,<\/span>
          \n {<\/span>
          \n path<\/span>:<\/span> '\/user\/:id'<\/span>,<\/span>
          \n name<\/span>:<\/span> 'User'<\/span>,<\/span>
          \n component<\/span>:<\/span> (<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'..\/views\/User.vue'<\/span>)<\/span>,<\/span>
          \n props<\/span>:<\/span> true<\/span>,<\/span> \/\/ \u5c06 params \u4f5c\u4e3a props \u4f20\u5165<\/span>
          \n children<\/span>:<\/span> [<\/span>
          \n {<\/span> path<\/span>:<\/span> 'profile'<\/span>,<\/span> component<\/span>:<\/span> (<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'..\/views\/Profile.vue'<\/span>)<\/span> }<\/span>
          \n ]<\/span>
          \n }<\/span>,<\/span>
          \n {<\/span>
          \n path<\/span>:<\/span> '\/:pathMatch(.*)*'<\/span>,<\/span> \/\/ 404 \u515c\u5e95<\/span>
          \n name<\/span>:<\/span> 'NotFound'<\/span>,<\/span>
          \n component<\/span>:<\/span> (<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'..\/views\/404.vue'<\/span>)<\/span>
          \n }<\/span>
          \n]<\/span><\/p>\n

          const<\/span> router =<\/span> createRouter<\/span>(<\/span>{<\/span>
          \n history<\/span>:<\/span> createWebHistory<\/span>(<\/span>import<\/span>.<\/span>meta.<\/span>env.<\/span>BASE_URL<\/span>)<\/span>,<\/span>
          \n routes,<\/span>
          \n scrollBehavior<\/span>(<\/span>to,<\/span> from,<\/span> savedPosition<\/span>)<\/span> {<\/span>
          \n return<\/span> savedPosition ||<\/span> {<\/span> top<\/span>:<\/span> 0<\/span> }<\/span>
          \n }<\/span>
          \n}<\/span>)<\/span><\/p>\n

          export<\/span> default<\/span> router<\/p>\n

          9.2 \u7ec4\u5408\u5f0f API \u4e2d\u4f7f\u7528<\/h4>\n

          <script setup>
          \nimport { useRouter, useRoute } from 'vue-router'<\/p>\n

          const router = useRouter()
          \nconst route = useRoute()<\/p>\n

          \/\/ \u7f16\u7a0b\u5f0f\u5bfc\u822a
          \nrouter.push('\/user\/1')
          \nrouter.push({ name: 'User', params: { id: 1 } })
          \nrouter.replace('\/login')
          \nrouter.back()
          \nrouter.go(-2)<\/p>\n

          \/\/ \u5f53\u524d\u8def\u7531\u4fe1\u606f
          \nconsole.log(route.params.id)
          \nconsole.log(route.query.search)
          \nconsole.log(route.hash)
          \n<\/script><\/p>\n

          9.3 \u5bfc\u822a\u5b88\u536b<\/h4>\n

          \/\/ \u5168\u5c40\u524d\u7f6e\u5b88\u536b<\/span>
          \nrouter.<\/span>beforeEach<\/span>(<\/span>(<\/span>to,<\/span> from<\/span><\/span>)<\/span> =><\/span> {<\/span>
          \n const<\/span> auth =<\/span> useAuthStore<\/span>(<\/span>)<\/span>
          \n if<\/span> (<\/span>to.<\/span>meta.<\/span>requiresAuth &&<\/span> !<\/span>auth.<\/span>isLoggedIn)<\/span> {<\/span>
          \n return<\/span> {<\/span> name<\/span>:<\/span> 'Login'<\/span>,<\/span> query<\/span>:<\/span> {<\/span> redirect<\/span>:<\/span> to.<\/span>fullPath }<\/span> }<\/span>
          \n }<\/span>
          \n}<\/span>)<\/span><\/p>\n

          \/\/ \u5168\u5c40\u540e\u7f6e\u94a9\u5b50<\/span>
          \nrouter.<\/span>afterEach<\/span>(<\/span>(<\/span>to,<\/span> from<\/span><\/span>)<\/span> =><\/span> {<\/span>
          \n document.<\/span>title =<\/span> to.<\/span>meta.<\/span>title ||<\/span> 'App'<\/span>
          \n}<\/span>)<\/span><\/p>\n

          \/\/ \u8def\u7531\u72ec\u4eab\u5b88\u536b<\/span>
          \n{<\/span>
          \n path<\/span>:<\/span> '\/admin'<\/span>,<\/span>
          \n component<\/span>:<\/span> Admin,<\/span>
          \n beforeEnter<\/span>:<\/span> (<\/span>to,<\/span> from<\/span><\/span>)<\/span> =><\/span> {<\/span>
          \n if<\/span> (<\/span>!<\/span>isAdmin<\/span>(<\/span>)<\/span>)<\/span> return<\/span> false<\/span>
          \n }<\/span>
          \n}<\/span><\/p>\n

          <!– \u7ec4\u4ef6\u5185\u5b88\u536b –>
          \n<script setup>
          \nimport { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'<\/p>\n

          onBeforeRouteLeave((to, from) => {
          \n if (hasUnsavedChanges.value) {
          \n return window.confirm('\u786e\u5b9a\u79bb\u5f00？\u672a\u4fdd\u5b58\u7684\u66f4\u6539\u5c06\u4e22\u5931\u3002')
          \n }
          \n})<\/p>\n

          onBeforeRouteUpdate((to, from) => {
          \n \/\/ \u540c\u7ec4\u4ef6\u590d\u7528，\u53c2\u6570\u53d8\u5316\u65f6（\u5982 \/user\/1 \u2192 \/user\/2）
          \n fetchData(to.params.id)
          \n})
          \n<\/script><\/p>\n

          9.4 \u8def\u7531\u5143\u4fe1\u606f<\/h4>\n

          {<\/span>
          \n path<\/span>:<\/span> '\/dashboard'<\/span>,<\/span>
          \n component<\/span>:<\/span> Dashboard,<\/span>
          \n meta<\/span>:<\/span> {<\/span>
          \n requiresAuth<\/span>:<\/span> true<\/span>,<\/span>
          \n title<\/span>:<\/span> '\u63a7\u5236\u53f0'<\/span>,<\/span>
          \n roles<\/span>:<\/span> [<\/span>'admin'<\/span>,<\/span> 'editor'<\/span>]<\/span>
          \n }<\/span>
          \n}<\/span><\/p>\n

          \n

          10. \u72b6\u6001\u7ba1\u7406（Pinia）<\/h3>\n

          10.1 \u57fa\u672c\u4f7f\u7528<\/h4>\n

          \/\/ stores\/counter.js<\/span>
          \nimport<\/span> {<\/span> defineStore }<\/span> from<\/span> 'pinia'<\/span>
          \nimport<\/span> {<\/span> ref,<\/span> computed }<\/span> from<\/span> 'vue'<\/span><\/p>\n

          \/\/ \u7ec4\u5408\u5f0f\u5199\u6cd5（\u63a8\u8350）<\/span>
          \nexport<\/span> const<\/span> useCounterStore =<\/span> defineStore<\/span>(<\/span>'counter'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
          \n \/\/ state<\/span>
          \n const<\/span> count =<\/span> ref<\/span>(<\/span>0<\/span>)<\/span>
          \n const<\/span> name =<\/span> ref<\/span>(<\/span>'Vue'<\/span>)<\/span><\/p>\n

          \/\/ getters<\/span>
          \n const<\/span> doubleCount =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> count.<\/span>value *<\/span> 2<\/span>)<\/span><\/p>\n

          \/\/ actions<\/span>
          \n function<\/span> increment<\/span>(<\/span>)<\/span> {<\/span>
          \n count.<\/span>value++<\/span>
          \n }<\/span><\/p>\n

          async<\/span> function<\/span> fetchCount<\/span>(<\/span>)<\/span> {<\/span>
          \n const<\/span> res =<\/span> await<\/span> api.<\/span>getCount<\/span>(<\/span>)<\/span>
          \n count.<\/span>value =<\/span> res.<\/span>data
          \n }<\/span><\/p>\n

          return<\/span> {<\/span> count,<\/span> name,<\/span> doubleCount,<\/span> increment,<\/span> fetchCount }<\/span>
          \n}<\/span>)<\/span><\/p>\n

          \/\/ \u9009\u9879\u5f0f\u5199\u6cd5<\/span>
          \nexport<\/span> const<\/span> useCounterStore =<\/span> defineStore<\/span>(<\/span>'counter'<\/span>,<\/span> {<\/span>
          \n state<\/span>:<\/span> (<\/span>)<\/span> =><\/span> (<\/span>{<\/span> count<\/span>:<\/span> 0<\/span>,<\/span> name<\/span>:<\/span> 'Vue'<\/span> }<\/span>)<\/span>,<\/span>
          \n getters<\/span>:<\/span> {<\/span>
          \n doubleCount<\/span>:<\/span> (<\/span>state<\/span>)<\/span> =><\/span> state.<\/span>count *<\/span> 2<\/span>,<\/span>
          \n doublePlusOne<\/span>(<\/span>)<\/span> {<\/span> return<\/span> this<\/span>.<\/span>doubleCount +<\/span> 1<\/span> }<\/span>
          \n }<\/span>,<\/span>
          \n actions<\/span>:<\/span> {<\/span>
          \n increment<\/span>(<\/span>)<\/span> {<\/span> this<\/span>.<\/span>count++<\/span> }<\/span>,<\/span>
          \n async<\/span> fetchCount<\/span>(<\/span>)<\/span> {<\/span>
          \n this<\/span>.<\/span>count =<\/span> await<\/span> api.<\/span>getCount<\/span>(<\/span>)<\/span>
          \n }<\/span>
          \n }<\/span>
          \n}<\/span>)<\/span><\/p>\n

          10.2 \u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528<\/h4>\n

          <script setup>
          \nimport { useCounterStore } from '@\/stores\/counter'
          \nimport { storeToRefs } from 'pinia'<\/p>\n

          const store = useCounterStore()<\/p>\n

          \/\/ \u26a0\ufe0f \u89e3\u6784\u4f1a\u4e22\u5931\u54cd\u5e94\u6027，\u7528 storeToRefs
          \nconst { count, doubleCount } = storeToRefs(store)
          \n\/\/ actions \u53ef\u4ee5\u76f4\u63a5\u89e3\u6784
          \nconst { increment } = store<\/p>\n

          \/\/ \u4fee\u6539 state
          \nstore.count++
          \nstore.$patch({ count: 10, name: 'Pinia' })
          \nstore.$patch((state) => {
          \n state.count++
          \n state.name = 'batch'
          \n})
          \nstore.$reset() \/\/ \u91cd\u7f6e（\u4ec5\u9009\u9879\u5f0f\u5199\u6cd5\u652f\u6301）
          \n<\/script><\/p>\n

          10.3 Store \u7ec4\u5408<\/h4>\n

          \/\/ stores\/user.js<\/span>
          \nexport<\/span> const<\/span> useUserStore =<\/span> defineStore<\/span>(<\/span>'user'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
          \n const<\/span> token =<\/span> ref<\/span>(<\/span>''<\/span>)<\/span>
          \n const<\/span> isLoggedIn =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> !<\/span>!<\/span>token.<\/span>value)<\/span>
          \n return<\/span> {<\/span> token,<\/span> isLoggedIn }<\/span>
          \n}<\/span>)<\/span><\/p>\n

          \/\/ stores\/cart.js<\/span>
          \nexport<\/span> const<\/span> useCartStore =<\/span> defineStore<\/span>(<\/span>'cart'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
          \n const<\/span> user =<\/span> useUserStore<\/span>(<\/span>)<\/span> \/\/ \u7ec4\u5408\u5176\u4ed6 store<\/span>
          \n const<\/span> items =<\/span> ref<\/span>(<\/span>[<\/span>]<\/span>)<\/span><\/p>\n

          const<\/span> canCheckout =<\/span> computed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> user.<\/span>isLoggedIn &&<\/span> items.<\/span>value.<\/span>length ><\/span> 0<\/span>)<\/span><\/p>\n

          return<\/span> {<\/span> items,<\/span> canCheckout }<\/span>
          \n}<\/span>)<\/span><\/p>\n

          10.4 \u63d2\u4ef6\u4e0e\u6301\u4e45\u5316<\/h4>\n

          \/\/ pinia \u63d2\u4ef6<\/span>
          \nfunction<\/span> piniaLogger<\/span>(<\/span>{<\/span> store }<\/span><\/span>)<\/span> {<\/span>
          \n store.<\/span>$subscribe<\/span>(<\/span>(<\/span>mutation,<\/span> state<\/span>)<\/span> =><\/span> {<\/span>
          \n console.<\/span>log<\/span>(<\/span>`<\/span>[<\/span>${<\/span>store.<\/span>$id}<\/span><\/span>] <\/span>${<\/span>mutation.<\/span>type}<\/span><\/span>`<\/span><\/span>,<\/span> state)<\/span>
          \n }<\/span>)<\/span>
          \n}<\/span><\/p>\n

          const<\/span> pinia =<\/span> createPinia<\/span>(<\/span>)<\/span>
          \npinia.<\/span>use<\/span>(<\/span>piniaLogger)<\/span><\/p>\n

          \/\/ \u6301\u4e45\u5316（pinia-plugin-persistedstate）<\/span>
          \nimport<\/span> piniaPluginPersistedstate from<\/span> 'pinia-plugin-persistedstate'<\/span>
          \npinia.<\/span>use<\/span>(<\/span>piniaPluginPersistedstate)<\/span><\/p>\n

          \/\/ store \u4e2d\u542f\u7528<\/span>
          \nexport<\/span> const<\/span> useUserStore =<\/span> defineStore<\/span>(<\/span>'user'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
          \n \/\/ …<\/span>
          \n}<\/span>,<\/span> {<\/span>
          \n persist<\/span>:<\/span> true<\/span> \/\/ \u6216 { key: 'user', storage: localStorage }<\/span>
          \n}<\/span>)<\/span><\/p>\n

          \n

          11. TypeScript \u96c6\u6210<\/h3>\n

          11.1 \u9879\u76ee\u914d\u7f6e<\/h4>\n

          npm<\/span> create vue@latest # \u9009\u62e9 TypeScript<\/span><\/p>\n

          \/\/ tsconfig.json \u5173\u952e\u914d\u7f6e<\/span>
          \n{<\/span>
          \n "compilerOptions"<\/span>:<\/span> {<\/span>
          \n "target"<\/span>:<\/span> "ESNext"<\/span>,<\/span>
          \n "module"<\/span>:<\/span> "ESNext"<\/span>,<\/span>
          \n "moduleResolution"<\/span>:<\/span> "bundler"<\/span>,<\/span>
          \n "strict"<\/span>:<\/span> true<\/span>,<\/span>
          \n "jsx"<\/span>:<\/span> "preserve"<\/span>,<\/span>
          \n "paths"<\/span>:<\/span> {<\/span> "@\/*"<\/span>:<\/span> [<\/span>".\/src\/*"<\/span>]<\/span> }<\/span>
          \n }<\/span>
          \n}<\/span><\/p>\n

          11.2 \u7ec4\u4ef6\u4e2d\u7684 TS<\/h4>\n

          <script setup lang="ts">
          \nimport { ref, computed } from 'vue'
          \nimport type { Ref } from 'vue'<\/p>\n

          \/\/ \u81ea\u52a8\u63a8\u65ad
          \nconst count = ref(0) \/\/ Ref<number><\/p>\n

          \/\/ \u663e\u5f0f\u6cdb\u578b
          \nconst list = ref<string[]>([])
          \nconst user = ref<{ name: string; age: number } | null>(null)<\/p>\n

          \/\/ Props \u7c7b\u578b
          \ninterface Props {
          \n title: string
          \n items?: string[]
          \n}
          \nconst props = withDefaults(defineProps<Props>(), {
          \n items: () => []
          \n})<\/p>\n

          \/\/ Emits \u7c7b\u578b
          \nconst emit = defineEmits<{
          \n change: [value: string]
          \n delete: [id: number]
          \n}>()<\/p>\n

          \/\/ Ref \u7c7b\u578b
          \nconst inputRef = ref<HTMLInputElement | null>(null)<\/p>\n

          \/\/ \u7ec4\u4ef6 ref \u7c7b\u578b
          \nimport Child from '.\/Child.vue'
          \nconst childRef = ref<InstanceType<typeof Child> | null>(null)
          \n<\/script><\/p>\n

          11.3 \u6ce8\u5165\u7c7b\u578b\u5b89\u5168<\/h4>\n

          import<\/span> type<\/span> {<\/span> InjectionKey,<\/span> Ref }<\/span> from<\/span> 'vue'<\/span><\/p>\n

          export<\/span> const<\/span> CountKey:<\/span> InjectionKey<<\/span>Ref<<\/span>number<\/span>>><\/span> =<\/span> Symbol<\/span>(<\/span>'count'<\/span>)<\/span><\/p>\n

          \/\/ provide<\/span>
          \nprovide<\/span>(<\/span>CountKey,<\/span> ref<\/span>(<\/span>0<\/span>)<\/span>)<\/span><\/p>\n

          \/\/ inject – \u81ea\u52a8\u63a8\u65ad\u4e3a Ref<number><\/span>
          \nconst<\/span> count =<\/span> inject<\/span>(<\/span>CountKey)<\/span>!<\/span><\/p>\n

          11.4 \u6a21\u677f ref \u7c7b\u578b<\/h4>\n

          <script setup lang="ts">
          \nimport { ref, onMounted } from 'vue'<\/p>\n

          \/\/ DOM \u5143\u7d20
          \nconst el = ref<HTMLDivElement | null>(null)<\/p>\n

          \/\/ \u7ec4\u4ef6\u5b9e\u4f8b
          \nimport MyComp from '.\/MyComp.vue'
          \nconst comp = ref<InstanceType<typeof MyComp> | null>(null)<\/p>\n

          onMounted(() => {
          \n el.value?.focus()
          \n comp.value?.reset()
          \n})
          \n<\/script><\/p>\n

          <template>
          \n <div ref="el" tabindex="0">Focusable<\/div>
          \n <MyComp ref="comp" \/>
          \n<\/template><\/p>\n

          \n

          12. \u6027\u80fd\u4f18\u5316<\/h3>\n

          12.1 \u7f16\u8bd1\u5c42\u4f18\u5316<\/h4>\n
            \n
          • Tree-shaking：\u672a\u4f7f\u7528\u7684 API \u4e0d\u4f1a\u6253\u5305<\/li>\n
          • \u9759\u6001\u63d0\u5347（hoistStatic）：\u9759\u6001\u8282\u70b9\u63d0\u5347\u5230\u6e32\u67d3\u51fd\u6570\u5916<\/li>\n
          • Patch Flags：\u7f16\u8bd1\u65f6\u6807\u8bb0\u52a8\u6001\u7ed1\u5b9a\u7c7b\u578b，\u8fd0\u884c\u65f6\u7cbe\u51c6 diff<\/li>\n
          • Block Tree：\u5c06\u6a21\u677f\u5206\u5757，\u53ea\u8ffd\u8e2a\u52a8\u6001\u8282\u70b9<\/li>\n
          • \u7f13\u5b58\u4e8b\u4ef6\u5904\u7406\u51fd\u6570：cacheHandlers<\/li>\n<\/ul>\n

            12.2 \u8fd0\u884c\u65f6\u4f18\u5316<\/h4>\n

            <script setup>
            \nimport { shallowRef, vModelText } from 'vue'<\/p>\n

            \/\/ 1. \u5927\u5217\u8868\u7528 shallowRef \/ shallowReactive
            \nconst bigList = shallowRef(hugeArray)<\/p>\n

            \/\/ 2. v-once：\u53ea\u6e32\u67d3\u4e00\u6b21
            \n\/\/ <div v-once>{{ staticContent }}<\/div><\/p>\n

            \/\/ 3. v-memo：\u6761\u4ef6\u8bb0\u5fc6\u5316
            \n\/\/ <div v-memo="[item.id === selected]">…<\/div><\/p>\n

            \/\/ 4. \u865a\u62df\u5217\u8868（\u5927\u91cf\u6570\u636e）
            \n\/\/ \u4f7f\u7528 vue-virtual-scroller \/ @tanstack\/vue-virtual
            \n<\/script><\/p>\n

            12.3 \u7ec4\u4ef6\u7ea7\u4f18\u5316<\/h4>\n

            \/\/ 1. \u5f02\u6b65\u7ec4\u4ef6 \/ \u4ee3\u7801\u5206\u5272<\/span>
            \nimport<\/span> {<\/span> defineAsyncComponent }<\/span> from<\/span> 'vue'<\/span>
            \nconst<\/span> HeavyChart =<\/span> defineAsyncComponent<\/span>(<\/span>(<\/span>)<\/span> =><\/span>
            \n import<\/span>(<\/span>'.\/HeavyChart.vue'<\/span>)<\/span>
            \n)<\/span><\/p>\n

            \/\/ 2. KeepAlive \u7f13\u5b58<\/span>
            \n\/\/ <KeepAlive :max="5"><\/span>
            \n\/\/ <component :is="currentView" \/><\/span>
            \n\/\/ <\/KeepAlive><\/span><\/p>\n

            \/\/ 3. \u907f\u514d\u4e0d\u5fc5\u8981\u7684\u54cd\u5e94\u5f0f<\/span>
            \nimport<\/span> {<\/span> markRaw }<\/span> from<\/span> 'vue'<\/span>
            \nconst<\/span> chartInstance =<\/span> markRaw<\/span>(<\/span>new<\/span> ECharts<\/span>(<\/span>)<\/span>)<\/span> \/\/ \u4e0d\u9700\u8981\u54cd\u5e94\u5f0f<\/span><\/p>\n

            \/\/ 4. \u51fd\u6570\u5f0f\u7ec4\u4ef6（\u7eaf\u5c55\u793a）<\/span>
            \nconst<\/span> FuncComp<\/span> =<\/span> (<\/span>props<\/span>)<\/span> =><\/span> h<\/span>(<\/span>'div'<\/span>,<\/span> props.<\/span>msg)<\/span><\/p>\n

            12.4 \u5217\u8868\u4f18\u5316<\/h4>\n

            <!– \u2705 \u6b63\u786e：\u552f\u4e00 key –>
            \n<li v-for="item in list" :key="item.id">{{ item.name }}<\/li><\/p>\n

            <!– \u274c \u9519\u8bef：\u7528 index –>
            \n<li v-for="(item, i) in list" :key="i">{{ item.name }}<\/li><\/p>\n

            <!– \u5927\u5217\u8868：\u5206\u9875 \/ \u865a\u62df\u6eda\u52a8 –>
            \n<VirtualList :items="items" :item-height="50" v-slot="{ item }">
            \n <div>{{ item.name }}<\/div>
            \n<\/VirtualList><\/p>\n

            12.5 \u5176\u4ed6\u6280\u5de7<\/h4>\n

            \/\/ \u9632\u6296\/\u8282\u6d41\u641c\u7d22<\/span>
            \nimport<\/span> {<\/span> useDebouncedRef }<\/span> from<\/span> '.\/useDebouncedRef'<\/span>
            \nconst<\/span> search =<\/span> useDebouncedRef<\/span>(<\/span>''<\/span>,<\/span> 300<\/span>)<\/span>
            \nwatch<\/span>(<\/span>search,<\/span> (<\/span>val<\/span>)<\/span> =><\/span> fetchResults<\/span>(<\/span>val)<\/span>)<\/span><\/p>\n

            \/\/ \u56fe\u7247\u61d2\u52a0\u8f7d<\/span>
            \n\/\/ <img v-lazy="imageUrl" \/> （\u81ea\u5b9a\u4e49\u6307\u4ee4\u6216 vue-lazyload）<\/span><\/p>\n

            \/\/ \u8def\u7531\u61d2\u52a0\u8f7d<\/span>
            \ncomponent<\/span>:<\/span> (<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'.\/views\/About.vue'<\/span>)<\/span><\/p>\n

            \/\/ \u7b2c\u4e09\u65b9\u5e93\u6309\u9700\u5f15\u5165<\/span>
            \n\/\/ import { debounce } from 'lodash-es' \/\/ \u2705<\/span>
            \n\/\/ import _ from 'lodash' \/\/ \u274c<\/span><\/p>\n

            \n

            13. \u7f16\u8bd1\u4f18\u5316<\/h3>\n

            13.1 Patch Flags \u8be6\u89e3<\/h4>\n

            \/\/ \u7f16\u8bd1\u524d<\/span>
            \n\/\/ <div><span>static<\/span><span>{{ dynamic }}<\/span><\/div><\/span><\/p>\n

            \/\/ \u7f16\u8bd1\u540e（\u7b80\u5316）<\/span>
            \nimport<\/span> {<\/span> createElementVNode as<\/span> _createElementVNode,<\/span> toDisplayString as<\/span> _toDisplayString,<\/span> openBlock as<\/span> _openBlock,<\/span> createElementBlock as<\/span> _createElementBlock }<\/span> from<\/span> "vue"<\/span><\/p>\n

            const<\/span> _hoisted_1 =<\/span> \/*#__PURE__*\/<\/span>_createElementVNode<\/span>(<\/span>"span"<\/span>,<\/span> null<\/span>,<\/span> "static"<\/span>,<\/span> –<\/span>1<\/span> \/* HOISTED *\/<\/span>)<\/span><\/p>\n

            export<\/span> function<\/span> render<\/span>(<\/span>_ctx,<\/span> _cache<\/span>)<\/span> {<\/span>
            \n return<\/span> (<\/span>_openBlock<\/span>(<\/span>)<\/span>,<\/span> _createElementBlock<\/span>(<\/span>"div"<\/span>,<\/span> null<\/span>,<\/span> [<\/span>
            \n _hoisted_1,<\/span>
            \n _createElementVNode<\/span>(<\/span>"span"<\/span>,<\/span> null<\/span>,<\/span> _toDisplayString<\/span>(<\/span>_ctx.<\/span>dynamic)<\/span>,<\/span> 1<\/span> \/* TEXT *\/<\/span>)<\/span>
            \n ]<\/span>)<\/span>)<\/span>
            \n}<\/span><\/p>\n

            \u5e38\u89c1 PatchFlag：<\/p>\n\nFlag\u503c\u542b\u4e49<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n
            TEXT<\/td>\n1<\/td>\n\u52a8\u6001\u6587\u672c<\/td>\n<\/tr>\n
            CLASS<\/td>\n2<\/td>\n\u52a8\u6001 class<\/td>\n<\/tr>\n
            STYLE<\/td>\n4<\/td>\n\u52a8\u6001 style<\/td>\n<\/tr>\n
            PROPS<\/td>\n8<\/td>\n\u52a8\u6001\u975e class\/style props<\/td>\n<\/tr>\n
            FULL_PROPS<\/td>\n16<\/td>\n\u52a8\u6001 key \u4e0d\u786e\u5b9a\u7684 props<\/td>\n<\/tr>\n
            NEED_HYDRATION<\/td>\n32<\/td>\nSSR \u9700\u8981\u6c34\u5408<\/td>\n<\/tr>\n
            STABLE_FRAGMENT<\/td>\n64<\/td>\n\u5b50\u8282\u70b9\u987a\u5e8f\u4e0d\u53d8<\/td>\n<\/tr>\n
            KEYED_FRAGMENT<\/td>\n128<\/td>\n\u6709 key \u7684 fragment<\/td>\n<\/tr>\n
            UNKEYED_FRAGMENT<\/td>\n256<\/td>\n\u65e0 key \u7684 fragment<\/td>\n<\/tr>\n
            HOISTED<\/td>\n-1<\/td>\n\u9759\u6001\u63d0\u5347<\/td>\n<\/tr>\n
            BAIL<\/td>\n-2<\/td>\n\u9000\u51fa\u4f18\u5316\u6a21\u5f0f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

            13.2 Block Tree<\/h4>\n

            <template>
            \n <div> <!– Block root –>
            \n <p>static<\/p> <!– \u4e0d\u8ffd\u8e2a –>
            \n <p>{{ a }}<\/p> <!– \u8ffd\u8e2a –>
            \n <p v-if="ok">{{ b }}<\/p> <!– \u6761\u4ef6\u5757 –>
            \n <p>{{ c }}<\/p> <!– \u8ffd\u8e2a –>
            \n <\/div>
            \n<\/template><\/p>\n

            \u8fd0\u884c\u65f6 diff \u53ea\u6bd4\u8f83 Block \u6536\u96c6\u7684\u52a8\u6001\u8282\u70b9\u6570\u7ec4，\u8df3\u8fc7\u6240\u6709\u9759\u6001\u5185\u5bb9\u3002<\/p>\n

            \n

            14. Teleport \/ Suspense \/ \u5f02\u6b65\u7ec4\u4ef6<\/h3>\n

            14.1 Teleport<\/h4>\n

            \u5c06\u5185\u5bb9\u6e32\u67d3\u5230 DOM \u6811\u7684\u5176\u4ed6\u4f4d\u7f6e：<\/p>\n

            <template>
            \n <button @click="showModal = true">\u6253\u5f00\u5f39\u7a97<\/button><\/p>\n

            <Teleport to="body">
            \n <div v-if="showModal" class="modal-overlay">
            \n <div class="modal">
            \n <p>\u5f39\u7a97\u5185\u5bb9<\/p>
            \n <button @click="showModal = false">\u5173\u95ed<\/button>
            \n <\/div>
            \n <\/div>
            \n <\/Teleport>
            \n<\/template><\/p>\n

            <!– \u7981\u7528 teleport –>
            \n<Teleport to="body" :disabled="isMobile">
            \n <div class="tooltip">…<\/div>
            \n<\/Teleport><\/p>\n

            14.2 Suspense（\u5b9e\u9a8c\u6027）<\/h4>\n

            <template>
            \n <Suspense>
            \n <!– \u9ed8\u8ba4\u63d2\u69fd：\u5f02\u6b65\u5185\u5bb9 –>
            \n <template #default>
            \n <AsyncDashboard \/> <!– setup() \u4e2d\u6709 await \u7684\u7ec4\u4ef6 –>
            \n <\/template><\/p>\n

            <!– \u52a0\u8f7d\u72b6\u6001 –>
            \n <template #fallback>
            \n <LoadingSpinner \/>
            \n <\/template>
            \n <\/Suspense>
            \n<\/template><\/p>\n

            <!– AsyncDashboard.vue –>
            \n<script setup>
            \n\/\/ \u9876\u5c42 await \u2192 \u7ec4\u4ef6\u53d8\u4e3a\u5f02\u6b65\u4f9d\u8d56
            \nconst data = await fetchDashboardData()
            \n<\/script><\/p>\n

            Suspense \u4e8b\u4ef6：<\/p>\n

            <Suspense
            \n @resolve="onResolve"
            \n @pending="onPending"
            \n @fallback="onFallback"
            \n><\/p>\n

            14.3 \u5f02\u6b65\u7ec4\u4ef6<\/h4>\n

            import<\/span> {<\/span> defineAsyncComponent }<\/span> from<\/span> 'vue'<\/span><\/p>\n

            \/\/ \u7b80\u5355\u7528\u6cd5<\/span>
            \nconst<\/span> AsyncComp =<\/span> defineAsyncComponent<\/span>(<\/span>(<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'.\/Comp.vue'<\/span>)<\/span>)<\/span><\/p>\n

            \/\/ \u5b8c\u6574\u914d\u7f6e<\/span>
            \nconst<\/span> AsyncCompWithOptions =<\/span> defineAsyncComponent<\/span>(<\/span>{<\/span>
            \n loader<\/span>:<\/span> (<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'.\/Comp.vue'<\/span>)<\/span>,<\/span>
            \n loadingComponent<\/span>:<\/span> LoadingSpinner,<\/span>
            \n errorComponent<\/span>:<\/span> ErrorDisplay,<\/span>
            \n delay<\/span>:<\/span> 200<\/span>,<\/span> \/\/ \u663e\u793a loading \u524d\u7684\u5ef6\u8fdf<\/span>
            \n timeout<\/span>:<\/span> 10000<\/span>,<\/span> \/\/ \u8d85\u65f6<\/span>
            \n suspensible<\/span>:<\/span> false<\/span>,<\/span> \/\/ \u662f\u5426\u88ab Suspense \u63a5\u7ba1<\/span>
            \n onError<\/span>(<\/span>error,<\/span> retry,<\/span> fail,<\/span> attempts<\/span>)<\/span> {<\/span>
            \n if<\/span> (<\/span>attempts <=<\/span> 3<\/span>)<\/span> retry<\/span>(<\/span>)<\/span>
            \n else<\/span> fail<\/span>(<\/span>)<\/span>
            \n }<\/span>
            \n}<\/span>)<\/span><\/p>\n

            \n

            15. \u81ea\u5b9a\u4e49\u6307\u4ee4<\/h3>\n

            15.1 \u5b9a\u4e49<\/h4>\n

            \/\/ Vue 3 \u94a9\u5b50\u540d\u79f0\u4e0e\u751f\u547d\u5468\u671f\u5bf9\u9f50<\/span>
            \nconst<\/span> myDirective =<\/span> {<\/span>
            \n created<\/span>(<\/span>el,<\/span> binding,<\/span> vnode<\/span>)<\/span> {<\/span>}<\/span>,<\/span> \/\/ \u5143\u7d20\u521b\u5efa\u540e<\/span>
            \n beforeMount<\/span>(<\/span>el,<\/span> binding,<\/span> vnode<\/span>)<\/span> {<\/span>}<\/span>,<\/span> \/\/ \u6302\u8f7d\u524d<\/span>
            \n mounted<\/span>(<\/span>el,<\/span> binding,<\/span> vnode<\/span>)<\/span> {<\/span>}<\/span>,<\/span> \/\/ \u6302\u8f7d\u540e<\/span>
            \n beforeUpdate<\/span>(<\/span>el,<\/span> binding,<\/span> vnode,<\/span> prevVnode<\/span>)<\/span> {<\/span>}<\/span>,<\/span>
            \n updated<\/span>(<\/span>el,<\/span> binding,<\/span> vnode,<\/span> prevVnode<\/span>)<\/span> {<\/span>}<\/span>,<\/span>
            \n beforeUnmount<\/span>(<\/span>el,<\/span> binding,<\/span> vnode<\/span>)<\/span> {<\/span>}<\/span>,<\/span>
            \n unmounted<\/span>(<\/span>el,<\/span> binding,<\/span> vnode<\/span>)<\/span> {<\/span>}<\/span>
            \n}<\/span><\/p>\n

            15.2 \u4f7f\u7528<\/h4>\n

            <script setup>
            \n\/\/ \u5c40\u90e8\u6ce8\u518c（script setup \u4e2d\u4ee5 v \u5f00\u5934\u7684\u53d8\u91cf\u81ea\u52a8\u6ce8\u518c）
            \nconst vFocus = {
            \n mounted: (el) => el.focus()
            \n}<\/p>\n

            const vHighlight = {
            \n mounted(el, binding) {
            \n el.style.backgroundColor = binding.value || 'yellow'
            \n },
            \n updated(el, binding) {
            \n el.style.backgroundColor = binding.value || 'yellow'
            \n }
            \n}
            \n<\/script><\/p>\n

            <template>
            \n <input v-focus \/>
            \n <p v-highlight="'lightblue'">\u9ad8\u4eae\u6587\u672c<\/p>
            \n <p v-highlight>\u9ed8\u8ba4\u9ec4\u8272<\/p>
            \n<\/template><\/p>\n

            \/\/ \u5168\u5c40\u6ce8\u518c<\/span>
            \napp.<\/span>directive<\/span>(<\/span>'focus'<\/span>,<\/span> {<\/span>
            \n mounted<\/span>(<\/span>el<\/span>)<\/span> {<\/span> el.<\/span>focus<\/span>(<\/span>)<\/span> }<\/span>
            \n}<\/span>)<\/span><\/p>\n

            \/\/ \u7b80\u5199（mounted + updated \u76f8\u540c\u903b\u8f91）<\/span>
            \napp.<\/span>directive<\/span>(<\/span>'color'<\/span>,<\/span> (<\/span>el,<\/span> binding<\/span>)<\/span> =><\/span> {<\/span>
            \n el.<\/span>style.<\/span>color =<\/span> binding.<\/span>value
            \n}<\/span>)<\/span><\/p>\n

            15.3 binding \u5bf9\u8c61<\/h4>\n

            {<\/span>
            \n value<\/span>:<\/span> '\u7ed1\u5b9a\u503c'<\/span>,<\/span> \/\/ v-xxx:value<\/span>
            \n oldValue<\/span>:<\/span> '\u65e7\u503c'<\/span>,<\/span> \/\/ \u4ec5 updated<\/span>
            \n arg<\/span>:<\/span> '\u53c2\u6570'<\/span>,<\/span> \/\/ v-xxx:arg<\/span>
            \n modifiers<\/span>:<\/span> {<\/span> mod<\/span>:<\/span> true<\/span> }<\/span>,<\/span> \/\/ v-xxx.mod<\/span>
            \n instance<\/span>:<\/span> null<\/span>,<\/span> \/\/ \u7ec4\u4ef6\u5b9e\u4f8b<\/span>
            \n dir<\/span>:<\/span> {<\/span> \/* \u6307\u4ee4\u5b9a\u4e49 *\/<\/span> }<\/span>
            \n}<\/span><\/p>\n

            \n

            16. \u63d2\u4ef6\u7cfb\u7edf<\/h3>\n

            16.1 \u7f16\u5199\u63d2\u4ef6<\/h4>\n

            \/\/ myPlugin.js<\/span>
            \nexport<\/span> default<\/span> {<\/span>
            \n install<\/span>(<\/span>app,<\/span> options<\/span>)<\/span> {<\/span>
            \n \/\/ \u5168\u5c40\u7ec4\u4ef6<\/span>
            \n app.<\/span>component<\/span>(<\/span>'MyIcon'<\/span>,<\/span> MyIcon)<\/span><\/p>\n

            \/\/ \u5168\u5c40\u6307\u4ee4<\/span>
            \n app.<\/span>directive<\/span>(<\/span>'tooltip'<\/span>,<\/span> tooltipDirective)<\/span><\/p>\n

            \/\/ \u5168\u5c40\u5c5e\u6027<\/span>
            \n app.<\/span>config.<\/span>globalProperties.<\/span>$format<\/span> =<\/span> (<\/span>val<\/span>)<\/span> =><\/span> {<\/span> \/* … *\/<\/span> }<\/span><\/p>\n

            \/\/ provide \u6ce8\u5165<\/span>
            \n app.<\/span>provide<\/span>(<\/span>'pluginOptions'<\/span>,<\/span> options)<\/span><\/p>\n

            \/\/ \u5168\u5c40 mixin（\u8c28\u614e\u4f7f\u7528）<\/span>
            \n app.<\/span>mixin<\/span>(<\/span>{<\/span>
            \n created<\/span>(<\/span>)<\/span> {<\/span> \/* … *\/<\/span> }<\/span>
            \n }<\/span>)<\/span>
            \n }<\/span>
            \n}<\/span><\/p>\n

            16.2 \u4f7f\u7528\u63d2\u4ef6<\/h4>\n

            import<\/span> myPlugin from<\/span> '.\/myPlugin'<\/span><\/p>\n

            const<\/span> app =<\/span> createApp<\/span>(<\/span>App)<\/span>
            \napp.<\/span>use<\/span>(<\/span>myPlugin,<\/span> {<\/span> theme<\/span>:<\/span> 'dark'<\/span> }<\/span>)<\/span>
            \napp.<\/span>mount<\/span>(<\/span>'#app'<\/span>)<\/span><\/p>\n

            \n

            17. \u6e32\u67d3\u51fd\u6570\u4e0e JSX<\/h3>\n

            17.1 h() \u51fd\u6570<\/h4>\n

            import<\/span> {<\/span> h,<\/span> ref }<\/span> from<\/span> 'vue'<\/span><\/p>\n

            \/\/ \u57fa\u672c\u7528\u6cd5<\/span>
            \nconst<\/span> vnode =<\/span> h<\/span>(<\/span>'div'<\/span>,<\/span> {<\/span> class<\/span>:<\/span> 'container'<\/span> }<\/span>,<\/span> [<\/span>
            \n h<\/span>(<\/span>'h1'<\/span>,<\/span> 'Title'<\/span>)<\/span>,<\/span>
            \n h<\/span>(<\/span>'p'<\/span>,<\/span> {<\/span> style<\/span>:<\/span> 'color: red'<\/span> }<\/span>,<\/span> 'Content'<\/span>)<\/span>
            \n]<\/span>)<\/span><\/p>\n

            \/\/ \u7ec4\u4ef6<\/span>
            \nimport<\/span> MyComp from<\/span> '.\/MyComp.vue'<\/span>
            \nconst<\/span> compVnode =<\/span> h<\/span>(<\/span>MyComp,<\/span> {<\/span>
            \n title<\/span>:<\/span> 'Hello'<\/span>,<\/span>
            \n onChange<\/span>:<\/span> (<\/span>val<\/span>)<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>val)<\/span>
            \n}<\/span>,<\/span> {<\/span>
            \n default<\/span>:<\/span> (<\/span>)<\/span> =><\/span> 'Slot content'<\/span>,<\/span>
            \n header<\/span>:<\/span> (<\/span>)<\/span> =><\/span> h<\/span>(<\/span>'h2'<\/span>,<\/span> 'Header'<\/span>)<\/span>
            \n}<\/span>)<\/span><\/p>\n

            \/\/ \u6761\u4ef6\u6e32\u67d3<\/span>
            \nconst<\/span> render<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
            \n return<\/span> show.<\/span>value
            \n ?<\/span> h<\/span>(<\/span>'div'<\/span>,<\/span> 'Visible'<\/span>)<\/span>
            \n :<\/span> h<\/span>(<\/span>'span'<\/span>,<\/span> 'Hidden'<\/span>)<\/span>
            \n}<\/span><\/p>\n

            \/\/ \u5217\u8868\u6e32\u67d3<\/span>
            \nconst<\/span> render<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
            \n return<\/span> h<\/span>(<\/span>'ul'<\/span>,<\/span> items.<\/span>value.<\/span>map<\/span>(<\/span>item<\/span> =><\/span>
            \n h<\/span>(<\/span>'li'<\/span>,<\/span> {<\/span> key<\/span>:<\/span> item.<\/span>id }<\/span>,<\/span> item.<\/span>name)<\/span>
            \n )<\/span>)<\/span>
            \n}<\/span><\/p>\n

            17.2 JSX（\u9700 @vitejs\/plugin-vue-jsx）<\/h4>\n

            import { defineComponent, ref } from 'vue'<\/p>\n

            export default defineComponent({
            \n setup() {
            \n const count = ref(0)<\/p>\n

            return () => (
            \n <div class="container">
            \n <h1>Count: {count.value}<\/h1>
            \n <button onClick={() => count.value++}>+1<\/button>
            \n {count.value > 5 && <p>Big number!<\/p>}
            \n <ul>
            \n {items.value.map(item => (
            \n <li key={item.id}>{item.name}<\/li>
            \n ))}
            \n <\/ul>
            \n <\/div>
            \n )
            \n }
            \n})<\/p>\n

            17.3 \u6e32\u67d3\u51fd\u6570 vs \u6a21\u677f<\/h4>\n\n\u573a\u666f\u63a8\u8350<\/tr>\n\n\n\n\n\n
            \u5e38\u89c4 UI<\/td>\n\u6a21\u677f（\u53ef\u8bfb\u6027 + \u7f16\u8bd1\u4f18\u5316）<\/td>\n<\/tr>\n
            \u9ad8\u5ea6\u52a8\u6001\/\u9012\u5f52\u7ec4\u4ef6<\/td>\n\u6e32\u67d3\u51fd\u6570<\/td>\n<\/tr>\n
            \u7ec4\u4ef6\u5e93\/\u62bd\u8c61\u7ec4\u4ef6<\/td>\n\u6e32\u67d3\u51fd\u6570 \/ JSX<\/td>\n<\/tr>\n
            \u9700\u8981\u5b8c\u6574 JS \u8868\u8fbe\u529b<\/td>\nJSX<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            \n

            18. \u670d\u52a1\u7aef\u6e32\u67d3（SSR）<\/h3>\n

            18.1 \u57fa\u672c\u6d41\u7a0b<\/h4>\n

            \u5ba2\u6237\u7aef\u8bf7\u6c42
            \n \u2502
            \n \u25bc
            \n\u670d\u52a1\u5668\u6267\u884c Vue \u7ec4\u4ef6 \u2192 \u751f\u6210 HTML \u5b57\u7b26\u4e32
            \n \u2502
            \n \u25bc
            \n\u8fd4\u56de\u5b8c\u6574 HTML（\u9996\u5c4f\u53ef\u89c1）
            \n \u2502
            \n \u25bc
            \n\u5ba2\u6237\u7aef\u52a0\u8f7d JS \u2192 \u6c34\u5408（Hydration）\u2192 \u4ea4\u4e92\u53ef\u7528<\/p>\n

            18.2 \u6838\u5fc3 API<\/h4>\n

            \/\/ \u670d\u52a1\u5668\u7aef<\/span>
            \nimport<\/span> {<\/span> renderToString }<\/span> from<\/span> 'vue\/server-renderer'<\/span>
            \nimport<\/span> {<\/span> createSSRApp }<\/span> from<\/span> 'vue'<\/span><\/p>\n

            const<\/span> app =<\/span> createSSRApp<\/span>(<\/span>App)<\/span>
            \nconst<\/span> html =<\/span> await<\/span> renderToString<\/span>(<\/span>app)<\/span><\/p>\n

            \/\/ \u5ba2\u6237\u7aef<\/span>
            \nimport<\/span> {<\/span> createSSRApp }<\/span> from<\/span> 'vue'<\/span>
            \nconst<\/span> app =<\/span> createSSRApp<\/span>(<\/span>App)<\/span>
            \napp.<\/span>mount<\/span>(<\/span>'#app'<\/span>)<\/span> \/\/ \u6c34\u5408\u800c\u975e\u91cd\u65b0\u6e32\u67d3<\/span><\/p>\n

            18.3 \u6570\u636e\u9884\u53d6<\/h4>\n

            <script setup>
            \nimport { useAsyncData } from '#app' \/\/ Nuxt 3<\/p>\n

            const { data, pending, error } = await useAsyncData('posts', () =>
            \n $fetch('\/api\/posts')
            \n)
            \n<\/script><\/p>\n

            18.4 \u6d41\u5f0f\u6e32\u67d3（Vue 3.5+）<\/h4>\n

            import<\/span> {<\/span> renderToStream }<\/span> from<\/span> 'vue\/server-renderer'<\/span><\/p>\n

            const<\/span> stream =<\/span> renderToStream<\/span>(<\/span>app)<\/span>
            \nstream.<\/span>pipe<\/span>(<\/span>res)<\/span> \/\/ Node.js response<\/span><\/p>\n

            18.5 Nuxt 3 \u6846\u67b6<\/h4>\n

            npx nuxi@latest init my-app<\/p>\n

            nuxt.config.ts # \u914d\u7f6e
            \npages\/ # \u6587\u4ef6\u7cfb\u7edf\u8def\u7531
            \ncomponents\/ # \u81ea\u52a8\u5bfc\u5165\u7ec4\u4ef6
            \ncomposables\/ # \u81ea\u52a8\u5bfc\u5165\u7ec4\u5408\u5f0f\u51fd\u6570
            \nserver\/api\/ # API \u8def\u7531
            \nmiddleware\/ # \u8def\u7531\u4e2d\u95f4\u4ef6
            \nplugins\/ # \u63d2\u4ef6<\/p>\n

            \n

            19. \u6d4b\u8bd5<\/h3>\n

            19.1 \u5355\u5143\u6d4b\u8bd5（Vitest）<\/h4>\n

            \/\/ vitest.config.ts<\/span>
            \nimport<\/span> {<\/span> defineConfig }<\/span> from<\/span> 'vitest\/config'<\/span>
            \nimport<\/span> vue from<\/span> '@vitejs\/plugin-vue'<\/span><\/p>\n

            export<\/span> default<\/span> defineConfig<\/span>(<\/span>{<\/span>
            \n plugins<\/span>:<\/span> [<\/span>vue<\/span>(<\/span>)<\/span>]<\/span>,<\/span>
            \n test<\/span>:<\/span> {<\/span>
            \n environment<\/span>:<\/span> 'jsdom'<\/span>,<\/span> \/\/ \u6216 happy-dom<\/span>
            \n globals<\/span>:<\/span> true<\/span>
            \n }<\/span>
            \n}<\/span>)<\/span><\/p>\n

            \/\/ Counter.test.ts<\/span>
            \nimport<\/span> {<\/span> describe,<\/span> it,<\/span> expect }<\/span> from<\/span> 'vitest'<\/span>
            \nimport<\/span> {<\/span> ref,<\/span> computed,<\/span> nextTick }<\/span> from<\/span> 'vue'<\/span>
            \nimport<\/span> {<\/span> useCounter }<\/span> from<\/span> '.\/useCounter'<\/span><\/p>\n

            describe<\/span>(<\/span>'useCounter'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
            \n it<\/span>(<\/span>'increments'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
            \n const<\/span> {<\/span> count,<\/span> increment }<\/span> =<\/span> useCounter<\/span>(<\/span>0<\/span>)<\/span>
            \n increment<\/span>(<\/span>)<\/span>
            \n expect<\/span>(<\/span>count.<\/span>value)<\/span>.<\/span>toBe<\/span>(<\/span>1<\/span>)<\/span>
            \n }<\/span>)<\/span><\/p>\n

            it<\/span>(<\/span>'computes double'<\/span>,<\/span> async<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
            \n const<\/span> {<\/span> count,<\/span> double }<\/span> =<\/span> useCounter<\/span>(<\/span>5<\/span>)<\/span>
            \n expect<\/span>(<\/span>double.<\/span>value)<\/span>.<\/span>toBe<\/span>(<\/span>10<\/span>)<\/span>
            \n count.<\/span>value =<\/span> 10<\/span>
            \n await<\/span> nextTick<\/span>(<\/span>)<\/span>
            \n expect<\/span>(<\/span>double.<\/span>value)<\/span>.<\/span>toBe<\/span>(<\/span>20<\/span>)<\/span>
            \n }<\/span>)<\/span>
            \n}<\/span>)<\/span><\/p>\n

            19.2 \u7ec4\u4ef6\u6d4b\u8bd5（Vue Test Utils）<\/h4>\n

            \/\/ npm i -D @vue\/test-utils<\/span>
            \nimport<\/span> {<\/span> mount }<\/span> from<\/span> '@vue\/test-utils'<\/span>
            \nimport<\/span> {<\/span> describe,<\/span> it,<\/span> expect }<\/span> from<\/span> 'vitest'<\/span>
            \nimport<\/span> Counter from<\/span> '.\/Counter.vue'<\/span><\/p>\n

            describe<\/span>(<\/span>'Counter'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
            \n it<\/span>(<\/span>'renders count'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
            \n const<\/span> wrapper =<\/span> mount<\/span>(<\/span>Counter,<\/span> {<\/span>
            \n props<\/span>:<\/span> {<\/span> initial<\/span>:<\/span> 5<\/span> }<\/span>
            \n }<\/span>)<\/span>
            \n expect<\/span>(<\/span>wrapper.<\/span>text<\/span>(<\/span>)<\/span>)<\/span>.<\/span>toContain<\/span>(<\/span>'5'<\/span>)<\/span>
            \n }<\/span>)<\/span><\/p>\n

            it<\/span>(<\/span>'increments on click'<\/span>,<\/span> async<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
            \n const<\/span> wrapper =<\/span> mount<\/span>(<\/span>Counter)<\/span>
            \n await<\/span> wrapper.<\/span>find<\/span>(<\/span>'button'<\/span>)<\/span>.<\/span>trigger<\/span>(<\/span>'click'<\/span>)<\/span>
            \n expect<\/span>(<\/span>wrapper.<\/span>find<\/span>(<\/span>'.count'<\/span>)<\/span>.<\/span>text<\/span>(<\/span>)<\/span>)<\/span>.<\/span>toBe<\/span>(<\/span>'1'<\/span>)<\/span>
            \n }<\/span>)<\/span><\/p>\n

            it<\/span>(<\/span>'emits change event'<\/span>,<\/span> async<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
            \n const<\/span> wrapper =<\/span> mount<\/span>(<\/span>Counter)<\/span>
            \n await<\/span> wrapper.<\/span>find<\/span>(<\/span>'button'<\/span>)<\/span>.<\/span>trigger<\/span>(<\/span>'click'<\/span>)<\/span>
            \n expect<\/span>(<\/span>wrapper.<\/span>emitted<\/span>(<\/span>'change'<\/span>)<\/span>)<\/span>.<\/span>toHaveLength<\/span>(<\/span>1<\/span>)<\/span>
            \n expect<\/span>(<\/span>wrapper.<\/span>emitted<\/span>(<\/span>'change'<\/span>)<\/span>[<\/span>0<\/span>]<\/span>)<\/span>.<\/span>toEqual<\/span>(<\/span>[<\/span>1<\/span>]<\/span>)<\/span>
            \n }<\/span>)<\/span><\/p>\n

            it<\/span>(<\/span>'renders slot'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
            \n const<\/span> wrapper =<\/span> mount<\/span>(<\/span>Counter,<\/span> {<\/span>
            \n slots<\/span>:<\/span> {<\/span> default<\/span>:<\/span> '<span class="custom">Slot<\/span>'<\/span> }<\/span>
            \n }<\/span>)<\/span>
            \n expect<\/span>(<\/span>wrapper.<\/span>find<\/span>(<\/span>'.custom'<\/span>)<\/span>.<\/span>exists<\/span>(<\/span>)<\/span>)<\/span>.<\/span>toBe<\/span>(<\/span>true<\/span>)<\/span>
            \n }<\/span>)<\/span>
            \n}<\/span>)<\/span><\/p>\n

            19.3 E2E \u6d4b\u8bd5（Playwright \/ Cypress）<\/h4>\n

            \/\/ playwright<\/span>
            \nimport<\/span> {<\/span> test,<\/span> expect }<\/span> from<\/span> '@playwright\/test'<\/span><\/p>\n

            test<\/span>(<\/span>'counter interaction'<\/span>,<\/span> async<\/span> (<\/span>{<\/span> page }<\/span><\/span>)<\/span> =><\/span> {<\/span>
            \n await<\/span> page.<\/span>goto<\/span>(<\/span>'\/'<\/span>)<\/span>
            \n await<\/span> page.<\/span>click<\/span>(<\/span>'button.increment'<\/span>)<\/span>
            \n await<\/span> expect<\/span>(<\/span>page.<\/span>locator<\/span>(<\/span>'.count'<\/span>)<\/span>)<\/span>.<\/span>toHaveText<\/span>(<\/span>'1'<\/span>)<\/span>
            \n}<\/span>)<\/span><\/p>\n

            \n

            20. \u5e38\u89c1\u8bbe\u8ba1\u6a21\u5f0f\u4e0e\u6700\u4f73\u5b9e\u8df5<\/h3>\n

            20.1 \u7ec4\u4ef6\u8bbe\u8ba1\u539f\u5219<\/h4>\n

            \u2705 \u5355\u4e00\u804c\u8d23：\u4e00\u4e2a\u7ec4\u4ef6\u53ea\u505a\u4e00\u4ef6\u4e8b
            \n\u2705 Props \u5411\u4e0b，Events \u5411\u4e0a（\u5355\u5411\u6570\u636e\u6d41）
            \n\u2705 \u7ec4\u5408\u4f18\u4e8e\u7ee7\u627f
            \n\u2705 \u5408\u7406\u62c6\u5206：\u5c55\u793a\u7ec4\u4ef6 vs \u5bb9\u5668\u7ec4\u4ef6
            \n\u2705 \u547d\u540d：\u591a\u5355\u8bcd PascalCase（MyComponent）
            \n\u2705 \u907f\u514d v-if \u548c v-for \u540c\u65f6\u4f7f\u7528
            \n\u2705 \u5927\u5217\u8868\u5fc5\u987b\u7528 key，\u4e14\u4e0d\u7528 index<\/p>\n

            20.2 \u5e38\u89c1\u6a21\u5f0f<\/h4>\n

            \u53d7\u63a7\u7ec4\u4ef6\u6a21\u5f0f<\/h5>\n

            <!– \u7236\u7ec4\u4ef6\u5b8c\u5168\u63a7\u5236 –>
            \n<Input :value="text" @update:value="text = $event" \/>
            \n<!– \u6216 –>
            \n<Input v-model="text" \/><\/p>\n

            \u6e32\u67d3\u4ee3\u7406 \/ \u65e0\u6e32\u67d3\u7ec4\u4ef6<\/h5>\n

            <!– RenderlessList.vue –>
            \n<script setup>
            \ndefineProps({ items: Array })
            \n<\/script><\/p>\n

            <template>
            \n <slot :items="items" :isEmpty="!items.length" \/>
            \n<\/template><\/p>\n

            <!– \u4f7f\u7528 –>
            \n<RenderlessList :items="todos" v-slot="{ items, isEmpty }">
            \n <p v-if="isEmpty">\u6682\u65e0\u6570\u636e<\/p>
            \n <ul v-else>
            \n <li v-for="item in items" :key="item.id">{{ item.text }}<\/li>
            \n <\/ul>
            \n<\/RenderlessList><\/p>\n

            \u9012\u5f52\u7ec4\u4ef6<\/h5>\n

            <!– TreeNode.vue –>
            \n<script setup>
            \ndefineProps({ node: Object })
            \n<\/script><\/p>\n

            <template>
            \n <li>
            \n {{ node.label }}
            \n <ul v-if="node.children">
            \n <TreeNode
            \n v-for="child in node.children"
            \n :key="child.id"
            \n :node="child"
            \n \/>
            \n <\/ul>
            \n <\/li>
            \n<\/template><\/p>\n

            20.3 \u9519\u8bef\u5904\u7406<\/h4>\n

            <!– ErrorBoundary \u7ec4\u4ef6 –>
            \n<script setup>
            \nimport { ref, onErrorCaptured } from 'vue'<\/p>\n

            const error = ref(null)<\/p>\n

            onErrorCaptured((err, instance, info) => {
            \n error.value = err
            \n return false \/\/ \u963b\u6b62\u7ee7\u7eed\u5411\u4e0a\u4f20\u64ad
            \n})
            \n<\/script><\/p>\n

            <template>
            \n <div v-if="error" class="error">
            \n <p>\u51fa\u9519\u4e86：{{ error.message }}<\/p>
            \n <button @click="error = null">\u91cd\u8bd5<\/button>
            \n <\/div>
            \n <slot v-else \/>
            \n<\/template><\/p>\n

            20.4 \u9879\u76ee\u7ed3\u6784\u63a8\u8350<\/h4>\n

            src\/
            \n\u251c\u2500\u2500 api\/ # API \u8bf7\u6c42\u5c01\u88c5
            \n\u2502 \u251c\u2500\u2500 index.ts # axios \u5b9e\u4f8b
            \n\u2502 \u251c\u2500\u2500 user.ts
            \n\u2502 \u2514\u2500\u2500 post.ts
            \n\u251c\u2500\u2500 assets\/ # \u9759\u6001\u8d44\u6e90
            \n\u251c\u2500\u2500 components\/ # \u901a\u7528\u7ec4\u4ef6
            \n\u2502 \u251c\u2500\u2500 ui\/ # \u57fa\u7840 UI \u7ec4\u4ef6
            \n\u2502 \u2514\u2500\u2500 business\/ # \u4e1a\u52a1\u7ec4\u4ef6
            \n\u251c\u2500\u2500 composables\/ # \u7ec4\u5408\u5f0f\u51fd\u6570
            \n\u2502 \u251c\u2500\u2500 useAuth.ts
            \n\u2502 \u251c\u2500\u2500 useFetch.ts
            \n\u2502 \u2514\u2500\u2500 usePagination.ts
            \n\u251c\u2500\u2500 directives\/ # \u81ea\u5b9a\u4e49\u6307\u4ee4
            \n\u251c\u2500\u2500 layouts\/ # \u5e03\u5c40\u7ec4\u4ef6
            \n\u251c\u2500\u2500 pages\/ (views\/) # \u9875\u9762\u7ec4\u4ef6
            \n\u251c\u2500\u2500 router\/ # \u8def\u7531\u914d\u7f6e
            \n\u2502 \u2514\u2500\u2500 index.ts
            \n\u251c\u2500\u2500 stores\/ # Pinia stores
            \n\u2502 \u251c\u2500\u2500 user.ts
            \n\u2502 \u2514\u2500\u2500 app.ts
            \n\u251c\u2500\u2500 styles\/ # \u5168\u5c40\u6837\u5f0f
            \n\u251c\u2500\u2500 types\/ # TS \u7c7b\u578b\u5b9a\u4e49
            \n\u251c\u2500\u2500 utils\/ # \u5de5\u5177\u51fd\u6570
            \n\u251c\u2500\u2500 App.vue
            \n\u2514\u2500\u2500 main.ts<\/p>\n

            20.5 \u5e38\u7528\u5de5\u5177\u5e93\u751f\u6001<\/h4>\n\n\u7c7b\u522b\u63a8\u8350<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
            \u6784\u5efa\u5de5\u5177<\/td>\nVite（\u5b98\u65b9）\/ Nuxt<\/td>\n<\/tr>\n
            \u8def\u7531<\/td>\nVue Router 4<\/td>\n<\/tr>\n
            \u72b6\u6001\u7ba1\u7406<\/td>\nPinia<\/td>\n<\/tr>\n
            HTTP<\/td>\naxios \/ ky \/ ofetch<\/td>\n<\/tr>\n
            \u5de5\u5177\u51fd\u6570<\/td>\nVueUse（\u5f3a\u70c8\u63a8\u8350）<\/td>\n<\/tr>\n
            UI \u7ec4\u4ef6\u5e93<\/td>\nElement Plus \/ Ant Design Vue \/ Naive UI \/ Vuetify 3 \/ PrimeVue<\/td>\n<\/tr>\n
            CSS<\/td>\nTailwind CSS \/ UnoCSS<\/td>\n<\/tr>\n
            \u56fe\u6807<\/td>\n@iconify\/vue \/ lucide-vue-next<\/td>\n<\/tr>\n
            \u8868\u5355\u9a8c\u8bc1<\/td>\nvee-validate + zod \/ valibot<\/td>\n<\/tr>\n
            \u56fe\u8868<\/td>\nECharts \/ Chart.js<\/td>\n<\/tr>\n
            \u52a8\u753b<\/td>\nGSAP \/ @vueuse\/motion<\/td>\n<\/tr>\n
            \u56fd\u9645\u5316<\/td>\nvue-i18n<\/td>\n<\/tr>\n
            \u6d4b\u8bd5<\/td>\nVitest + Vue Test Utils + Playwright<\/td>\n<\/tr>\n
            \u4ee3\u7801\u89c4\u8303<\/td>\nESLint + Prettier + husky<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

            20.6 VueUse \u5e38\u7528\u51fd\u6570<\/h4>\n

            import<\/span> {<\/span>
            \n useStorage,<\/span> \/\/ \u54cd\u5e94\u5f0f localStorage<\/span>
            \n useDark,<\/span> \/\/ \u6697\u9ed1\u6a21\u5f0f<\/span>
            \n useToggle,<\/span> \/\/ \u5207\u6362\u5e03\u5c14\u503c<\/span>
            \n useMouse,<\/span> \/\/ \u9f20\u6807\u4f4d\u7f6e<\/span>
            \n useWindowSize,<\/span> \/\/ \u7a97\u53e3\u5c3a\u5bf8<\/span>
            \n useIntersectionObserver,<\/span> \/\/ \u4ea4\u53c9\u89c2\u5bdf<\/span>
            \n useEventListener,<\/span> \/\/ \u81ea\u52a8\u6e05\u7406\u4e8b\u4ef6\u76d1\u542c<\/span>
            \n useDebounceFn,<\/span> \/\/ \u9632\u6296\u51fd\u6570<\/span>
            \n useThrottleFn,<\/span> \/\/ \u8282\u6d41\u51fd\u6570<\/span>
            \n useClipboard,<\/span> \/\/ \u526a\u8d34\u677f<\/span>
            \n useMediaQuery,<\/span> \/\/ \u5a92\u4f53\u67e5\u8be2<\/span>
            \n useFetch,<\/span> \/\/ \u6570\u636e\u8bf7\u6c42<\/span>
            \n useVModel,<\/span> \/\/ \u7ec4\u4ef6 v-model \u8f85\u52a9<\/span>
            \n}<\/span> from<\/span> '@vueuse\/core'<\/span><\/p>\n

            \n

            \u9644\u5f55：Vue 3.4 \/ 3.5+ \u65b0\u7279\u6027\u901f\u89c8<\/h3>\n

            Vue 3.4<\/h4>\n
              \n
            • defineModel() \u7a33\u5b9a\u7248<\/li>\n
            • watch \u652f\u6301 { once: true }<\/li>\n
            • \u6539\u8fdb\u7684\u54cd\u5e94\u5f0f\u7cfb\u7edf（\u66f4\u7cbe\u786e\u7684\u4f9d\u8d56\u8ffd\u8e2a）<\/li>\n
            • \u89e3\u6790\u5668\u6027\u80fd\u63d0\u5347 2 \u500d<\/li>\n<\/ul>\n

              Vue 3.5<\/h4>\n
                \n
              • \u54cd\u5e94\u5f0f\u7cfb\u7edf\u91cd\u5199：\u5185\u5b58\u5360\u7528\u964d\u4f4e 56%，\u4f7f\u7528\u53cc\u5411\u94fe\u8868\u66ff\u4ee3 Set<\/li>\n
              • useTemplateRef() \u66ff\u4ee3 ref + \u6a21\u677f ref \u5b57\u7b26\u4e32<\/li>\n
              • useId() \u751f\u6210 SSR \u5b89\u5168\u7684\u552f\u4e00 ID<\/li>\n
              • onWatcherCleanup() \u6e05\u7406\u51fd\u6570<\/li>\n
              • Lazy hydration（\u5f02\u6b65\u7ec4\u4ef6\u6309\u9700\u6c34\u5408）<\/li>\n
              • app.onUnmount() \u6e05\u7406\u5e94\u7528\u7ea7\u526f\u4f5c\u7528<\/li>\n<\/ul>\n

                Vue 3.6+（Vapor Mode，\u5f00\u53d1\u4e2d）<\/h4>\n
                  \n
                • Vapor Mode：\u65e0\u865a\u62df DOM \u7684\u7f16\u8bd1\u6a21\u5f0f<\/li>\n
                • \u76f4\u63a5\u7f16\u8bd1\u4e3a\u547d\u4ee4\u5f0f DOM \u64cd\u4f5c<\/li>\n
                • \u6027\u80fd\u63a5\u8fd1\u539f\u751f JS，\u5185\u5b58\u5360\u7528\u5927\u5e45\u964d\u4f4e<\/li>\n
                • \u53ef\u4e0e\u73b0\u6709\u865a\u62df DOM \u7ec4\u4ef6\u6df7\u7528<\/li>\n<\/ul>\n
                  \n

                  \u5feb\u901f\u53c2\u8003\u5361\u7247<\/h3>\n

                  \/\/ \u54cd\u5e94\u5f0f<\/span>
                  \nref<\/span>(<\/span>0<\/span>)<\/span> \/\/ \u57fa\u672c\u7c7b\u578b<\/span>
                  \nreactive<\/span>(<\/span>{<\/span>}<\/span>)<\/span> \/\/ \u5bf9\u8c61<\/span>
                  \ncomputed<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>}<\/span>)<\/span> \/\/ \u8ba1\u7b97\u5c5e\u6027<\/span>
                  \nwatch<\/span>(<\/span>source,<\/span> cb,<\/span> opts)<\/span> \/\/ \u4fa6\u542c\u5668<\/span>
                  \nwatchEffect<\/span>(<\/span>fn)<\/span> \/\/ \u81ea\u52a8\u8ffd\u8e2a<\/span><\/p>\n

                  \/\/ \u751f\u547d\u5468\u671f<\/span>
                  \nonMounted \/<\/span> onUnmounted \/<\/span> onUpdated \/<\/span> onActivated<\/p>\n

                  \/\/ \u7ec4\u4ef6\u901a\u4fe1<\/span>
                  \ndefineProps \/<\/span> defineEmits \/<\/span> defineModel \/<\/span> defineExpose
                  \nprovide \/<\/span> inject
                  \nuseSlots \/<\/span> useAttrs<\/p>\n

                  \/\/ \u5de5\u5177<\/span>
                  \ntoRef \/<\/span> toRefs \/<\/span> toRaw \/<\/span> markRaw
                  \nreadonly \/<\/span> shallowRef \/<\/span> shallowReactive
                  \nnextTick \/<\/span> defineAsyncComponent<\/p>\n

                  \/\/ \u8def\u7531<\/span>
                  \nuseRouter \/<\/span> useRoute
                  \nrouter.<\/span>push \/<\/span> replace \/<\/span> back \/<\/span> go<\/p>\n

                  \/\/ Pinia<\/span>
                  \ndefineStore \/<\/span> storeToRefs \/<\/span> $patch \/<\/span> $reset<\/p>\n

                  \n

                  📚 \u53c2\u8003\u8d44\u6e90：<\/p>\n

                    \n
                  • Vue 3 \u5b98\u65b9\u6587\u6863<\/li>\n
                  • Vue Router \u6587\u6863<\/li>\n
                  • Pinia \u6587\u6863<\/li>\n
                  • VueUse \u6587\u6863<\/li>\n
                  • Vue 3 RFC<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

                    Vue 3 \u77e5\u8bc6\u70b9\u603b\u7ed3 \u6700\u540e\u66f4\u65b0：2026-07-29 \u76ee\u5f55
                    \nVue 3 \u6838\u5fc3\u53d8\u5316\u6982\u89c8\u7ec4\u5408\u5f0f API（Composition API）\u54cd\u5e94\u5f0f\u7cfb\u7edf\u751f\u547d\u5468\u671f\u94a9\u5b50\u8ba1\u7b97\u5c5e\u6027\u4e0e\u4fa6\u542c\u5668\u7ec4\u4ef6\u7cfb\u7edf\u6a21\u677f\u8bed\u6cd5\u4e0e\u6307\u4ee4\u5185\u7f6e\u7ec4\u4ef6\u8def\u7531（Vue Router 4）\u72b6\u6001\u7ba1\u7406（Pinia）TypeScript \u96c6\u6210\u6027\u80fd\u4f18\u5316\u7f16\u8bd1\u4f18\u5316Teleport \/ Suspense \/ \u5f02\u6b65\u7ec4\u4ef6\u81ea\u5b9a\u4e49\u6307\u4ee4\u63d2\u4ef6\u7cfb\u7edf\u6e32\u67d3\u51fd\u6570\u4e0e <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[187,625,87],"topic":[],"class_list":["post-94343","post","type-post","status-publish","format-standard","hentry","category-server","tag-javascript","tag-vue-js","tag-87"],"yoast_head":"\nVue 3 \u77e5\u8bc6\u70b9\u603b\u7ed3 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/94343.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue 3 \u77e5\u8bc6\u70b9\u603b\u7ed3 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"Vue 3 \u77e5\u8bc6\u70b9\u603b\u7ed3 \u6700\u540e\u66f4\u65b0：2026-07-29 \u76ee\u5f55 Vue 3 \u6838\u5fc3\u53d8\u5316\u6982\u89c8\u7ec4\u5408\u5f0f API（Composition API）\u54cd\u5e94\u5f0f\u7cfb\u7edf\u751f\u547d\u5468\u671f\u94a9\u5b50\u8ba1\u7b97\u5c5e\u6027\u4e0e\u4fa6\u542c\u5668\u7ec4\u4ef6\u7cfb\u7edf\u6a21\u677f\u8bed\u6cd5\u4e0e\u6307\u4ee4\u5185\u7f6e\u7ec4\u4ef6\u8def\u7531（Vue Router 4）\u72b6\u6001\u7ba1\u7406（Pinia）TypeScript \u96c6\u6210\u6027\u80fd\u4f18\u5316\u7f16\u8bd1\u4f18\u5316Teleport \/ Suspense \/ \u5f02\u6b65\u7ec4\u4ef6\u81ea\u5b9a\u4e49\u6307\u4ee4\u63d2\u4ef6\u7cfb\u7edf\u6e32\u67d3\u51fd\u6570\u4e0e\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/94343.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-14T02:40:58+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/94343.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/94343.html\",\"name\":\"Vue 3 \u77e5\u8bc6\u70b9\u603b\u7ed3 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-08-14T02:40:58+00:00\",\"dateModified\":\"2026-08-14T02:40:58+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/94343.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/94343.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/94343.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue 3 \u77e5\u8bc6\u70b9\u603b\u7ed3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Vue 3 \u77e5\u8bc6\u70b9\u603b\u7ed3 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/94343.html","og_locale":"zh_CN","og_type":"article","og_title":"Vue 3 \u77e5\u8bc6\u70b9\u603b\u7ed3 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"Vue 3 \u77e5\u8bc6\u70b9\u603b\u7ed3 \u6700\u540e\u66f4\u65b0：2026-07-29 \u76ee\u5f55 Vue 3 \u6838\u5fc3\u53d8\u5316\u6982\u89c8\u7ec4\u5408\u5f0f API（Composition API）\u54cd\u5e94\u5f0f\u7cfb\u7edf\u751f\u547d\u5468\u671f\u94a9\u5b50\u8ba1\u7b97\u5c5e\u6027\u4e0e\u4fa6\u542c\u5668\u7ec4\u4ef6\u7cfb\u7edf\u6a21\u677f\u8bed\u6cd5\u4e0e\u6307\u4ee4\u5185\u7f6e\u7ec4\u4ef6\u8def\u7531（Vue Router 4）\u72b6\u6001\u7ba1\u7406（Pinia）TypeScript \u96c6\u6210\u6027\u80fd\u4f18\u5316\u7f16\u8bd1\u4f18\u5316Teleport \/ Suspense \/ \u5f02\u6b65\u7ec4\u4ef6\u81ea\u5b9a\u4e49\u6307\u4ee4\u63d2\u4ef6\u7cfb\u7edf\u6e32\u67d3\u51fd\u6570\u4e0e","og_url":"https:\/\/www.wsisp.com\/helps\/94343.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-08-14T02:40:58+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"22 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/94343.html","url":"https:\/\/www.wsisp.com\/helps\/94343.html","name":"Vue 3 \u77e5\u8bc6\u70b9\u603b\u7ed3 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-08-14T02:40:58+00:00","dateModified":"2026-08-14T02:40:58+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/94343.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/94343.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/94343.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"Vue 3 \u77e5\u8bc6\u70b9\u603b\u7ed3"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/94343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=94343"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/94343\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=94343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=94343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=94343"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=94343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}