当前位置： 首页 > article >正文

前端刺客系列----Vue 3 入门介绍

article 2024/11/15 6:39:57

目录

一.什么是 Vue 3？

二.Vue 3 的主要特性

三,Vue3项目实战

四.总结


在前端开发的世界里，Vue.js 作为一款渐进式的 JavaScript 框架，已成为许多开发者的首选工具。自从 Vue 3 发布以来，它带来了许多重要的改进和新特性，不仅提升了性能，还使得开发体验更加流畅。在这篇文章中，我们将详细介绍 Vue 3 的核心概念，并通过一些简单的代码示例，帮助大家快速上手 Vue 3。

一.什么是 Vue 3？

Vue.js 是一款渐进式的 JavaScript 框架，用于构建用户界面。它的设计理念非常灵活，可以逐步引入到项目中，适应不同规模的需求。Vue 3 是 Vue.js 框架的最新版本，它在 Vue 2 的基础上进行了全面的优化，带来了以下几大亮点：

性能提升：Vue 3 引入了更高效的虚拟 DOM 和组件渲染机制，使得整体性能得到了显著提升。
组合式 API (Composition API)：这是一种全新的编写组件的方式，使得逻辑复用和代码组织变得更加灵活和清晰。
TypeScript 支持：Vue 3 在设计时就考虑到了 TypeScript，增强了对类型系统的支持。
更小的包体积：Vue 3 的核心库相比 Vue 2 更加精简，加载速度更快。
多个其他新特性：如 Teleport、Suspense、Fragment 等。
在这篇文章中，我们会深入探索 Vue 3 的主要新特性，并通过示例帮助大家更好地理解它。

二.Vue 3 的主要特性

1. 组合式 API (Composition API)
组合式 API 是 Vue 3 中最为重要的新增特性之一。它允许开发者通过函数的方式组织和复用逻辑，相比于 Vue 2 中的选项式 API (Options API)，组合式 API 提供了更强的灵活性和可维护性。

为什么使用组合式 API？
更好的逻辑复用：组合式 API 允许将相关的逻辑封装到函数中，使得代码复用变得更加简洁。
更清晰的代码结构：你可以按照功能进行代码分离，而不再依赖于 Vue 2 中的 data、methods、computed 等选项，避免了大量冗长的逻辑。
TypeScript 更好的支持：组合式 API 更适合与 TypeScript 配合使用，因为它能更好地推导类型。
代码示例：使用组合式 API 创建一个计数器

// App.vue
<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
// 引入 Composition API 中的 `ref` 函数
import { ref } from 'vue'

// 定义一个响应式变量 `count`
const count = ref(0)

// 定义一个方法来更新 `count`
const increment = () => {
  count.value++
}
</script>

在这个例子中，我们使用了 ref 函数来创建一个响应式变量 count，并用 increment 方法来更新它。ref 会将基本类型（如数字、字符串等）包装成响应式对象，通过 .value 来访问和修改其值。

2. 更高效的虚拟 DOM 和性能提升
Vue 3 在性能方面做了大量的优化。最显著的改进之一是虚拟 DOM 的实现变得更加高效。虚拟 DOM 是 Vue 用来追踪 DOM 变更的技术，它允许 Vue 对 DOM 进行精确的更新，而不是每次都完全重渲染整个页面。Vue 3 在此基础上进行了优化，使得渲染速度更快，尤其是在大规模应用中。

3. TypeScript 支持
Vue 3 从一开始就为 TypeScript 提供了更全面的支持。在 Vue 2 中，TypeScript 的集成不是特别好，而 Vue 3 则原生支持 TypeScript，提供了更好的类型推导和类型检查。

代码示例：使用 TypeScript 和 Vue 3

// App.vue
<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref<number>(0)

const increment = () => {
  count.value++
}
</script>

在这个示例中，我们通过 lang="ts" 声明了 Vue 文件使用 TypeScript，并为 count 使用了明确的类型定义 ref<number>(0)，这保证了变量 count 始终是数字类型。

4. Teleport
Vue 3 引入了一个新的内置组件 Teleport，它允许将一个组件的内容渲染到页面的任何位置，而不是默认的父组件中。这对于某些特殊场景，比如模态框、通知等非常有用。

代码示例：使用 Teleport 实现一个模态框

<template>
  <div>
    <button @click="showModal = true">Open Modal</button>
    <Teleport to="body">
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          <p>This is a modal!</p>
          <button @click="showModal = false">Close</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showModal = ref(false)
</script>

<style>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>

在这个例子中，我们使用了 Teleport 将模态框内容渲染到 body 元素下，而不是当前组件的 DOM 中。

5. Suspense 和异步组件
Vue 3 引入了 Suspense 组件，它使得异步加载的组件能够在数据加载完毕之前提供一个“加载中”的状态。这对于需要异步加载的应用非常有用，提升了用户体验。

代码示例：使用 Suspense 加载异步组件

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <p>Loading...</p>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)
</script>

三,Vue3项目实战

项目结构

my-vue3-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── TaskList.vue
│   │   ├── TaskItem.vue
│   │   └── AddTask.vue
│   ├── store/
│   │   └── taskStore.js
│   ├── views/
│   │   ├── Home.vue
│   │   └── NotFound.vue
│   ├── router/
│   │   └── index.js
│   ├── App.vue
│   ├── main.js
├── package.json
└── vite.config.js

1. src/main.js - 项目入口文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createStore } from 'vuex'

const app = createApp(App)

app.use(router)
app.use(createStore({
  state: {
    tasks: []
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task)
    },
    deleteTask(state, taskId) {
      state.tasks = state.tasks.filter(task => task.id !== taskId)
    },
    toggleTaskCompletion(state, taskId) {
      const task = state.tasks.find(t => t.id === taskId)
      if (task) {
        task.completed = !task.completed
      }
    },
    editTask(state, { taskId, updatedTask }) {
      const task = state.tasks.find(t => t.id === taskId)
      if (task) {
        Object.assign(task, updatedTask)
      }
    }
  },
  getters: {
    completedTasks: (state) => {
      return state.tasks.filter(task => task.completed)
    },
    pendingTasks: (state) => {
      return state.tasks.filter(task => !task.completed)
    }
  }
}))

app.mount('#app')

2. src/router/index.js - 路由配置 

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import NotFound from '../views/NotFound.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/:catchAll(.*)',
    name: 'NotFound',
    component: NotFound
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

3. src/views/Home.vue - 主页视图

<template>
  <div class="home">
    <h1>Task Manager</h1>
    <AddTask />
    <h2>Pending Tasks</h2>
    <TaskList :tasks="pendingTasks" />
    <h2>Completed Tasks</h2>
    <TaskList :tasks="completedTasks" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import TaskList from '../components/TaskList.vue'
import AddTask from '../components/AddTask.vue'

const store = useStore()

const pendingTasks = computed(() => store.getters.pendingTasks)
const completedTasks = computed(() => store.getters.completedTasks)
</script>

<style scoped>
.home {
  padding: 20px;
}
h1 {
  color: #42b983;
}
</style>

4. src/components/AddTask.vue - 添加任务组件

<template>
  <div class="add-task">
    <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <button @click="addTask">Add Task</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'

const newTask = ref('')
const store = useStore()

const addTask = () => {
  if (newTask.value.trim()) {
    store.commit('addTask', {
      id: Date.now(),
      title: newTask.value,
      completed: false
    })
    newTask.value = ''
  }
}
</script>

<style scoped>
.add-task {
  margin-bottom: 20px;
}
input {
  padding: 8px;
  margin-right: 10px;
  width: 200px;
}
button {
  padding: 8px 12px;
}
</style>

5. src/components/TaskList.vue - 任务列表组件

<template>
  <div>
    <ul>
      <TaskItem
        v-for="task in tasks"
        :key="task.id"
        :task="task"
      />
    </ul>
  </div>
</template>

<script setup>
import TaskItem from './TaskItem.vue'
import { defineProps } from 'vue'

const props = defineProps({
  tasks: Array
})
</script>

<style scoped>
ul {
  list-style: none;
  padding-left: 0;
}
</style>

6. src/components/TaskItem.vue - 任务项组件

<template>
  <li :class="{ completed: task.completed }">
    <span @click="toggleCompletion">{{ task.title }}</span>
    <button @click="deleteTask">Delete</button>
    <button @click="editTask">Edit</button>
  </li>
</template>

<script setup>
import { defineProps } from 'vue'
import { useStore } from 'vuex'

const props = defineProps({
  task: Object
})

const store = useStore()

const toggleCompletion = () => {
  store.commit('toggleTaskCompletion', props.task.id)
}

const deleteTask = () => {
  store.commit('deleteTask', props.task.id)
}

const editTask = () => {
  const newTitle = prompt('Edit Task Title', props.task.title)
  if (newTitle && newTitle !== props.task.title) {
    store.commit('editTask', {
      taskId: props.task.id,
      updatedTask: { title: newTitle }
    })
  }
}
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
button {
  margin-left: 10px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

7. src/views/NotFound.vue - 404 页面视图

<template>
  <div class="not-found">
    <h1>404 - Page Not Found</h1>
  </div>
</template>

<script setup>
</script>

<style scoped>
.not-found {
  text-align: center;
  padding: 50px;
}
</style>

8. public/index.html - 项目 HTML 模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 Task Manager</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

9. package.json - 项目依赖

{
  "name": "vue3-task-manager",
  "version": "1.0.0",
  "main": "src/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "vite": "^4.0.0"
  }
}

10. vite.config.js - Vite 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

四.总结

    Vue 3 是 Vue.js 框架的最新版本，它带来了多个令人期待的改进和特性，旨在提升开发者体验和性能。最显著的变化是引入了 组合式 API，通过 setup() 函数和 ref、reactive 等新的响应式机制，开发者可以更灵活地组织组件逻辑，避免了 Vue 2 中的复杂选项式 API，提升了代码的可维护性和逻辑复用性。此外，Vue 3 进一步优化了性能，框架的体积比 Vue 2 小了约 30%，并且虚拟 DOM 的更新算法也得到了改进，使得更新速度更快，启动时间也大大缩短。同时，Vue 3 完美支持 TypeScript，增强了类型推导和类型检查，使得大型项目的开发更加安全和高效。Vue 3 还支持 Fragment，允许组件返回多个根节点，从而避免了不必要的 DOM 包裹元素。新加入的 Teleport 组件使得将内容渲染到页面的任意位置变得简单，例如模态框、弹窗等 UI 组件的处理更加灵活。而 Suspense 则提供了对异步组件的优雅处理，允许开发者在组件加载时显示占位符内容，改善用户体验。此外，Vue 3 与 Vite 集成紧密，Vite 作为构建工具提供了极快的热更新和构建速度，极大提升了开发效率。对于 Vue 2 的开发者，Vue 3 提供了良好的向后兼容性，使得迁移过程更加平滑，且框架支持通过 @vue/compat 模式逐步过渡。总体而言，Vue 3 是一个强大、灵活且高效的框架，既适合小型项目，也能够满足大型应用的开发需求，帮助开发者构建更现代化、响应式和可扩展的 Web 应用。


http://www.kler.cn/a/387196.html

相关文章：

  • C++ 的协程
  • HAproxy 详解
  • C++初阶：类和对象（上）
  • C获取程序名称的方法
  • jmeter常用配置元件介绍总结之后置处理器
  • DNS面临的4大类共计11小类安全风险及防御措施
  • 数据挖掘（十）
  • Elasticsearch与Redis的Netty冲突
  • CentOS 9 Stream 上安装 PostgreSQL 16
  • C++builder中的人工智能（18）：神经网络中的SoftMax函数
  • el-tab使用
  • 新手如何快速搭建一个Springboot项目
  • 代码随想录刷题记录（二十五）——54. 替换数字
  • 【信号处理】绘制IQ信号时域图、星座图、功率谱
  • 吾店云介绍 – 中国人的WordPress独立站和商城系统平台
  • docker进行SRS直播服务器搭建
  • WPS 默认模板修改
  • 关于qiskit版本＞1.0.0，execute函数被替换
  • Java基于微信小程序的美食推荐系统（附源码，文档）
  • ONLYOFFICE 办公套件测评：高效办公新选择
  • 「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用
  • Python自动化运维：配置管理工具到自动化部署与版本控制
  • Flutter错误： uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared
  • Shortcut Learning in In-Context Learning: A Survey
  • MySQL 权限困境：从权限丢失到权限重生的完整解决方案20241108
  • Android Framework AMS（11）广播组件分析-2（注册/注销流程解读）