🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来Vuet篇专栏内容:Vue-从 Vue 2 到 Vue 3：全面升级指南
前言
随着前端技术的不断发展，Vue.js 作为一种轻量级且高效的框架，受到了广大开发者的喜爱。本文将详细介绍 Vue 2 和 Vue 3 的核心概念和实用技巧，并通过具体的代码示例来展示如何在项目中使用这些功能。我们还将探讨 Vue 2 和 Vue 3 之间的主要区别，帮助读者更好地理解和应用这些技术。
目录
知识点
1. Vue 2 基础
1.1 组件化开发
Vue 2 强调组件化开发，通过将页面拆分为多个独立的组件，提高代码的可维护性和复用性。
代码示例
<!-- 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>1.2 数据绑定
Vue 2 提供了多种数据绑定方式，包括插值表达式、指令等。
代码示例
<!-- App.vue -->
<template>
<div id="app">
<h1>{{ message }}</h1>
<input v-model="message" />
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue 2!'
}
}
}
</script>1.3 计算属性和监听属性
计算属性（Computed Properties）和监听属性（Watchers）是 Vue 2 中非常重要的概念，用于处理复杂的数据逻辑。
计算属性
计算属性用于声明式地描述依赖关系，当依赖的数据发生变化时，计算属性会自动更新。
代码示例
<!-- App.vue -->
<template>
<div id="app">
<p>First Name: <input v-model="firstName" /></p>
<p>Last Name: <input v-model="lastName" /></p>
<p>Full Name: {{ fullName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: '',
lastName: ''
}
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
}
</script>监听属性
监听属性用于观察数据的变化，并执行相应的操作。
代码示例
<!-- App.vue -->
<template>
<div id="app">
<p>Counter: {{ counter }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
counter: 0
}
},
methods: {
increment() {
this.counter++
}
},
watch: {
counter(newVal, oldVal) {
console.log(`Counter changed from ${oldVal} to ${newVal}`)
}
}
}
</script>2. Vue 3 新特性
2.1 Composition API
Vue 3 引入了 Composition API，使得逻辑更加清晰和模块化。
代码示例
<!-- MyComponent.vue -->
<template>
<div class="my-component">
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script setup>
import { ref, defineProps } from 'vue'
const props = defineProps({
title: String,
content: String
})
</script>
<style scoped>
.my-component {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
</style>2.2 Teleport
Teleport 组件允许将模态框或其他组件的内容渲染到 DOM 的其他位置，从而避免样式冲突。
代码示例
<!-- Modal.vue -->
<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>
<style scoped>
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 5px;
position: relative;
}
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>2.3 计算属性和监听属性
Vue 3 中的计算属性和监听属性与 Vue 2 类似，但 Composition API 提供了更灵活的方式来使用它们。
计算属性
代码示例
<!-- App.vue -->
<template>
<div id="app">
<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>监听属性
代码示例
App.vue
<template>
<div id="app">
<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. 状态管理
3.1 Vuex
Vuex 是 Vue 的状态管理库，适用于大型应用的状态管理。
代码示例
javascript// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
increment({ commit }) {
commit('increment')
}
},
getters: {
doubleCount(state) {
return state.count * 2
}
}
})
vue<!-- App.vue -->
<template>
<div id="app">
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
computed: {
...mapState(['count']),
...mapGetters(['doubleCount'])
},
methods: {
...mapActions(['increment'])
}
}
</script>3.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
}
})<!-- App.vue -->
<template>
<div id="app">
<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>Vue 2 和 Vue 3 的主要区别
1. 语法和 API 变化
1.1 模板语法
-
Vue 2: 使用
v-on和v-bind指令。 -
Vue 3: 依然支持
v-on和v-bind，但引入了更简洁的语法，如@和:。
代码示例
Vue 2
<template>
<button v-on:click="handleClick">Click me</button>
<input v-bind:value="value" />
</template>Vue 3
<template>
<button @click="handleClick">Click me</button>
<input :value="value" />
</template>1.2 Composition API
-
Vue 2: 主要使用 Options API。
-
Vue 3: 引入了 Composition API，使得逻辑更加模块化和可复用。
代码示例
Vue 2
<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
<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>2. 性能优化
2.1 渲染机制
-
Vue 2: 使用虚拟 DOM 进行渲染。
-
Vue 3: 优化了虚拟 DOM 的实现，减少了内存占用和提升了渲染性能。
2.2 编译器优化
-
Vue 2: 编译器对模板进行静态分析，生成渲染函数。
-
Vue 3: 编译器进行了更多的优化，如静态树提升、动态节点标记等，进一步提高了运行时性能。
3. 新特性
3.1 Teleport
-
Vue 2: 没有 Teleport 组件。
-
Vue 3: 引入了 Teleport 组件，允许将模态框或其他组件的内容渲染到 DOM 的其他位置。
代码示例
Vue 3
<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>3.2 Fragments
-
Vue 2: 不支持多个根节点。
-
Vue 3: 支持 Fragments，允许组件有多个根节点。
代码示例
Vue 3
<template>
<div>First element</div>
<div>Second element</div>
</template>3.3 Suspense
-
Vue 2: 没有 Suspense 组件。
-
Vue 3: 引入了 Suspense 组件，用于异步组件的加载和错误处理。
代码示例
Vue 3
<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>计算属性和监听属性的区别
1. 计算属性（Computed Properties）
-
定义: 计算属性是基于其依赖的数据自动生成的属性。
-
特点
:
-
声明式地描述依赖关系。
-
当依赖的数据发生变化时，计算属性会自动更新。
-
计算属性是惰性的，只有在被访问时才会重新计算。
-
代码示例
Vue 2
<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>
export default {
data() {
return {
firstName: '',
lastName: ''
}
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
}
</script>Vue 3
<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>2. 监听属性（Watchers）
-
定义: 监听属性用于观察数据的变化，并执行相应的操作。
-
特点
:
-
声明式地观察数据的变化。
-
当被监听的数据发生变化时，会触发回调函数。
-
监听属性是主动的，每次数据变化都会触发回调。
-
代码示例
Vue 2
<template>
<div>
<p>Counter: {{ counter }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
counter: 0
}
},
methods: {
increment() {
this.counter++
}
},
watch: {
counter(newVal, oldVal) {
console.log(`Counter changed from ${oldVal} to ${newVal}`)
}
}
}
</script>Vue 3
<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>总结
Vue 2 和 Vue 3 都是非常强大的前端框架，各有优势。Vue 3 在性能、API 设计和新特性方面进行了大量的改进，使得开发体验更加流畅和高效。希望本文能够帮助你更好地理解和应用这些技术。