FungLeo's Blog

【转载】vue 3.x 如何有惊无险地快速入门 —— 一文扫遍 vue2 与 3 的差异点前言本文所分享的是关于 vue 3.x 在用法上的改变，而不是在代码实现上的不同。虽然 vue2 到 vue3 的实现大改，但在用法上变化基本不大，比较明显的一个变化就是添加了 setup(){} 函数了，几乎所有的配置变成了以函数的方式进行定义。即使是这样，但小改动还是很多的。本文主要分享的是 vue 2.x 与 vue 3.x 之间一些常见用法的差异。虽然记录的不多，但也不算少。本文资料来源：github.c

vue3.0 Composition API 上手初体验 构建基本项目开发环境目前，vue3.0 已经进入了 beta 版本了。众多的特性已经定下来了，相信有不少朋友都已经开始阅读相关的资料或源码了。虽然我现在工作比较劳累，但是对于这样的前端行业的盛事，我也不能袖手旁观哪！所以，我决定写一个系列的文章，来带大家上手一下全新的 vue3.0。首先，从目前公开信息来看，vue3.0 是完全兼容 2.0 版本的所有写法的。因此，即便不了解 3.0 的内容，用原有的知识储备，也是完全可以使用 3.0 版本的。

vue3.0 Composition API 上手初体验 构建 vue 基础代码上一讲中，我们通过配置 webpack 构建了一个基础的开发环境。但是并没有涉及到 vue3.0 的内容，这一讲中，我们来构建一些基础代码。首先，在终端中进入到我们的项目目录，我的 demo 目录为 ~/Sites/myWork/demo/vue3-demo。本人为 MacOS 环境， Windows 环境请自行将一些命令转换成你习惯的操作。比如在文件夹中操作，或在 vscode 等编辑器中操作。创建基础文件# 进

vue3.0 Composition API 上手初体验 使用 vue-router 构建多页面应用前两讲，我们已经顺利的使用 vue3.0 将项目跑起来了。但是实在是过于简陋，目前我们几乎不可能开发只有一个页面的应用。因此，vue-router 是必不可少的。这一讲，我们就来讲讲最新的 vue-router 配合 vue3.0 是如何玩的。首先，我们进入我们的项目目录，安装依赖。我的 demo 目录为 ~/Sites/myWork/demo/vue3-demo。本人为 MacOS 环境， Wind

vue3.0 Composition API 上手初体验 神奇的 setup 函数 (一) 响应数据的绑定从网上大家对于 vue 3.0 的最大的变化，就是 Vue Composition API 的看法来说，两极分化比较严重。一种是认为这种写法实在太优秀了，很好，很喜欢。另外一种则认为变得没有以前那么清晰了，增加了学习成本。那么我是怎么认为的呢？当然是第一种想法啊！你可知道，曾经我一度感觉到 vue 的语法实在是太过于变态，进而放弃使用 react 开发一年有余。后来因为来上海，入职的公司都是 vue

vue3.0 Composition API 上手初体验 神奇的 setup 函数 (二) 响应对象数据的绑定上文中，我们已经了解普通响应数据的绑定了。但是，那只是普通数据，我们在实际开发中，用到的对象数据是最多的。这一讲，我们就来讲讲响应对象数据的绑定。开干。编辑 src/views/About.vue 文件编写代码如下：<template> <router-link to="/">点这里去首页</router-link> <hr> &

vue3.0 Composition API 上手初体验 神奇的 setup 函数 (三) 生命周期函数通过前面两讲，我相信大家对于 vue 3.0 双向绑定数据，已经有了一些了解了。但是，对于生命周期函数，还是一脸懵逼的。这一讲，我们来讲解生命周期函数。vue 2.0 生命周期对比 3.0 生命周期2.0 周期名称3.0 周期名称说明beforeCreatesetup组件创建之前createdsetup组件创建完成beforeMountonBeforeM

vue3.0 Composition API 上手初体验 神奇的 setup 函数 (四) 计算属性 computed上一讲中，我们讲解了 vue 3.0 的生命周期，我相信大家已经了然了。在 vue 中，计算属性 computed 是非常常用的。那么，在 vue 3.0 中，计算属性是如何使用的呢？这一讲我们来着重讨论，。上代码！首先，我们新建 src/views/Computed.vue 文件，并在路由中设定路由为 computed。不会操作的看上一讲的演示。然后编写如下代码：<temp

vue3.0 Composition API 上手初体验 普通组件的开发与使用通过前面的章节的讲解，我相信大家对于 vue 3.0 的新特性的基本使用，已经没有问题了。但是新的问题来了，组件是怎么玩的呢？这一讲，我们就来讨论一下，组件的开发与使用。写一个 button 组件首先，我们来创建一个按钮组件的文件# 进入项目文件夹cd ~/Sites/myWork/demo/vue3-demo# 创建组件文件夹mkdir -p src/components# 创建按钮组件touch src/c

vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化在我讲 vue 3.0 的普通组件的内容里，我提到了具名插槽发生了变化，我当时不清楚新的如何使用。今天查看了一些资料，终于搞明白了。搞一个带具名插槽的子组件直接撸代码：<template> <table> <tr> <th>默认插槽：</th> <td><slot /></td&g

vue3.0 Composition API 上手初体验 函数组件的开发与使用在上一节中，我们讨论了普通组件的开发与使用，其实相比较 vue 2.0 来说，差别并不大。vue 3.0 的 Composition API 带来的最大的特性，就是函数组件。通过函数组件，我们可以体会到 类似 react 编程的愉悦。这个章节，我们就来讨论一下。在 vue 2.0 中，当多个页面或组件使用到相同逻辑的时候，我们会使用 mixin 来编写逻辑。其实我个人在使用 mixin 时，感觉还是很方便的，但是当项目组的其

vue3.0 Composition API 上手初体验 用路由循环，做个导航菜单通过前文的讲述，我已经基本讲清楚了 vue 3.0 的新特性，以及开发使用方法。只是演示 Demo 搞了好几个页面，只能输入地址进行跳转让我不爽，于是，我给我的 Demo 代码搞了个菜单，这里，我把这部分内容讲述一下。重构 src/router/index.js 文件在原来编写的代码中，我给单条路由只写了 path 和 component 两个参数，这里，我们加上 meta 参数，并为其设置 title 属性。相关代码如