技术总结:Vue在前端开发中的应用与实践

🕗 发布于 2025-01-19 19:05 javascript 前端 开发语言

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

依旧青山,本期给大家带来Vue篇专栏内容:Vue-开发应用与实践

#博客之星2024年度总评选-主题文章创作#

前言

嗨喽,我是青山,本年度创作已然接近尾声,2024年通过分享前端前沿技术基础及应用与大家相识,主要还是通过Vue框架知识的分析及应用讲解,那么我们来回顾一下vue2过渡到vue3所需了解的基础应用

前言

1. Vue 2 与 Vue 3 的主要区别

1.1 语法和 API 变化

1.1.1 模板语法

1.1.2 Composition API

6. 从 Vue 2 过渡到 Vue 3 的注意事项

1. Vue 2 与 Vue 3 的主要区别

1.1 语法和 API 变化

1.1.1 模板语法

Vue 2 和 Vue 3 在模板语法上有一些细微的变化，Vue 3 更加简洁。

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.1.2 Composition 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>

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 示例：

<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>

1.3.2 Fragments

Vue 3 支持 Fragments，允许在模板中使用多个根元素。

Vue 3 示例：

<template>
  <div>First element</div>
  <div>Second element</div>
</template>

1.3.3 Suspense

Suspense 组件允许在异步组件加载时显示 fallback 内容。

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>

2. Vue 3 的新特性

2.1 Composition API

Composition API 是 Vue 3 的核心特性之一，它使得逻辑更加清晰和模块化。

示例：

<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 的其他位置，从而避免样式冲突。

示例：

<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>

2.3 计算属性和监听属性

Vue 3 中的计算属性和监听属性与 Vue 2 类似，但 Composition API 提供了更灵活的方式来使用它们。

计算属性示例：

<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>

监听属性示例：

<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 依然强调组件化开发，通过将页面拆分为多个独立的组件，提高代码的可维护性和复用性。

示例：

<!-- 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 提供了多种数据绑定方式，包括插值表达式、指令等。

示例：

<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 的状态管理库，适用于大型应用的状态管理。

示例：

// 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：

<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 支持。

// 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：

<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

配置路由：

// 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

在组件中使用路由：

<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 的核心区别、知识点、基础及应用，帮助开发者更好地理解和应用这些技术。

原文地址：https://blog.csdn.net/2302_76329106/article/details/145224672

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【PyCharm】远程连接Linux服务器
下一篇：【25考研】也很难！清华大学计算机考研复试难度分析！

Android 高德地图API（新版）
2020年的时候我写了关于高德地图的使用，在当时你按照文章是没有问题，然而现在到了2024年了，这几年高德的SDK发生了变化，Android Studio发生了变化，不变的是什么呢？就是学校的老师还是
阅读更多2025-01-20
【Android学习】2024最新版Android Studio安装与配置
Windows系统的要求。
阅读更多2025-01-20
【Android】Android生成二维码并动态刷新
二维码在现代移动应用中被广泛应用，例如用于信息分享、产品推广、移动支付等场景。在 Android 开发中，生成二维码是一项常见的功能需求。
阅读更多2025-01-20
Android下拉刷新控件SwipeRefreshLayout实践指南
本文还有配套的精品资源，点击获取简介：SwipeRefreshLayout是Android SDK中的一个布局组件，主要用于实现下拉刷新功能，常用于列表或网格视图的顶部。本指南详细介绍了Swip
阅读更多2025-01-20
下载AndroidStudio以及安装过程
找到要安装的版本Android Studio lguana |2023.2.1 RC 1 February 5, 2024。打开官网下载地址，为了寻求以前版本，点击“下载归档”，跳转到链接。点击SDK
阅读更多2025-01-20
一分钟搞定 Android 视频播放器ExoPlayer的使用
MP4, M4A, FMP4, WebM, MKV, MP3, Ogg, WAV, MPEG-TS, MPEG-PS, FLV and ADTS (AAC)等。作为一个资深的Android开发人员，视
阅读更多2025-01-20
Android gradle和maven国内镜像地址
在Android 开发中经常会出现gradle或者maven依赖下载过慢或者失败的情况，如果出现这种情况的话，那就需要使用国内镜像地址，梯子另算，本文提供了腾讯的gralde国内镜像地址以及阿里的国内
阅读更多2025-01-20
Android Audio——使用AudioRecord录制音频
Android SDK 提供了两套音频采集的API，分别是：MediaRecorder 和 AudioRecord，前者是一个更加上层一点的 API，它可以直接把手机麦克风录入的音频数据进行编码压缩（
阅读更多2025-01-20
Rocky Linux 安装redmine记录
【代码】RockyLinux安装redmine记录。
阅读更多2025-01-20
算法-键盘行
给你一个字符串数组words，只返回可以使用在美式键盘同一行的字母打印出来的单词。键盘如下图所示。请注意，字符串不区分大小写，相同字母的大小写形式都被视为在同一行。
阅读更多2025-01-20

技术总结:Vue在前端开发中的应用与实践

前言

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. 总结

相关文章