🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来Vue篇专栏内容:Vue-开发应用与实践
#博客之星2024年度总评选-主题文章创作#
前言
嗨喽,我是青山,本年度创作已然接近尾声,2024年通过分享前端前沿技术基础及应用与大家相识,主要还是通过Vue框架知识的分析及应用讲解,那么我们来回顾一下vue2过渡到vue3所需了解的基础应用
目录
前言
1. Vue 2 与 Vue 3 的主要区别
1.1 语法和 API 变化
1.1.1 模板语法
1.1.2 Composition API
1.2 性能优化
1.2.1 渲染机制
1.2.2 编译器优化
1.3 新特性
1.3.1 Teleport
1.3.2 Fragments
1.3.3 Suspense
2. Vue 3 的新特性
2.1 Composition API
2.2 Teleport
2.3 计算属性和监听属性
3. Vue 3 的基础知识
3.1 组件化开发
3.2 数据绑定
4. Vue 3 的状态管理
4.1 Vuex
4.2 Pinia
5. Vue 3 的路由管理
5.1 Vue Router
6. 从 Vue 2 过渡到 Vue 3 的注意事项
6.1 语法变化
6.2 生命周期钩子
6.3 插件和库的兼容性
7. 总结
1. Vue 2 与 Vue 3 的主要区别
1.1 语法和 API 变化
1.1.1 模板语法
Vue 2 和 Vue 3 在模板语法上有一些细微的变化，Vue 3 更加简洁。
Vue 2 示例：
javascript"><template><button v-on:click="handleClick">Click me</button><input v-bind:value="value" />
</template>Vue 3 示例：
javascript"><template><button @click="handleClick">Click me</button><input :value="value" />
</template>1.1.2 Composition API
Vue 3 引入了 Composition API，使得逻辑更加清晰和模块化。
Vue 2 示例：
javascript"><template><div><p>{{ message }}</p></div>
</template><script>
export default {data() {return {message: 'Hello Vue 2!'}},methods: {updateMessage() {this.message = 'Updated message'}}
}
</script>Vue 3 示例：
javascript"><template><div><p>{{ message }}</p></div>
</template><script setup>
import { ref } from 'vue'const message = ref('Hello Vue 3!')const updateMessage = () => {message.value = 'Updated message'
}
</script>1.2 性能优化
Vue 3 在性能方面进行了大量优化，包括更快的渲染速度、更小的包体积等。
1.2.1 渲染机制
Vue 3 使用了新的渲染机制，减少了不必要的 DOM 操作，提升了渲染性能。
1.2.2 编译器优化
Vue 3 的编译器进行了优化，生成的代码更加高效。
1.3 新特性
Vue 3 引入了许多新特性，如 Teleport、Fragments、Suspense 等。
1.3.1 Teleport
Teleport 组件允许将模态框或其他组件的内容渲染到 DOM 的其他位置，从而避免样式冲突。
Vue 3 示例：
javascript"><template><teleport to="body"><div class="modal" v-if="visible"><div class="modal-content"><span @click="closeModal" class="close">×</span><p>{{ message }}</p></div></div></teleport>
</template><script setup>
import { ref } from 'vue'const visible = ref(true)const closeModal = () => {visible.value = false
}
</script>1.3.2 Fragments
Vue 3 支持 Fragments，允许在模板中使用多个根元素。
Vue 3 示例：
javascript"><template><div>First element</div><div>Second element</div>
</template>1.3.3 Suspense
Suspense 组件允许在异步组件加载时显示 fallback 内容。
Vue 3 示例：
javascript"><template><suspense><template #default><AsyncComponent /></template><template #fallback><div>Loading...</div></template></suspense>
</template><script setup>
import { defineAsyncComponent } from 'vue'const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))
</script>2. Vue 3 的新特性
2.1 Composition API
Composition API 是 Vue 3 的核心特性之一，它使得逻辑更加清晰和模块化。
示例：
javascript"><template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script setup>
import { ref } from 'vue'const count = ref(0)const increment = () => {count.value++
}
</script>2.2 Teleport
Teleport 组件允许将模态框或其他组件的内容渲染到 DOM 的其他位置，从而避免样式冲突。
示例：
javascript"><template><teleport to="body"><div class="modal" v-if="visible"><div class="modal-content"><span @click="closeModal" class="close">×</span><p>{{ message }}</p></div></div></teleport>
</template><script setup>
import { ref } from 'vue'const visible = ref(true)const closeModal = () => {visible.value = false
}
</script>2.3 计算属性和监听属性
Vue 3 中的计算属性和监听属性与 Vue 2 类似，但 Composition API 提供了更灵活的方式来使用它们。
计算属性示例：
javascript"><template><div><p>First Name: <input v-model="firstName" /></p><p>Last Name: <input v-model="lastName" /></p><p>Full Name: {{ fullName }}</p></div>
</template><script setup>
import { ref, computed } from 'vue'const firstName = ref('')
const lastName = ref('')const fullName = computed(() => {return `${firstName.value} ${lastName.value}`
})
</script>监听属性示例：
javascript"><template><div><p>Counter: {{ counter }}</p><button @click="increment">Increment</button></div>
</template><script setup>
import { ref, watch } from 'vue'const counter = ref(0)const increment = () => {counter.value++
}watch(counter, (newVal, oldVal) => {console.log(`Counter changed from ${oldVal} to ${newVal}`)
})
</script>3. Vue 3 的基础知识
3.1 组件化开发
Vue 3 依然强调组件化开发，通过将页面拆分为多个独立的组件，提高代码的可维护性和复用性。
示例：
javascript"><!-- MyComponent.vue -->
<template><div class="my-component"><h1>{{ title }}</h1><p>{{ content }}</p></div>
</template><script>
export default {name: 'MyComponent',props: {title: String,content: String}
}
</script><style scoped>
.my-component {border: 1px solid #ccc;padding: 10px;margin: 10px;
}
</style>3.2 数据绑定
Vue 3 提供了多种数据绑定方式，包括插值表达式、指令等。
示例：
javascript"><template><div id="app"><h1>{{ message }}</h1><input v-model="message" /></div>
</template><script setup>
import { ref } from 'vue'const message = ref('Hello Vue 3!')
</script>4. Vue 3 的状态管理
4.1 Vuex
Vuex 是 Vue 的状态管理库，适用于大型应用的状态管理。
示例：
javascript">// store.js
import { createStore } from 'vuex'export default createStore({state: {count: 0},mutations: {increment(state) {state.count++}},actions: {increment({ commit }) {commit('increment')}},getters: {doubleCount(state) {return state.count * 2}}
})在组件中使用 Vuex：
javascript"><template><div><p>Count: {{ count }}</p><p>Double Count: {{ doubleCount }}</p><button @click="increment">Increment</button></div>
</template><script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'const store = useStore()const count = computed(() => store.state.count)
const doubleCount = computed(() => store.getters.doubleCount)const increment = () => {store.commit('increment')
}
</script>4.2 Pinia
Pinia 是 Vue 3 的新状态管理库，提供了更简洁的 API 和更好的 TypeScript 支持。
javascript">// store.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++}},getters: {doubleCount: (state) => state.count * 2}
})在组件中使用 Pinia：
javascript"><template><div><p>Count: {{ count }}</p><p>Double Count: {{ doubleCount }}</p><button @click="increment">Increment</button></div>
</template><script setup>
import { useCounterStore } from './store'
import { storeToRefs } from 'pinia'const counterStore = useCounterStore()
const { count, doubleCount } = storeToRefs(counterStore)
const { increment } = counterStore
</script>5. Vue 3 的路由管理
5.1 Vue Router
Vue 3 的路由管理依然使用 Vue Router，但需要安装 Vue Router 4。
安装 Vue Router：
npm install vue-router@4配置路由：
javascript">// router.js
import { createRouter, createWebHashHistory } from 'vue-router'const routes = [{ path: '/', component: () => import('./views/Home.vue') },{ path: '/about', component: () => import('./views/About.vue') }
]const router = createRouter({history: createWebHashHistory(),routes
})export default router在组件中使用路由：
javascript"><template><div><router-link to="/">Home</router-link><router-link to="/about">About</router-link><router-view /></div>
</template><script setup>
import { useRouter } from 'vue-router'const router = useRouter()const goToAbout = () => {router.push('/about')
}
</script>6. 从 Vue 2 过渡到 Vue 3 的注意事项
6.1 语法变化
Vue 3 的语法与 Vue 2 有一些变化，开发者需要熟悉新的语法，特别是 Composition API。
6.2 生命周期钩子
Vue 3 的生命周期钩子与 Vue 2 类似，但有一些变化，如 beforeDestroy 和 destroyed 被替换为 beforeUnmount 和 unmounted。
6.3 插件和库的兼容性
一些 Vue 2 的插件和库可能不兼容 Vue 3，开发者需要检查并更新这些依赖。
7. 总结
2020 年 9 月，Vue.js 发布了 3.0 版本，带来了许多新特性和性能优化。与此同时，Vue 2 在 2023 年底正式停止维护，这意味着开发者需要逐步过渡到 Vue 3。本文详细介绍 Vue 2 和 Vue 3 的核心区别、知识点、基础及应用，帮助开发者更好地理解和应用这些技术。
