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

-青山如故

1621人浏览 · 2024-10-24 14:14:25

-青山如故 · 2024-10-24 14:14:25 发布

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

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

前言

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

1. 计算属性（Computed Properties）

知识点

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>