Vue3开始

1. Vue3简介

  • 2020年9月18日,Vue.js发布版3.0版本,代号:One Piece(海贼王)

  • 经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者

  • 官方发版地址:Release v3.0.0 One Piece · vuejs/core

  • 截止2023年10月,最新的公开版本为:3.3.4

    Vue3开始_第1张图片

1.1. 【性能的提升】

  • 打包大小减少41%

  • 初次渲染快55%, 更新渲染快133%

  • 内存减少54%

1.2.【 源码的升级】

  • 使用Proxy代替defineProperty实现响应式。

  • 重写虚拟DOM的实现和Tree-Shaking

1.3. 【拥抱TypeScript】

  • Vue3可以更好的支持TypeScript

1.4. 【新的特性】

  1. Composition API(组合API):

    • setup

    • refreactive

    • computedwatch

  2. 新的内置组件:

    • Fragment

    • Teleport

    • Suspense

  3. 其他改变:

    • 新的生命周期钩子

    • data 选项应始终被声明为一个函数

    • 移除keyCode支持作为 v-on 的修饰符

2. 创建Vue3工程

2.1. 【基于 vue-cli 创建】

点击查看官方文档

备注:目前vue-cli已处于维护模式,官方推荐基于 Vite 创建项目。

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version

## 安装或者升级你的@vue/cli 
npm install -g @vue/cli

## 执行创建命令
vue create vue_test

##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x

## 启动
cd vue_test
npm run serve

2.2. 【基于 vite 创建】(推荐)

vite 是新一代前端构建工具,官网地址:https://vitejs.cn,vite的优势如下:

  • 轻量快速的热重载(HMR),能实现极速的服务启动。
  • TypeScriptJSXCSS 等支持开箱即用。
  • 真正的按需编译,不再等待整个应用编译完成。
  • webpack构建 与 vite构建对比图如下:
    Vue3开始_第2张图片
    Vue3开始_第3张图片
  • 具体操作如下(点击查看官方文档)
## 1.创建命令
npm create vue@latest

## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

自己动手编写一个App组件




安装官方推荐的vscode插件:

Vue3开始_第4张图片

Vue3开始_第5张图片

总结:

  • Vite 项目中,index.html 是项目的入口文件,在项目最外层。
  • 加载index.html后,Vite 解析

    3. Vue3核心语法

    3.1. 【OptionsAPI 与 CompositionAPI】

    • Vue2API设计是Options(配置)风格的。
    • Vue3API设计是Composition(组合)风格的。

    Options API 的弊端

    Options类型的 API,数据、方法、计算属性等,是分散在:datamethodscomputed中的,若想新增或者修改一个需求,就需要分别修改:datamethodscomputed,不便于维护和复用。


    Composition API 的优势

    可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织在一起。

    Vue3开始_第6张图片

    说明:以上四张动图原创作者:大帅老猿

    3.2. 【拉开序幕的 setup】

    setup概述

    setupVue3中一个新的配置项,值是一个函数,它是 Composition API “表演的舞台,组件中所用到的:数据、方法、计算属性、监视…等等,均配置在setup中。

    特点如下:

    • setup函数返回的对象中的内容,可直接在模板中使用。
    • setup中访问thisundefined
    • setup函数会在beforeCreate之前调用,它是“领先”所有钩子执行的。
    
    
    
    

    setup的返回值

    • 若返回一个对象:则对象中的:属性、方法等,在模板中均可以直接使用**(重点关注)。**
    • 若返回一个函数:则可以自定义渲染内容,代码如下:
    setup(){
      return ()=> '你好啊!'
    }
    

    setup与OptionsAPI的关系

    • Vue2 的配置(datamethos…)中可以访问到 setup中的属性、方法。
    • 但在setup不能访问到Vue2的配置(datamethos…)。
    • 如果与Vue2冲突,则setup优先。

    setup语法糖

    setup函数有一个语法糖,这个语法糖,可以让我们把setup独立出去,代码如下:

    
    
    
    
    
    
    

    扩展:上述代码,还需要编写一个不写setupscript标签,去指定组件名字,比较麻烦,我们可以借助vite中的插件简化

    1. 第一步:npm i vite-plugin-vue-setup-extend -D
    2. 第二步:vite.config.ts
    import { defineConfig } from 'vite'
    import VueSetupExtend from 'vite-plugin-vue-setup-extend'
    
    export default defineConfig({
      plugins: [ VueSetupExtend() ]
    })
    
    1. 第三步:

你可能感兴趣的:(#,vue,vue)