从 Vue 2 到 Vue 3：全面升级指南

​🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来Vuet篇专栏内容:Vue-从 Vue 2 到 Vue 3：全面升级指南

前言

随着前端技术的不断发展，Vue.js 作为一种轻量级且高效的框架，受到了广大开发者的喜爱。本文将详细介绍 Vue 2 和 Vue 3 的核心概念和实用技巧，并通过具体的代码示例来展示如何在项目中使用这些功能。我们还将探讨 Vue 2 和 Vue 3 之间的主要区别，帮助读者更好地理解和应用这些技术。

目录

前言

知识点

1. Vue 2 基础

1.1 组件化开发

代码示例

1.2 数据绑定

代码示例

1.3 计算属性和监听属性

计算属性

代码示例

监听属性

代码示例

2. Vue 3 新特性

2.1 Composition API

代码示例

2.2 Teleport

代码示例

2.3 计算属性和监听属性

计算属性

代码示例

监听属性

代码示例

3. 状态管理

3.1 Vuex

代码示例

3.2 Pinia

代码示例

Vue 2 和 Vue 3 的主要区别

1. 语法和 API 变化

1.1 模板语法

代码示例

1.2 Composition API

代码示例

2. 性能优化

2.1 渲染机制

2.2 编译器优化

3. 新特性

3.1 Teleport

代码示例

3.2 Fragments

代码示例

3.3 Suspense

代码示例

计算属性和监听属性的区别

1. 计算属性（Computed Properties）

代码示例

2. 监听属性（Watchers）

代码示例

总结

知识点

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">&times;</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">&times;</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 设计和新特性方面进行了大量的改进，使得开发体验更加流畅和高效。希望本文能够帮助你更好地理解和应用这些技术。