编程技术是改变世界的力量。
本站
当前位置:网站首页 > HTML/CSS > 正文

Vue3教程:看这一篇就够了

gowuye 2023-10-17 00:31 13 浏览 0 评论

知识星球:写代码那些事

----

如果你有收获|欢迎|点赞|关注|转发

----

这里会定期更新|大厂的开发|架构|方案设计

这里也会更新|如何摸鱼|抓虾

欢迎来到写代码那些事 在现代Web开发领域,Vue.js已经成为最受欢迎的JavaScript框架之一。Vue3作为Vue.js的最新版本,引入了许多强大的特性和改进,使得构建现代化的Web应用更加简单、高效。本教程将带您深入了解Vue3的核心概念、特性和最佳实践,帮助您快速上手并构建出色的Web应用。

目录:

  • 前言:为什么选择Vue3?
  • Vue3核心概念与基本语法
  • 组件化开发与单文件组件
  • 响应式数据与状态管理
  • Vue Router:路由管理
  • Vue3生命周期与Hooks函数
  • 总结

1. 前言:为什么选择Vue3?

Vue3作为Vue.js的最新版本,不仅保留了Vue.js的优点,还引入了许多性能优化和新特性,如编译优化、Composition API等。这些改进使得Vue3在开发大型Web应用时更具竞争力。

1. 编译优化: Vue3引入了一种新的编译器,称为“基于Proxy的编译器”,它能够生成更高效、更精简的渲染函数代码。这意味着在运行时,Vue3可以更快地解析和渲染模板,从而提升应用的性能。

2. Composition API: Vue3引入了Composition API,这是一种全新的API风格,使得组件逻辑更加清晰、可复用。相比于Vue2的Options API,Composition API允许开发者更自由地组织组件代码,将相关逻辑聚集在一起,提高了代码的可维护性和可测试性。

3. 更好的TypeScript支持: Vue3对TypeScript的支持更加友好。通过Composition API和TypeScript结合使用,开发者可以在编码过程中获得更好的类型提示和错误检查,减少潜在的bug。

4. 更小的包体积: Vue3优化了包的体积,使得下载和加载速度更快。这对于提升用户体验和移动端应用尤为重要。

5. 更快的渲染性能: Vue3在渲染性能方面进行了优化,比Vue2更快地更新视图,从而提升了应用的响应速度。

6. 改进的响应式系统: Vue3的响应式系统使用了Proxy代理对象,使得数据的响应式追踪更精确,减少了不必要的渲染。

7. Teleport组件: Vue3引入了Teleport组件,可以轻松实现Portal功能,将组件的内容渲染到DOM的不同位置,方便处理弹出层等场景。

8. 兼容Vue2: Vue3在设计时考虑到了与Vue2的兼容性,因此可以逐步升级现有的Vue2项目到Vue3,而不需要全部重写代码。

2. Vue3核心概念与基本语法

学习Vue3的核心概念,包括Vue实例、模板语法、指令等。通过示例代码,演示如何创建一个简单的Vue3应用。

步骤 1:引入Vue3

首先,你需要在项目中引入Vue3。你可以通过以下方式获取Vue3的CDN链接:

<script src="https://unpkg.com/vue@3.0.0/dist/vue.global.min.js"></script>

步骤 2:创建Vue实例

在HTML文件中,我们创建一个容器元素,用于渲染Vue应用。然后,你可以在JavaScript文件中创建Vue实例,并将其与容器元素关联起来。

<!DOCTYPE html>
<html>
<head>
  <title>Vue3 Demo</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="https://unpkg.com/vue@3.0.0/dist/vue.global.min.js"></script>
  <script src="app.js"></script>
</body>
</html>
// app.js
const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
});

app.mount('#app');

在这个示例中,我们使用Vue.createApp创建了一个Vue应用实例,并将其关联到id为app的HTML元素上。data选项定义了我们需要在应用中使用的数据,这里是一个简单的message。

步骤 3:使用模板语法

Vue的模板语法允许我们将数据绑定到DOM元素上,实现动态更新。

在上面的示例中,我们在<div id="app">内部使用了双大括号{{ }}来绑定数据。这样,当message数据发生变化时,页面上的文本也会随之更新。

<div id="app">
  {{ message }}
</div>

步骤 4:运行应用

将上述HTML和JavaScript代码保存为相应的文件,然后在浏览器中打开HTML文件。你将看到页面上显示着"Hello, Vue3!",这是由Vue实例中的message数据驱动的。

这只是一个简单的Vue3应用示例,但它涵盖了Vue的核心概念:创建Vue实例、使用模板语法绑定数据。通过这个基础示例,你已经迈出了学习Vue3的第一步。随着深入学习,你将学会更多关于指令、组件、状态管理等方面的知识,从而能够构建更复杂、更强大的Vue应用。

3. 组件化开发与单文件组件

了解Vue3中组件化开发的重要性,学习如何创建可复用的组件。介绍单文件组件的概念,以及如何使用Vue CLI来构建项目。

为什么组件化很重要?

组件化开发有许多优势:

  1. 可复用性: 组件可以在不同的地方被多次使用,避免了重复编写相似的代码,提高了代码的可复用性。
  2. 可维护性: 将界面拆分成小的组件,使得每个组件的逻辑相对独立,易于维护和测试。
  3. 可扩展性: 新的功能可以通过添加新的组件来实现,而不会影响到其他组件。
  4. 团队协作: 不同的团队成员可以同时开发不同的组件,降低了开发的耦合度。

Vue3中的组件

在Vue3中,组件可以通过单文件组件的方式创建,这是一种将模板、脚本和样式封装在一个文件中的方式。单文件组件的后缀通常是.vue,它包括三个部分:

  1. 模板(Template): 定义了组件的外观和结构,使用Vue的模板语法来描述。
  2. 脚本(Script): 包含组件的行为逻辑,可以访问组件的数据和方法。
  3. 样式(Style): 定义了组件的样式,可以使用CSS或其他预处理器。

使用Vue CLI构建项目

Vue CLI是一个用于快速构建Vue项目的脚手架工具。它提供了项目初始化、开发服务器、打包等一系列功能,让你能够专注于开发而不用搭建开发环境。

以下是使用Vue CLI构建项目的简要步骤:

  • 安装Vue CLI:
  1. 在命令行中运行以下命令来全局安装Vue CLI。
npm install -g @vue/cli
  • 创建项目: 运行以下命令来创建一个新的Vue项目。
vue create my-project
  1. 在这里,my-project是你项目的名称,你可以根据实际情况进行替换。
  • 启动开发服务器: 进入项目目录,运行以下命令来启动开发服务器。
cd my-project npm run serve
  1. 这将启动一个本地开发服务器,你可以在浏览器中访问项目。
  • 创建组件:在项目中创建单文件组件,将模板、脚本和样式写在同一个文件中。
<template>
  <div>
    <!-- 模板内容 -->
  </div>
</template>

<script>
export default {
  // 脚本内容
}
</script>

<style>
  /* 样式内容 */
</style>

使用Vue CLI构建项目,配合单文件组件的方式,可以让你更加高效地开发Vue应用。同时,这也符合现代前端开发中组件化的趋势,让你的代码更具可维护性和扩展性。

4. 响应式数据与状态管理

深入探讨Vue3的响应式数据原理,以及如何使用Vuex进行全局状态管理。示例代码将带您一步步构建一个简单的任务管理应用。

Vue3的响应式数据原理

Vue3采用了Proxy代理对象来实现响应式数据。当你访问代理对象的属性时,会自动进行依赖收集,当属性被修改时,会自动触发依赖更新。

下面是一个简单的示例,演示了如何在Vue3中创建响应式数据:

import { reactive, readonly } from 'vue';

const state = reactive({
  count: 0,
});

// 访问属性,触发依赖收集
console.log(state.count);

// 修改属性,触发依赖更新
state.count++;

// 使用readonly创建只读的响应式数据
const readOnlyState = readonly(state);

使用Vuex进行全局状态管理

Vuex是Vue官方提供的状态管理库,用于管理全局的状态。它可以帮助你在应用中集中管理和共享状态,使得状态变化更可预测、可追踪。

以下是一个简单的步骤,演示如何使用Vuex构建一个简单的任务管理应用:

  1. 安装Vuex: 在命令行中运行以下命令来安装Vuex。
npm install vuex

创建Vuex Store: 在项目中创建一个Vuex store,定义应用的状态和相关操作。

// store.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      tasks: [],
    };
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task);
    },
  },
  actions: {
    addTask({ commit }, task) {
      commit('addTask', task);
    },
  },
});

在应用中使用Vuex: 在应用的入口文件中引入Vuex store,然后将它注册到Vue实例中。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

在组件中使用Vuex: 在组件中使用mapStatemapMutations等辅助函数来访问和修改Vuex中的状态。

<template>
  <div>
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.text }}</li>
    </ul>
    <input v-model="newTask" @keyup.enter="addNewTask" />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['tasks']),
  },
  data() {
    return {
      newTask: '',
    };
  },
  methods: {
    ...mapMutations(['addTask']),
    addNewTask() {
      this.addTask({ id: Date.now(), text: this.newTask });
      this.newTask = '';
    },
  },
};
</script>

通过上述步骤,你可以构建一个简单的任务管理应用,使用Vuex来管理全局状态。Vuex的核心概念包括state、mutations、actions等,它们协同工作,使得状态管理更加结构化和可维护。

总结起来,Vue3的响应式数据原理基于Proxy代理,可以轻松地创建响应式数据。而使用Vuex进行全局状态管理可以帮助你更好地管理应用的状态,让代码更加可预测和可追踪。

5. Vue Router:路由管理

介绍Vue Router的使用,展示如何在Vue3中实现页面路由和导航。通过示例代码,创建一个多页面的应用。

Vue Router是Vue官方提供的路由管理器,用于在单页面应用中实现页面路由和导航。它允许你根据不同的URL路径加载不同的组件,实现多页面的效果。

以下是一个简单的步骤,演示如何在Vue3中使用Vue Router创建一个多页面的应用:

安装Vue Router: 在命令行中运行以下命令来安装Vue Router。

npm install vue-router

创建路由配置: 在项目中创建一个路由配置文件,定义不同URL路径和对应的组件。

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在应用中使用Vue Router: 在应用的入口文件中引入Vue Router配置,并将其注册到Vue实例中。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

在组件中实现导航: 在组件中使用<router-link>组件来实现导航链接,使用<router-view>组件来渲染路由对应的组件。

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

通过上述步骤,你可以在Vue3中使用Vue Router创建一个多页面的应用。Vue Router的核心概念包括<router-link>用于导航链接,<router-view>用于渲染路由组件,以及路由配置等。

在这个多页面应用中,不同的URL路径会对应不同的组件,用户可以通过导航链接在不同的页面之间进行切换。

6. Vue3生命周期与Hooks函数

了解Vue3中的生命周期和Hooks函数,掌握如何在不同阶段执行自定义操作。比较Vue2的Options API与Vue3的Composition API。

在Vue3中,生命周期钩子函数的命名和触发时机与Vue2相比有所改变。同时,Vue3引入了Composition API,这是一种新的组合式API,与Vue2中的Options API有所不同。

生命周期钩子函数

Vue3中的生命周期钩子函数名称和触发时机有所调整,主要有以下几点变化:

  • beforeCreate -> setup()
  • created -> setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted

在Vue3中,新增了一些更细粒度的生命周期钩子函数:

  • onRenderTracked: 在渲染时被追踪时触发
  • onRenderTriggered: 在渲染时触发重绘时触发

Composition API

Composition API是Vue3中引入的一种全新的API风格,旨在提供更灵活、可组合的代码复用方式。相对于Vue2的Options API,Composition API更加强调逻辑的组合和复用,使得代码更易维护和扩展。

Composition API的特点:

  1. 逻辑组合: 你可以将逻辑相关的代码组合在一起,更方便地进行重用。
  2. 逻辑复用: 可以将多个组合函数结合在一起,形成更大规模的逻辑复用单元。
  3. 逻辑分离: 不同功能的逻辑可以被拆分成不同的组合函数,让代码更模块化。
  4. TypeScript支持: Composition API更适合与TypeScript等静态类型语言一起使用。

下面是一个简单的对比示例,展示Vue2的Options API和Vue3的Composition API的差异:

Vue2中使用Options API:

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  mounted() {
    this.count++;
  },
};
</script>

Vue3中使用Composition API:

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    onMounted(() => {
      count.value++;
    });
    return { count };
  },
};
</script>

总结而言,Vue3中的生命周期钩子函数名称和Composition API带来了一些变化,让开发者能够更加灵活地组织和复用代码逻辑。Composition API可以使代码更加模块化,方便维护和拓展。

总结:

Vue3作为最新的Vue.js版本,带来了众多的改进和新特性,使得开发现代化的Web应用更加高效和便捷。通过本教程,您将深入学习Vue3的核心概念、语法和最佳实践,掌握构建出色Web应用的技能。无论您是初学者还是有经验的开发者,都能在这里找到有价值的内容,开启现代Web开发之旅。

#vue#?#vue3#?

相关推荐

python中调试pdb_python怎么调试
python中调试pdb_python怎么调试

当你的Python程序出现错误或行为不符合预期时,调试工具是一种非常有用的方式来帮助你找到问题所在。Python内置了一个强大的调试器模块,称为pdb(Pyth...

2023-10-22 12:21 gowuye

vue3+tsx开发语法详解_vue3+typescript
vue3+tsx开发语法详解_vue3+typescript

很多组件库都使用了TSX的方式开发,主要因为其灵活性比较高,TSX和SFC开发的优缺点就不介绍了,这里主要说一下将SFC项目改造为TSX的过程。安装JSX库pn...

2023-10-22 12:20 gowuye

对前端初学者的一些帮助(常见名词解释)
对前端初学者的一些帮助(常见名词解释)

1.HTML:HTML是超文本标记语言,“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。2.CSS:主要用来设计网页的样式,美化网页;...

2023-10-22 12:20 gowuye

JAVA多线程详解(超详细)_java多线程菜鸟教程
JAVA多线程详解(超详细)_java多线程菜鸟教程

一、线程简介1、进程、线程程序:开发写的代码称之为程序。程序就是一堆代码,一组数据和指令集,是一个静态的概念。进程(Process):将程序运行起来,我们称之...

2023-10-22 12:19 gowuye

一文搞懂什么时候用 Runnable?什么时候用 Callable ?

今天我们看一道leetcodehard难度题目:统计可以被K整除的下标对数目。题目给你一个下标从0开始、长度为n的整数数组nums和一个整数k,返回满足下述条件的下标对(i...

优化重复冗余代码的8种方式_优化重复冗余代码的8种方式是什么

日常开发中,我们经常会遇到一些重复代码。大家都知道重复代码不好,它主要有这些缺点:可维护性差、可读性差、增加错误风险等等。最近呢,我优化了一些系统中的重复代码,用了好几种的方式。感觉挺有用的,所以本文...

高级 CSS 和 Sass:Flexbox、网格、动画等等!
高级 CSS 和 Sass:Flexbox、网格、动画等等!

Udemy-高级CSS和Sass:Flexbox、网格、动画等等!讲师:JonasSchmedtmann下载:口袋资源网高级CSS和Sass:...

2023-10-22 12:19 gowuye

我们现在正处于 JavaScript 消亡的边缘?
我们现在正处于 JavaScript 消亡的边缘?

每10年JavaScript都会发生一次改朝换代式的变革。在我看来,JavaScript当前正处于一次快速变革的开始,而这段时期未来可能会被称为Ja...

2023-10-22 12:19 gowuye

CSS预编译器三剑客及PostCSS_前端预编译css有哪几种
CSS预编译器三剑客及PostCSS_前端预编译css有哪几种

这篇文章包含两个部分,第一部分是个CSS预编译器:Sass、Less、Stylus,他们之间的对比,第二部分是现在大火的PostCSS。为什么会出现CSS预编译...

2023-10-22 12:18 gowuye

CSS预处理语言Sass入门_css3预处理器
CSS预处理语言Sass入门_css3预处理器

1.引言CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一...

2023-10-22 12:18 gowuye

“金三银四”,让我们愉快的开始准备Web面经吧:CSS篇
“金三银四”,让我们愉快的开始准备Web面经吧:CSS篇

前言又到了一年一度的“金三银四的季节了”。不过恐怕大家都有感觉,当下,正面临着近几年来的最严重的互联网寒冬,因此今天的“金三银四”肯定又是一场更为惨烈的江湖厮杀...

2023-10-22 12:18 gowuye

sass @extend(继承)指令详解_sass内置函数总结

在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在HTML中给元素定义两个class,一个通用样式,一个特殊样式。普通CSS的实现接下来以警...

Sass混合的使用_sas中如何合并两组数据

本节我们学习Sass中的混合,Sass中的混合是通过@mixin指令来定义的,混合允许我们定义可以在整个样式表中重复使用的样式,避免使用无语意的类。混合可以包含所有的CSS规则和任何其他...

css代码规范工具stylelint_代码规范

css样式的书写顺序及原理——很重要!很重要!很重要!为什么重要???概括讲就是,它涉及了浏览器的渲染原理:reflow和repaint还想知道更多为什么可以参考:https://blog.csdn....

CSS-in-JS 是恶魔还是天使?_天启四骑士是恶魔还是天使
CSS-in-JS 是恶魔还是天使?_天启四骑士是恶魔还是天使

有些人极为讨厌CSS-in-JS,单单提起这个名字都会让他们反感,总之就是拒绝二字。他们认为样式不属于JavaScript,而是属于CSS,并且CSS...

2023-10-22 12:17 gowuye

取消回复欢迎 发表评论: