Vue 3 使用心得

1. Composition API 优势

逻辑组织更清晰

javascript 复制代码
// Vue 2 Options API
export default {
  data() {
    return {
      userList: [],
      loading: false
    }
  },
  methods: {
    fetchUsers() { /* ... */ }
  },
  computed: {
    activeUsers() { /* ... */ }
  }
}

// Vue 3 Composition API
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const userList = ref([])
    const loading = ref(false)
    
    const activeUsers = computed(() => {
      return userList.value.filter(user => user.active)
    })
    
    const fetchUsers = async () => {
      // ...
    }
    
    onMounted(() => {
      fetchUsers()
    })
    
    return {
      userList,
      loading,
      activeUsers,
      fetchUsers
    }
  }
}

逻辑复用更方便

javascript 复制代码
import { ref, reactive } from 'vue'

export function useAuth() {
  const user = ref(null)
  const isAuthenticated = computed(() => !!user.value)
  
  const login = async (credentials) => {
    // 登录逻辑
  }
  
  const logout = () => {
    user.value = null
  }
  
  return {
    user,
    isAuthenticated,
    login,
    logout
  }
}

// 在组件中使用
export default {
  setup() {
    const { user, isAuthenticated, login, logout } = useAuth()
    
    return {
      user,
      isAuthenticated,
      login,
      logout
    }
  }
}

2. 性能优化

更好的 Tree-shaking

javascript 复制代码
// 只引入需要的 API import { ref, computed, watch } from 'vue'

更高效的响应式系统

php 复制代码
javascript
// Vue 3 Proxy-based 响应式
const state = reactive({
  user: {
    profile: {
      name: 'John'
    }
  }
})

// Vue 2 Object.defineProperty
// 需要递归遍历所有属性

3. TypeScript 支持

typescript 复制代码
typescript
import { defineComponent, ref, PropType } from 'vue'

interface User {
  id: number
  name: string
  email: string
}

export default defineComponent({
  props: {
    users: {
      type: Array as PropType<User[]>,
      required: true
    }
  },
  setup(props) {
    const selectedUser = ref<User | null>(null)
    
    const selectUser = (user: User) => {
      selectedUser.value = user
    }
    
    return {
      selectedUser,
      selectUser
    }
  }
})

4. Teleport 组件

xml 复制代码
vue
<template>
  <div class="modal">
    <teleport to="body">
      <div class="modal-overlay" v-if="visible">
        <div class="modal-content">
          <slot></slot>
        </div>
      </div>
    </teleport>
  </div>
</template>

5. Suspense 组件

xml 复制代码
vue
<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

6. 多个 v-model 支持

xml 复制代码
vue
<template>
  <MyComponent 
    v-model:title="pageTitle" 
    v-model:content="pageContent" 
  />
</template>

<!-- MyComponent.vue -->
<template>
  <input v-model="title" />
  <textarea v-model="content" />
</template>

<script>
export default {
  props: ['title', 'content'],
  emits: ['update:title', 'update:content']
}
</script>

7. Fragment 支持

xml 复制代码
vue
<template>
  <!-- 不再需要单一根元素 -->
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

8. 实用技巧

使用 watchEffect 自动追踪依赖

csharp 复制代码
javascript
import { ref, watchEffect } from 'vue'

const userId = ref(1)
const user = ref(null)

watchEffect(async () => {
  if (userId.value) {
    user.value = await fetchUser(userId.value)
  }
})

使用 provide/inject 进行依赖注入

javascript 复制代码
javascript
// 父组件
import { provide, ref } from 'vue'

export default {
  setup() {
    const theme = ref('dark')
    provide('theme', theme)
  }
}

// 子组件
import { inject } from 'vue'

export default {
  setup() {
    const theme = inject('theme')
    return { theme }
  }
}

使用自定义指令

javascript 复制代码
javascript
const MyDirective = {
  mounted(el, binding) {
    el.focus()
  }
}

export default {
  directives: {
    focus: MyDirective
  }
}

9. 常见陷阱与解决方案

响应式解构问题

scss 复制代码
javascript
// ❌ 错误:失去响应性
const { count, double } = useCounter()
 
// ✅ 正确:保持响应性
const counter = useCounter()
const { count, double } = toRefs(counter)

// 或者使用 reactive
const state = reactive(useCounter())

异步组件加载

javascript 复制代码
javascript
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./MyComponent.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000
})

10. 最佳实践

  1. 合理使用 Composition API:不是所有情况都需要使用,简单组件用 Options API 也很好
  2. 组件拆分:保持组件小巧,单一职责
  3. 状态管理:复杂应用使用 Pinia 或 Vuex
  4. 性能优化 :合理使用 v-memov-once 等优化手段
  5. 类型安全:尽可能使用 TypeScript 提高代码质量

Vue 3 带来了很多现代化的特性,让开发体验更加流畅,但也要根据项目实际情况选择合适的特性使用。

相关推荐
孤狼warrior31 分钟前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫
前端炒粉1 小时前
18.矩阵置零(原地算法)
javascript·线性代数·算法·矩阵
listhi5201 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
paopaokaka_luck1 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
一点一木1 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊1 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost2 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
Sheldon一蓑烟雨任平生2 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
BestAns2 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
CsharpDev-奶豆哥3 小时前
JavaScript性能优化实战大纲
开发语言·javascript·性能优化