源码 Vue3中文文档Vue

Vue3 基础介绍

vue3.0正式版发布至今已有一年多时间，社区生态日趋完善。那么源码，是时候开始使用vue3.0了。

目前支持vue3的UI组件库。

蚂蚁设计

Ant–vue是Ant设计的vue实现，组件风格与Ant设计保持同步。

支持 Vue 3.0 的 2.0.0 beta 版本已经发布。

元素加

#/zh-CN

，一个面向开发人员、设计师和产品经理的基于 Vue 3.0 的桌面组件库。

万

#/zh-CN

轻量可靠的移动端 Vue 组件库

Vant 是一个面向前端团队的开源移动组件库。2016年开源，维护了4年。

目前，Vant已经完成了对Vue 3.0的适配，发布了Vant 3.0版本。

Vue3带来的新变化

性能改进

第一个渲染速度更快。

Diff 算法更快。

更少的内存消耗

封装体积变小。

更好的打字稿支持

组合 API（重点）

使用2.x版本开发复杂组件时，逻辑难以复用，复合API的出现可以解决此类问题。

Vue3中文文档

Vue3 设计概念打破语法更新

Vue 3.0 兼容了 2.0 版本的大部分语法，但是有一些破坏性的语法更新需要特别注意。

$on方法已被移除（现有实现方式不再支持使用第三方插件）

去除过滤器（插值表达式中不能使用过滤器，但可以使用方法代替）

删除了 .sync 语法（与 v-model 语法合并）

Vue3开发环境搭建

项目构建成功后，可以查看.json文件，该文件显示在配置项中。目前使用的版本是3.0.0。

“依赖”：{

“核心 js”：“^3.6.5”，

“vue”：“^3.0.0”

项目环境可以看我写的另一篇文章《》

然后打开main.js导入文件源码，发现Vue的实例化发生了一些变化，从之前的new关键字实例化变成了方法调用形式。

// vue2.x

新的 Vue({

El: ‘#app’,

: h => h(应用程序)

// vue3.x

从“vue”导入{}

从’导入应用程序。/App.vue’

（应用）。安装（#app）

打开一个单文件组件，发现在vue3.0的单文件组件中，唯一的根元素不再是必须的了。

组合API

Api（api是一个对开发者来说非常有价值的vue3 Api更新。首先，我们不关注具体的语法，所以对它有很大的感悟。

组合和选项

API开发的Vue应用如左图所示。它的特点是简单易懂，因为每个选项都有固定的书写位置。比如在data 中写响应数据，在配置项中写操作方法。应用做大之后，相信大家都会遇到上下搜索代码的窘境。

使用API​​开发的vue应用如右图所示。它的特点是把与某个特定功能相关的所有东西都放在一起维护，比如功能A相关的响应数据，操作数据的方法等，这样无论应用有多大，都可以快速读取所有定位某个功能的相关代码，便于维护。如果设置复杂，代码量大，也可以进行逻辑拆分。