初识vue3

vue3发布在即，作为一个正在成长路上的前端小白，vue3必不可少，于是——vue3的学习开始了,今天开始，我会将学习的内容整理成笔记，内容会随着学习的进行不断地更新与修改，这是一个记录，也是一个分享！

亮点

• Performance - 性能 (比vue2 runtime快了差不多2倍）
• Tree shaking(按需编译）
• TypeScript support(更优秀的TS支持)
• Componsition API(组合API)
• Custom Renderer API(自定义渲染器)
• 内置新特性组件

性能

• 重写了虚拟dom的实现
• 编译模板的优化（运行时编译）
• update性能提高
• SSR速度提升

Tree shaking

• 按需编译，传送门：www.webpackjs.com/guides/tree…;

TypeScript support

• vue3全部是用TS重新写的

Fragment

• 不再限于模板中的单个根节点

//vue2 模板中必须有一个根节点
<template>
    <div>
        hello world
    </div>
</template>

//vue3 不再限于模板中的单个根节点
<template>
    <div>hello</div>
    <div>world</div>
</template>

Componsition API

图片来自：composition-api.vuejs.org/#code-organ…;

vue2使用的是Options API

• 灵活的逻辑组合与复用
• 响应式对象
• ref
• reactive
• 生命周期
• onMounted
• onUnmounted

Custom Renderer API

• 是什么？
• 允许用户自定义渲染平台

总结

vue3的优点

• 更快
• 更好

正式发布前，怎么使用vue3呢？

//第一步：先将vue-cli升级到4.5.0及以上版本
npm install -g @vue/cli
# OR
yarn global add @vue/cli

对于Vue 3，您应该使用Vue CLI v4.5，该版本在上npm提供@vue/cli@next。

传送门：vue3文档

//查看vue-cli版本
vue -V

//第二步：通过vue-cli创建vue3项目
vue create project

//选择
Default (Vue 3 Preview)([Vue 3] babel, eslint)

//启动项目
cd project
yarn serve