在Vue 2中，组件相干的逻辑都被写在一个文件中，常常会呈现一个组件几千行代码，十分难以保护；而且一个性能的相干代码通常会扩散写在data methods created等各个选项中，想要复用一个性能也是比拟艰难的。而Vue 3的组合式API正是为了解决这个问题。

之前学习vue3.0时做了几个小案例，近段时间又找了几个案例想着把之前做的那些和当初做的放在一起于是劳动的时候就搭建了一个vue3的我的项目。这个我的项目所用的数据都是页面上写死的，音乐播放器数据是调用的网易云api拿到的。

只用四个函数, 不须要相熟 JavaScript 各种奇怪的常识, 不须要简单的配置, 就能够立即写出比较复杂的前端页面. 一开始我也不置信, 但 Vue3 真的做到了. 而且很神奇的一点是, 在 Vue3 的架构里我发现了很多相似 elixir/erlang 的中央.

一、Vue3简介2020年9月，Vue.js3.0’One Piece’正式版公布，vue3反对vue2大多数个性，并更好的反对Typescript.性能方面，相比Vue2,vue3的性能晋升了许多

Vue3 练手我的项目，为了加深对 composition-api 的了解，我的项目参考于 sl1673495/vue-bookshelf，不过这个我的项目还是基于 vue2+composition-api，外面对于组合函数的应用和了解还是很有帮忙的，这里用 Vue3 做了批改。

vue3 响应式原理的实现，源码地址：vue3_reactivityrollup 搭建ts环境装置 rollup 插件 {代码…} 包名性能rollup打包工具rollup-plugin-typescript2解析ts插件@rollup/plugin-node-resolve解析第三方模块@rollup/plugin-replace替换插件rollup-plugin-serve启动本地服务插件配置打包环境生成 tsconfig.json 文件： {代…

进入vue3.0官网文档第一种办法：CLI注：我不喜爱大量的全局装置各种依赖，这样容易导致环境抵触，所以没有应用官网文档的装置形式，而是应用的npx，这个命令真好用 {代码…} 第二种办法：Vite {代码…}

明天在vue3+vite我的项目练习中，在应用svg时，发现之前的写法不能用，之前的应用办法参考：vue2中优雅的应用svg {代码…} 而后就各种材料查找，终于实现了，废话不多说，间接上代码：stept1: 文件目录stept2: 装置 svg-sprite-loader {代码…} stept3: 创立svgIcon.vue文件 {代码…} stept4: 创立icons文件夹，寄存svg文…

因为最近Vite降级了2.x版本，我的项目中须要改变的货色有点多，原本想基于官网给出的starter重做，然而又看到了一个叫pnpm的仓库，构建速度会比原生npm/yarn快两倍以上：

之前曾经理解过了vue2.0版本，当初咱们来理解一下3.0版本.首先咱们来看下变动：源码组织形式的变动.Composition API性能晋升Vite首先源码的组织形式首先类型束缚2.0是flow而后3.0源码采纳TypeScript重写而后就是应用Monorepo治理我的项目构造3.02.0而后就是Composition API设计动机：回顾OptionsAPI蕴含一个形容组件选项(dat…