认识Vue3.0

101 阅读1分钟

后续再补充,先学React了...

1、Vue3新特性

(1)重写Vue响应式

Vue2使用defineProperty实现响应式,重写了一些数组方法(push、pop、unshift、shift、splice、sort、reverse),并且无法监听直接修改length操作。

Vue3使用Proxy。

(2)VDOM性能瓶颈

静态标记,对比的时候不会进行全量对比,会跳过静态标签。

template-explorer.vuejs.org/

(3)Fragments

支持多个根节点,也就是说template里面的内容不需要再使用一个div包裹。

底层是Vue3帮我们实现了这个包裹的父节点,并且是虚拟节点,不会渲染在页面上。

提供了tsx语法、Suspense、teleport、多v-model

(4)Tree Shaking支持

Vue2使用的是Options API,所有的功能都会被打包到项目中。

Vue3使用的是Composition API,只有使用的功能会被打包到项目中。

(5)composition API

setup语法糖

2、Vue3项目安装

(1)npm init vuenpm create vue

vue3官网提供的创建项目的命令,两个命令执行的结果相同,createinitalias(别名)

项目使用的构建工具是vite

(2)vue initvue create

vue init:vue-cli2.x用来创建项目的命令

vue create:vue-cli3.x用来创建项目的命令

项目使用的构建工具是webpack

(3)npm init具体做了什么

npm init vue 等同于 npx create-vue(临时安装create-vue这个npm包,并执行create-vue这个命令)

// 等价于
npm install -g create-vue 

create-vue 

npm uninstall -g create-vue