Vue3 知识点总结

Vue3 知识点总结

1. 核心概念

1.1 Composition API

1.1.1 setup 函数

• setup是Vue3中的新的配置项，是组件内使用Composition API的入口
  
• 在setup中定义的变量和方法须要return才能在模板中使用
  
• setup执行时机在beforeCreate之前，this不可用
  

1. export default {
2.   setup() {
3.     const count = ref(0)
4.     const increment = () => count.value++
5.    
6.     return {
7.       count,
8.       increment
9.     }
10.   }
11. }

复制代码

1.1.2 相应式API

ref

• 用于根本类型的相应式
  
• 在setup中须要.value访问
  
• 在模板中自动解包
  

1. const count = ref(0)
2. console.log(count.value) // 0

复制代码

reactive

• 用于对象类型的相应式
  
• 返回对象的相应式副本
  

1. const state = reactive({
2.   count: 0,
3.   list: []
4. })

复制代码

toRef 和 toRefs

• toRef: 为源相应式对象上的属性新建ref
  
• toRefs: 将相应式对象转换为平凡对象，此中每个属性都是ref
  

1. const state = reactive({
2.   foo: 1,
3.   bar: 2
4. })
5. const fooRef = toRef(state, 'foo')
6. const stateRefs = toRefs(state)

复制代码

1.2 生命周期钩子

• setup(): 组件创建前执行
  
• onBeforeMount(): 组件挂载前
  
• onMounted(): 组件挂载后
  
• onBeforeUpdate(): 组件更新前
  
• onUpdated(): 组件更新后
  
• onBeforeUnmount(): 组件卸载前
  
• onUnmounted(): 组件卸载后
  

1. import { onMounted } from 'vue'
3. export default {
4.   setup() {
5.     onMounted(() => {
6.       console.log('组件已挂载')
7.     })
8.   }
9. }

复制代码

1.3 依靠注入

provide/inject

• 跨层级组件通信
  
• 可以传递相应式数据
  

1. // 父组件
2. provide('key', value)
4. // 子组件
5. const value = inject('key')

复制代码

2. 新特性

2.1 Teleport

• 将组件内容渲染到指定DOM节点
  
• 常用于模态框、弹出层等
  

1. <teleport to="body">
2.   <div class="modal">
3.     <!-- 模态框内容 -->
4.   </div>
5. </teleport>

复制代码

2.2 Fragments

• 组件可以有多个根节点
  
• 无需包裹额外的div
  

1. <template>
2.   <header>...</header>
3.   <main>...</main>
4.   <footer>...</footer>
5. </template>

复制代码

2.3 Suspense

• 处理惩罚异步组件
  
• 提供加载状态
  

1. <suspense>
2.   <template #default>
3.     <async-component />
4.   </template>
5.   <template #fallback>
6.     <loading-component />
7.   </template>
8. </suspense>

复制代码

3. 状态管理

3.1 Pinia

• Vue3保举的状态管理方案
  
• 支持TypeScript
  
• 轻量级、模块化
  

1. // store/counter.js
2. import { defineStore } from 'pinia'
4. export const useCounterStore = defineStore('counter', {
5.   state: () => ({
6.     count: 0
7.   }),
8.   actions: {
9.     increment() {
10.       this.count++
11.     }
12.   }
13. })

复制代码

4. 性能优化

4.1 静态提拔

• 静态节点提拔到渲染函数之外
  
• 淘汰渲染开销
  

4.2 Patch Flag

• 动态节点标记
  
• 优化diff算法
  

4.3 Tree Shaking

• 更好的代码分割
  
• 减小打包体积
  

5. TypeScript支持

5.1 类型定义

1. interface User {
2.   id: number
3.   name: string
4. }
6. const user = ref<User>({ id: 1, name: 'Tom' })

复制代码

5.2 组件Props类型

1. defineProps<{
2.   title: string
3.   count: number
4. }>()

复制代码

6. 工程化实践

6.1 Vite

• 更快的开辟服务器启动
  
• 更快的模块热更新
  
• 优化的构建输出
  

6.2 单文件组件

1. <script setup lang="ts">
2. import { ref } from 'vue'
4. const count = ref(0)
5. </script>
7. <template>
8.   <button @click="count++">{{ count }}</button>
9. </template>

复制代码

6.3 组件设计原则

• 单一职责
  
• 可复用性
  
• Props向下，Events向上
  
• 组件通信规范
  

7. 最佳实践

7.1 代码构造

• 使用组合式函数（Composables）
  
• 逻辑复用和抽象
  
• 目次结构规范
  

7.2 性能考虑

• 合理使用computed和watch
  
• 避免不须要的组件渲染
  
• 使用v-show取代v-if（频繁切换）
  

7.3 错误处理惩罚

• 同一的错误处理惩罚机制
  
• 异步操纵的错误捕获
  
• 全局错误处理惩罚
  

7.4 自定义指令

• 生命周期钩子
  
• 传递参数和修饰符
  

1. // 自定义防抖指令
2. app.directive('debounce', {
3.   mounted(el, binding) {
4.     const delay = binding.value || 300
5.     let timer = null
6.     el.addEventListener('click', () => {
7.       if (timer) clearTimeout(timer)
8.       timer = setTimeout(() => {
9.         binding.value()
10.       }, delay)
11.     })
12.   }
13. })

复制代码

7.5 动画与过渡

• v-enter-from/v-leave-to
  
• transition组件
  
• transition-group列表过渡
  

1. <template>
2.   <transition name="fade">
3.     <div v-if="show">Content</div>
4.   </transition>
5. </template>
7. <style>
8. .fade-enter-active,
9. .fade-leave-active {
10.   transition: opacity 0.5s;
11. }
12. .fade-enter-from,
13. .fade-leave-to {
14.   opacity: 0;
15. }
16. </style>

复制代码

7.6 组合式函数(Composables)

• 逻辑复用
  
• 状态共享
  
• 生命周期集成
  

1. // useCounter.js
2. import { ref, onMounted } from 'vue'
4. export function useCounter(initialValue = 0) {
5.   const count = ref(initialValue)
6.   const increment = () => count.value++
7.   const decrement = () => count.value--
9.   onMounted(() => {
10.     console.log('Counter mounted')
11.   })
13.   return {
14.     count,
15.     increment,
16.     decrement
17.   }
18. }
20. // 使用组合式函数
21. const { count, increment } = useCounter()

复制代码

7.7 与其他技术栈集成

7.7.1 Vue3 + TypeScript

1. // 组件Props类型定义
2. interface Props {
3.   message: string
4.   count?: number
5. }
7. defineProps<Props>()
9. // 组合式函数类型定义
10. interface UseUserReturn {
11.   user: Ref<User | null>
12.   loading: Ref<boolean>
13.   error: Ref<Error | null>
14.   fetchUser: (id: number) => Promise<void>
15. }
17. function useUser(): UseUserReturn {
18.   // 实现...
19. }

复制代码

7.7.2 Vue3 + Vite + TailwindCSS

1. // vite.config.js
2. import { defineConfig } from 'vite'
3. import vue from '@vitejs/plugin-vue'
4. import tailwindcss from 'tailwindcss'
6. export default defineConfig({
7.   plugins: [vue()],
8.   css: {
9.     postcss: {
10.       plugins: [tailwindcss]
11.     }
12.   }
13. })

复制代码

7.7.3 Vue3 + Jest

1. // counter.spec.js
2. import { mount } from '@vue/test-utils'
3. import Counter from './Counter.vue'
5. test('increments value on click', async () => {
6.   const wrapper = mount(Counter)
7.   await wrapper.find('button').trigger('click')
8.   expect(wrapper.text()).toContain('1')
9. })

复制代码

8. 高级组件模式

8.1 动态组件

1. <template>
2.   <component :is="currentComponent" v-bind="props" />
3. </template>
5. <script setup>
6. import { shallowRef } from 'vue'
8. const currentComponent = shallowRef(null)
9. const props = ref({})
11. // 异步加载组件
12. async function loadComponent(name) {
13.   const component = await import(`./components/${name}.vue`)
14.   currentComponent.value = component.default
15. }
16. </script>

复制代码

8.2 递归组件

1. <!-- TreeNode.vue -->
2. <template>
3.   <div class="tree-node">
4.     <div @click="toggle">{{ node.label }}</div>
5.     <div v-if="isExpanded && node.children" class="children">
6.       <tree-node
7.         v-for="child in node.children"
8.         :key="child.id"
9.         :node="child"
10.       />
11.     </div>
12.   </div>
13. </template>
15. <script setup>
16. const props = defineProps(['node'])
17. const isExpanded = ref(false)
18. const toggle = () => isExpanded.value = !isExpanded.value
19. </script>

复制代码

8.3 高阶组件(HOC)

1. // withLoading.ts
2. import { h, defineComponent } from 'vue'
4. export function withLoading(WrappedComponent) {
5.   return defineComponent({
6.     props: ['loading', ...WrappedComponent.props],
7.     setup(props, { attrs, slots }) {
8.       return () => props.loading
9.         ? h('div', 'Loading...')
10.         : h(WrappedComponent, { ...attrs }, slots)
11.     }
12.   })
13. }

复制代码

9. 性能优化最佳实践

9.1 大列表优化

1. <script setup>
2. import { useVirtualList } from '@vueuse/core'
4. const list = ref(Array.from({ length: 10000 }, (_, i) => ({ id: i, text: `Item ${i}` })))
5. const { list: virtualList, containerProps, wrapperProps } = useVirtualList(list, {
6.   itemHeight: 40,
7.   overscan: 10
8. })
9. </script>
11. <template>
12.   <div v-bind="containerProps" class="container">
13.     <div v-bind="wrapperProps">
14.       <div v-for="item in virtualList" :key="item.id" class="item">
15.         {{ item.text }}
16.       </div>
17.     </div>
18.   </div>
19. </template>

复制代码

9.2 组件懒加载

1. // 路由懒加载
2. const routes = [
3.   {
4.     path: '/dashboard',
5.     component: () => import('./views/Dashboard.vue')
6.   }
7. ]
9. // 组件懒加载
10. const MyComponent = defineAsyncComponent(() =>
11.   import('./components/MyComponent.vue')
12. )

复制代码

9.3 计算属性缓存

1. const expensiveComputed = computed(() => {
2.   return list.value.filter(item => {
3.     // 复杂的计算逻辑
4.     return complexProcess(item)
5.   })
6. })
8. // 带有getter和setter的计算属性
9. const fullName = computed({
10.   get() {
11.     return `${firstName.value} ${lastName.value}`
12.   },
13.   set(newValue) {
14.     [firstName.value, lastName.value] = newValue.split(' ')
15.   }
16. })

复制代码

10. 与Vue2的重要区别

10.1 核心架构

• 使用Proxy取代Object.defineProperty实现相应式
  
• 重写虚拟DOM实现，性能提拔100%
  
• 模板编译优化，支持静态提拔
  
• 更好的TypeScript支持，内置类型声明
  

10.2 API差别

• Composition API vs Options API
  
• 新的生命周期钩子
  
• 移除filter和                                        o                            n                            、                                  on、                     on、off等API
  
• setup函数替换beforeCreate和created
  

10.3 模板语法

• v-model的使用变化（modelValue + update:modelValue）
  
• 支持多个v-model绑定
  
• Teleport、Suspense等新特性
  
• 片断（Fragments）支持多根节点
  

10.4 相应式体系

• ref和reactive的显式声明
  
• 更好的相应式解构支持（toRefs）
  
• 相应式数据的调试能力加强
  
• 更细粒度的相应式控制
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。