菜单 搜索
首页 前端知识 从 Vue 2 到 Vue 3：全面升级指南

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

2024-10-28 20:10:51 前端知识 前端哥 871 262 我要收藏

​🌈个人主页：前端青山
🔥系列专栏：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 设计和新特性方面进行了大量的改进，使得开发体验更加流畅和高效。希望本文能够帮助你更好地理解和应用这些技术。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/19329.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

nlohmann/json的介绍和使用详解

2024-11-02 11:11:09

使用python读写txt和json（jsonl）大文件

2024-11-02 11:11:02

python将字典数据保存为json文件

2024-11-02 11:11:55

【geojson 各国数据获取指引】

2024-11-02 11:11:55

settings.json：Visual Studio Code的深度定制化核心

2024-11-02 11:11:55

如何使用 Python 批量检测和转换 JSONL 文件编码为 UTF-8

2024-11-02 11:11:19

执行npm run serve 找不到vite模块 Error: Cannot find module

2024-11-02 11:11:16

前端使用 npm install后会报code ERESOLVEERESOLVE unable to resolve dependency tree等导入依赖错误

2024-11-02 11:11:09

问题：无法加载文件 C:\Users\ASUS\AppData\Roaming\npm\npm.ps1，因为在此系统上禁止运行脚本。

2024-11-02 11:11:07

共享依赖的新选择：探索 PNPM 在低代码开发中的威力

2024-11-02 11:11:56

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
3

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
4

vue使用datav echarts

2024-09-06 00:09:381000
5

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
6

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
7

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
8

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
9

npm的使用

2024-08-18 00:08:131000
10

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！