Vue.js 3.0 新特性详解与实战

Thu, 15 Feb 2024 13:45:00 +0800

Vue.js 3.0带来了许多令人兴奋的新特性，今天我们来深入了解这些变化以及如何在实际项目中应用它们。

🚀 Vue 3的主要改进

性能提升

更快的虚拟DOM：重写了虚拟DOM，性能提升1.3-2倍
更小的包体积：通过tree-shaking支持，减少了41%的包体积
更好的TypeScript支持：完全用TypeScript重写

新的响应式系统

基于ES6的Proxy实现，相比Vue 2的Object.defineProperty：

支持数组索引和length的监听
支持Map、Set、WeakMap、WeakSet
支持13种数组变更方法的监听

💡 Composition API详解

为什么需要Composition API？

Vue 2的Options API在处理复杂组件时存在一些问题：

逻辑复用困难
类型推断不够友好
大组件难以维护

基础语法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


import { ref, reactive, computed, watch, onMounted } from 'vue'

export default {
 setup() {
 // 响应式数据
 const count = ref(0)
 const state = reactive({
 name: '张三',
 age: 25
 })
 
 // 计算属性
 const doubleCount = computed(() => count.value * 2)
 
 // 方法
 const increment = () => {
 count.value++
 }
 
 // 生命周期
 onMounted(() => {
 console.log('组件已挂载')
 })
 
 // 监听器
 watch(count, (newVal, oldVal) => {
 console.log(`count从${oldVal}变为${newVal}`)
 })
 
 return {
 count,
 state,
 doubleCount,
 increment
 }
 }
}

组合函数（Composables）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


// composables/useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
 const count = ref(initialValue)
 
 const increment = () => count.value++
 const decrement = () => count.value--
 const reset = () => count.value = initialValue
 
 const isEven = computed(() => count.value % 2 === 0)
 
 return {
 count: readonly(count),
 increment,
 decrement,
 reset,
 isEven
 }
}

// 在组件中使用
import { useCounter } from './composables/useCounter'

export default {
 setup() {
 const { count, increment, decrement, isEven } = useCounter(10)
 
 return {
 count,
 increment,
 decrement,
 isEven
 }
 }
}

逻辑复用示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


// composables/useFetch.js
import { ref, reactive } from 'vue'

export function useFetch(url) {
 const data = ref(null)
 const loading = ref(true)
 const error = ref(null)
 
 const fetchData = async () => {
 try {
 loading.value = true
 error.value = null
 const response = await fetch(url)
 if (!response.ok) throw new Error('请求失败')
 data.value = await response.json()
 } catch (err) {
 error.value = err.message
 } finally {
 loading.value = false
 }
 }
 
 fetchData()
 
 return { data, loading, error, refetch: fetchData }
}

// 在组件中使用
export default {
 setup() {
 const { data: users, loading, error } = useFetch('/api/users')
 
 return { users, loading, error }
 }
}

⚡ 新特性深入

1. Teleport（传送门）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


<template>
 <div class="modal-container">
 <button @click="showModal = true">打开模态框</button>
 
 <!-- 将模态框传送到body下 -->
 <Teleport to="body">
 <div v-if="showModal" class="modal-backdrop">
 <div class="modal">
 <h3>模态框标题</h3>
 <p>这是模态框内容</p>
 <button @click="showModal = false">关闭</button>
 </div>
 </div>
 </Teleport>
 </div>
</template>

<script>
import { ref } from 'vue'

export default {
 setup() {
 const showModal = ref(false)
 return { showModal }
 }
}
</script>

2. Fragments（片段）

Vue 3支持组件有多个根节点：

Vue.js on Zampo Blog

Vue.js 3.0 新特性详解与实战

🚀 Vue 3的主要改进

性能提升

新的响应式系统

💡 Composition API详解

为什么需要Composition API？

基础语法

组合函数（Composables）

逻辑复用示例

⚡ 新特性深入

1. Teleport（传送门）

2. Fragments（片段）