Vue3快速上手

2023-11-16 13:53:34

一、认识 Vue3

一.1 了解相关信息

Vue.js 3.0 “One Piece” 正式版在20209月份发布
2年多开发, 100+位贡献者, 2600+次提交, 600+次PR
Vue3支持vue2的大多数特性
Vue3更好的支持Typescript

一.2 性能提升

打包大小减少41%
初次渲染快55%, 更新渲染快133%
内存减少54%
使用 Proxy 代替 defineProperty 实现数据响应式
重写虚拟 DOM 的实现和 Tree-Shaking

一.3 新增特性

Composition (组合) API
setup

ref 和 reactive
computed 和 watch
新的生命周期函数
provide与inject
…

新组件

Fragment - 文档碎片
Teleport - 瞬移组件的位置
Suspense - 异步加载组件的loading界面

其它 API 更新

全局API的修改
将原来的全局API转移到应用对象
模板语法变化

一.4 学习 Vue3 之前我们需要做什么?

1. 学会 Vue2, Vue3 并不是推到重来,很多 Vue2 的内容还在被保留着
2. 学会 TypeScript, Vue3 采用 TS 重写, 不学习 ts,到后面无法理解.

二、Vue3 六大亮点

Performance : 性能比 Vue2 快 1.2 ~ 2.0 倍
Tree shakng support : 按需编译, 体积比 Vue2 更小
Composition API : 组合 API (类似 React Hooks)
Better TypeScript support : 更好的 TS 支持
Custom Renderer API : 暴露了自定义渲染 API
Fragment, Teleport(Protal), Suspense : 更先进的组件

三、Vue3 是如何变快的?

diff 算法优化 :

Vue2 中的虚拟 dom 是进行全量的对比
Vue3 新增了静态标记(PatchFlag)
在与上次虚拟节点进行对比时候,只对比带有 patch flag 的节点
并且可以通过 flag 的信息得知当前节点要对比的具体内容

hoistStatic 静态提升

Vue2 中无论元素是否参与更新,每次都会重新创建
Vue3 中对于不参与更新的元素,只会被创建一次,之后会在每次渲染的时候被不停的复用

cacheHandlers 事件侦听器缓存

默认情况下 onClick 会被视为动态绑定,所以每次都会去追踪它的变化
但是因为是同一个函数,所以没有追踪变化,直接缓存起来复用即可

ssr 渲染

当有大量静态的内容时候,这些内容会被当做纯字符串推进一个 buffer 里面,即使存在动态的绑定,会通过模板插值嵌入进去. 这样会比通过虚拟 dom 来渲染的快上很多很多.
当静态内容大到一定量级的时候,会用 _createStaticVNode 方法在客户端去生成一个 static node, 这些静态 node, 会被直接 innerHtml ,就不需要创建对象,然后根据对象渲染

四、创建项目的两种方式

1. 使用 vue-cli 创建

vue官方文档地址 : https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

1.1 打开 win+ r 的 cmd窗口,执行命令行

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

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

## 创建项目, "my-project" 是项目名字,可以自定义
vue create my-project

1.2 我们执行了创建项目命令时,会提示你要选择什么

Please pick a preset - 选择 Manually select features
Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
Use class-style component syntax - 直接回车
Use Babel alongside TypeScript - 直接回车
Pick a linter / formatter config - 直接回车
Use history mode for router? - 直接回车
Pick a linter / formatter config - 直接回车
Pick additional lint features - 直接回车
Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
Save this as a preset for future projects? - 直接回车

1.3 我们查看创建项目的文件夹

创建项目的文件夹

点击git文件夹里面的子文件

2. 使用 vite 创建

vue官方文档地址 : https://v3.cn.vuejs.org/guide/installation.html

vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，它做到了 本地快速开发启动 , 在生产环境下基于 Rollup 打包。

快速的冷启动，不需要等待打包操作；
即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

2.1 打开 win+ r 的 cmd窗口,执行命令行

## 安装 vite
npm install g create vite app

## 创建项目,"my-project" 是项目名字,可以自定义
create-vite-app my-project

## 进入创建的项目路径中
cd my-project

## 安装一些需要的依赖
npm install

## 用 vscode 打开,然后终端中输入命令 打开服务器
npm run dev

2.2 查看创建项目的文件夹和打开的项目样子

创建项目的文件夹

浏览器中项目打开的样子

五、Vue3 目录解构

六、setup 函数

官方文档 : https://composition-api.vuejs.org/zh/api.html

setup 函数是 Composition API 新特性的入口, 该函数是为组件提供的新属性

新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

七、ref 函数

作用: 定义一个数据的响应式

语法: const xxx = ref(initValue):

创建一个包含响应式数据的引用(reference)对象
js中操作数据: xxx.value
模板中操作数据: 不需要.value

一般用来定义一个基本类型的响应式数据

八、案例证明 Vue2 和 Vue3 的不同点

我们下面分别用 Vue 和 Vue3 的写法做一个小案例,点击按钮,屏幕上的数字进行加一,我们查看有什么不同点

用 Vue2 的写法 :

<template>
    <div>
        <div>{{ num }}</div>
        <button @click="add">点我加一</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                num: 0
            }
        },
        methods: {
            add() {
                this.num ++
            }
        }
    }
</script>

我们不难看出，数据和方法是分开的，分别分布在 data 属性和 methods 属性，证明了实现一个功能时，代码时分开的，如果这个组件里有很多很多功能，就会比较难找了。

用 Vue3 的写法 :

<template>

  <div>
      <div>{{ num }}</div>
      <button @click="add">点我加一</button>
  </div>

</template>

<script>
// 导入 ref 函数
import {ref} from 'vue'

function fun1() {
	// 声明响应式数据 num，值为0
    const num = ref(0)
    // 创建方法 add
    const add = () => {
        num.value ++
    }
    // ruturn 数据,函数方法
    return {
        num,
        add
    }
}

export default {
  setup() {
  	  //调用 fun1 函数，并获取 num 和 add
      let {num, add} = fun1()
      
      //return 出需要被访问的值和方法
      return {
          num,
          add
      }
  }
}
</script>

Vue3中没有再使用 data 属性，而是通过使用vue中的 ref()函数来命名响应式数据的，ref()函数返回的是一个对象，我们命名的数据是存储在这个对象的 value属性里的
同样的也没有再使用 methods属性，而是直接通过 function 命名一个函数即可
同时，为了让代码整合在一起，我们在最外部命名了一个函数，里面存放了所有的数据和方法。

九、总结

今天的 Vue3 就先学到这里了,只是先了解一下基础的概念语法和不同点. 但是今天在学习的时候, vue 官方应该在维护吧,不能正常下载 vue3项目. 我们下期再来试一试.

码农公寓