Vue3 — 初识

初识Vue3

一、了解相关信息

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

二、使用Vue3

1. 通过 CDN：

2. 通过 Codepen的浏览器 playground

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

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

   npm init vite-app hello-vue3
   

4. 脚手架 vue-cli：

   npm install -g @vue/cli # OR yarn global add @vue/cli
   vue create hello-vue3
   # select vue 3 preset
   

三、性能提升：

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

四、值得注意的新特性

1. 组合式API
2. Teleport
3. 片段
4. 触发组件选项
5. createRenderer API 来自 @vue/runtime-core 创建自定义渲染器
6. 单文件组件组合式 API 语法糖 (

五、2.x 开始的重大更改

1. Global API

• 全局 Vue API 已更改为使用应用程序实例
• 全局和内部 API 已经被重构为可 tree-shakable

2. 模板指令

• 组件上 v-model 用法已更改
• 和非 v-for 节点上 key 用法已更改
• 在同一元素上使用的 v-if 和 v-for 优先级已更改
• v-bind=“object” 现在排序敏感
• v-on:event.native 修饰符已移除
• v-for 中的 ref 不再注册 ref 数组

3. 组件

• 只能使用普通函数创建功能组件
• functional 属性在单文件组件 (SFC) 和 functional 组件选项被抛弃
• 异步组件现在需要 defineAsyncComponent 方法来创建
• Component events should now be declared with the emits option

4. 渲染函数

• 渲染函数 API 改变
• $scopedSlots property 已删除，所有插槽都通过 $slots 作为函数暴露
• $listeners has been removed / merged into > - $attrs
  $attrs now includes class and style attributes
• 自定义指令 API 已更改为与组件生命周期一致
• 一些转换 class 被重命名了：
  • v-enter -> v-enter-from
  • v-leave -> v-leave-from
• 组件 watch 选项和实例方法 $watch 不再支持点分隔字符串路径，请改用计算函数作为参数
• 在 Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。VUE3.x 现在使用应用程序容器的 innerHTML

5. 其他小改变

• destroyed 生命周期选项被重命名为 unmounted
• beforeDestroy 生命周期选项被重命名为 beforeUnmount
• prop default 工厂函数不再有权访问 this 是上下文
• 自定义指令 API 已更改为与组件生命周期一致
• data 应始终声明为函数
• 来自 mixin 的 data 选项现在可简单地合并
• attribute 强制策略已更改
• 一些过渡 class 被重命名
• now renders no wrapper element by default
• 组建 watch 选项和实例方法 $watch 不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。
• 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 现在被视为普通元素，并将生成原生的 元素，而不是渲染其内部内容。
• 在 Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。Vue 3.x 现在使用应用容器的 innerHTML，这意味着容器本身不再被视为模板的一部分

6. 移除API

• keyCode 支持作为 v-on 的修饰符
• $on，$off 和 $once 实例方法
• 过滤
• 内联模板 attribute
• $children instance property
• $destroy 实例方法。用户不应再手动管理单个 Vue 组件的生命周期

六、支持的库

1. Vue CLI：从 v4.5.0 开始，vue-cli 现在提供了内置选项，可在创建新项目时选择 Vue 3。现在可以升级 vue-cli 并运行 vue create 来创建 Vue 3 项目
2. Vuex：Vuex 4.0 提供了 Vue 3 支持，其 API 与 3.x 基本相同。唯一的突破性变化是插件的安装方式

该文章学习自：https://www.javascriptc.com/vue3js/guide/migration/introduction.html