当前位置：首页 > news >正文

Vue3 知识点总结

news 来源：原创 2025/6/15 19:50:19

Vue3 知识点总结

1. 核心概念

1.1 Composition API

1.1.1 setup 函数

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

export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    
    return {
      count,
      increment
    }
  }
}

1.1.2 响应式API

ref

用于基本类型的响应式
在setup中需要.value访问
在模板中自动解包

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

reactive

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

const state = reactive({
  count: 0,
  list: []
})

toRef 和 toRefs

toRef: 为源响应式对象上的属性新建ref
toRefs: 将响应式对象转换为普通对象，其中每个属性都是ref

const state = reactive({
  foo: 1,
  bar: 2
})
const fooRef = toRef(state, 'foo')
const stateRefs = toRefs(state)

1.2 生命周期钩子

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

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
    })
  }
}

1.3 依赖注入

provide/inject

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

// 父组件
provide('key', value)

// 子组件
const value = inject('key')

2. 新特性

2.1 Teleport

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

<teleport to="body">
  <div class="modal">
    <!-- 模态框内容 -->
  </div>
</teleport>

2.2 Fragments

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

<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

2.3 Suspense

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

<suspense>
  <template #default>
    <async-component />
  </template>
  <template #fallback>
    <loading-component />
  </template>
</suspense>

3. 状态管理

3.1 Pinia

Vue3推荐的状态管理方案
支持TypeScript
轻量级、模块化

// store/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

4. 性能优化

4.1 静态提升

静态节点提升到渲染函数之外
减少渲染开销

4.2 Patch Flag

动态节点标记
优化diff算法

4.3 Tree Shaking

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

5. TypeScript支持

5.1 类型定义

interface User {
  id: number
  name: string
}

const user = ref<User>({ id: 1, name: 'Tom' })

5.2 组件Props类型

defineProps<{
  title: string
  count: number
}>()

6. 工程化实践

6.1 Vite

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

6.2 单文件组件

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

6.3 组件设计原则

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

7. 最佳实践

7.1 代码组织

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

7.2 性能考虑

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

7.3 错误处理

统一的错误处理机制
异步操作的错误捕获
全局错误处理

7.4 自定义指令

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

// 自定义防抖指令
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)
    })
  }
})

7.5 动画与过渡

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>

7.6 组合式函数(Composables)

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

// useCounter.js
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()

7.7 与其他技术栈集成

7.7.1 Vue3 + TypeScript

// 组件Props类型定义
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 {
  // 实现...
}

7.7.2 Vue3 + Vite + TailwindCSS

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from 'tailwindcss'

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [tailwindcss]
    }
  }
})

7.7.3 Vue3 + Jest

// counter.spec.js
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')
})

8. 高级组件模式

8.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>

8.2 递归组件

<!-- TreeNode.vue -->
<template>
  <div class="tree-node">
    <div @click="toggle">{{ node.label }}</div>
    <div v-if="isExpanded && node.children" class="children">
      <tree-node
        v-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>

8.3 高阶组件(HOC)

// withLoading.ts
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)
    }
  })
}

9. 性能优化最佳实践

9.1 大列表优化

<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>

9.2 组件懒加载

// 路由懒加载
const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  }
]

// 组件懒加载
const MyComponent = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

9.3 计算属性缓存

const expensiveComputed = computed(() => {
  return list.value.filter(item => {
    // 复杂的计算逻辑
    return complexProcess(item)
  })
})

// 带有getter和setter的计算属性
const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})