setup是Vue3中的新的配置項，是組件內使用Composition API的入口 在setup中定義的變量和方法需要return才能在模板中使用 setup執行時機在beforeCreate之前，this不可用 export default { setup ( ) { const count = ref ( 0 ) const increment = ( ) => count. value++ return { count, increment} }
}
用于基本類型的響應式 在setup中需要.value訪問 在模板中自動解包 const count = ref ( 0 )
console. log ( count. value)
const state = reactive ( { count: 0 , list: [ ]
} )
toRef: 為源響應式對象上的屬性新建ref toRefs: 將響應式對象轉換為普通對象，其中每個屬性都是ref const state = reactive ( { foo: 1 , bar: 2
} )
const fooRef = toRef ( state, 'foo' )
const stateRefs = toRefs ( state)
setup(): 組件創建前執行 onBeforeMount(): 組件掛載前 onMounted(): 組件掛載后 onBeforeUpdate(): 組件更新前 onUpdated(): 組件更新后 onBeforeUnmount(): 組件卸載前 onUnmounted(): 組件卸載后 import { onMounted } from 'vue' export default { setup ( ) { onMounted ( ( ) => { console. log ( '組件已掛載' ) } ) }
}
provide ( 'key' , value)
const value = inject ( 'key' )
將組件內容渲染到指定DOM節點 常用于模態框、彈出層等 <teleport to="body"><div class="modal"><!-- 模態框內容 --></div>
</teleport>
<template><header>...</header><main>...</main><footer>...</footer>
</template>
<suspense><template #default><async-component /></template><template #fallback><loading-component /></template>
</suspense>
Vue3推薦的狀態管理方案 支持TypeScript 輕量級、模塊化
import { defineStore } from 'pinia' export const useCounterStore = defineStore ( 'counter' , { state : ( ) => ( { count: 0 } ) , actions: { increment ( ) { this . count++ } }
} )
interface User { id: number name: string
} const user = ref < User> ( { id: 1 , name: 'Tom' } )
defineProps < { title: string count: number
} > ( )
更快的開發服務器啟動 更快的模塊熱更新 優化的構建輸出 <script setup lang="ts">
import { ref } from 'vue'const count = ref(0)
</script><template><button @click="count++">{{ count }}</button>
</template>
單一職責 可復用性 Props向下，Events向上 組件通信規范 使用組合式函數（Composables） 邏輯復用和抽象 目錄結構規范 合理使用computed和watch 避免不必要的組件渲染 使用v-show代替v-if（頻繁切換）
app. directive ( 'debounce' , { mounted ( el, binding ) { const delay = binding. value || 300 let timer = null el. addEventListener ( 'click' , ( ) => { if ( timer) clearTimeout ( timer) timer = setTimeout ( ( ) => { binding. value ( ) } , delay) } ) }
} )
v-enter-from/v-leave-to transition組件 transition-group列表過渡 <template><transition name="fade"><div v-if="show">Content</div></transition>
</template><style>
.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {opacity: 0;
}
</style>
import { ref, onMounted } from 'vue' export function useCounter ( initialValue = 0 ) { const count = ref ( initialValue) const increment = ( ) => count. value++ const decrement = ( ) => count. value-- onMounted ( ( ) => { console. log ( 'Counter mounted' ) } ) return { count, increment, decrement}
}
const { count, increment } = useCounter ( )
interface Props { message: string count? : number
} defineProps < Props> ( )
interface UseUserReturn { user: Ref< User | null > loading: Ref< boolean > error: Ref< Error | null > fetchUser : ( id: number ) => Promise < void >
} function useUser ( ) : UseUserReturn {
}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from 'tailwindcss' export default defineConfig ( { plugins: [ vue ( ) ] , css: { postcss: { plugins: [ tailwindcss] } }
} )
import { mount } from '@vue/test-utils'
import Counter from './Counter.vue' test ( 'increments value on click' , async ( ) => { const wrapper = mount ( Counter) await wrapper. find ( 'button' ) . trigger ( 'click' ) expect ( wrapper. text ( ) ) . toContain ( '1' )
} )
<template><component :is="currentComponent" v-bind="props" />
</template><script setup>
import { shallowRef } from 'vue'const currentComponent = shallowRef(null)
const props = ref({})// 異步加載組件
async function loadComponent(name) {const component = await import(`./components/${name}.vue`)currentComponent.value = component.default
}
</script>
<!-- TreeNode.vue -->
<template><div class="tree-node"><div @click="toggle">{{ node.label }}</div><div v-if="isExpanded && node.children" class="children"><tree-nodev-for="child in node.children":key="child.id":node="child"/></div></div>
</template><script setup>
const props = defineProps(['node'])
const isExpanded = ref(false)
const toggle = () => isExpanded.value = !isExpanded.value
</script>
import { h, defineComponent } from 'vue' export function withLoading ( WrappedComponent) { return defineComponent ( { props: [ 'loading' , ... WrappedComponent. props] , setup ( props, { attrs, slots } ) { return ( ) => props. loading? h ( 'div' , 'Loading...' ) : h ( WrappedComponent, { ... attrs } , slots) } } )
}
<script setup>
import { useVirtualList } from '@vueuse/core'const list = ref(Array.from({ length: 10000 }, (_, i) => ({ id: i, text: `Item ${i}` })))
const { list: virtualList, containerProps, wrapperProps } = useVirtualList(list, {itemHeight: 40,overscan: 10
})
</script><template><div v-bind="containerProps" class="container"><div v-bind="wrapperProps"><div v-for="item in virtualList" :key="item.id" class="item">{{ item.text }}</div></div></div>
</template>
const routes = [ { path: '/dashboard' , component : ( ) => import ( './views/Dashboard.vue' ) }
]
const MyComponent = defineAsyncComponent ( ( ) => import ( './components/MyComponent.vue' )
)
const expensiveComputed = computed ( ( ) => { return list. value. filter ( item => { return complexProcess ( item) } )
} )
const fullName = computed ( { get ( ) { return ` ${ firstName. value} ${ lastName. value} ` } , set ( newValue) { [ firstName. value, lastName. value] = newValue. split ( ' ' ) }
} )
使用Proxy代替Object.defineProperty實現響應式 重寫虛擬DOM實現，性能提升100% 模板編譯優化，支持靜態提升 更好的TypeScript支持，內置類型聲明 Composition API vs Options API 新的生命周期鉤子 移除filter和 o n 、 on、 o n 、 setup函數替代beforeCreate和created v-model的使用變化（modelValue + update:modelValue） 支持多個v-model綁定 Teleport、Suspense等新特性 片段（Fragments）支持多根節點 ref和reactive的顯式聲明 更好的響應式解構支持（toRefs） 響應式數據的調試能力增強 更細粒度的響應式控制 /活體檢測)
![【bug】[42000][1067] Invalid default value for ‘xxx_time‘](http://pic.xiahunao.cn/【bug】[42000][1067] Invalid default value for ‘xxx_time‘)
