关于前端:vuejs进入了vue3-RC阶段正确姿势霸气迎接

7次阅读

共计 2913 个字符,预计需要花费 8 分钟才能阅读完成。

???? ???? ???? ???? ???? ???? ???? ????

进入了 rc 版本阶段:

3.0.0-rc.2 (2020-07-20)
3.0.0-rc.1 (2020-07-17)

— Alpha(α):预览版,或者叫外部测试版;个别不向内部公布,会有很多 Bug;个别只有测试人员应用。
— Beta(β):测试版,或者叫公开测试版;这个阶段的版本会始终退出新的性能;在 Alpha 版之后推出。
— RC(Release Candidate):最终测试版本;可能成为最终产品的候选版本,如果未呈现问题则可公布成为正式版本。

少数开源软件会推出两个 RC 版本,最初的 RC2 则成为正式版本。

Here we go ~~

五步走天下去思考,步步渐进:

  • 咱们怎么动手?
  • 有哪些新填 API?和 vue2 不一样的中央?
  • 快在哪里,咱们如何得悉?
  • 大部分基于 vue2 的第三方组件库面临着降级?
  • 源码和周边知识点哪些值得学习的?

v3.vuejs.org

vue3 一些外围, 浪里个浪

更小更快
反对自定义渲染器
动态 ID 绑定标记
响应式批改为基于 Proxy 的侦测
深度联合 typescript
基于 treeshaking 优化
Cache Handlers(事件侦听器的缓存)

setup()
ref()
watchEffect()
effect() 和 reactive()

与 2.x 版本生命周期绝对应的组合式 API

beforeCreate → 应用 setup()
created → 应用 setup()
beforeMount → onBeforeMount
mounted → onMounted
beforeUpdate → onBeforeUpdate
updated → onUpdated
beforeDestroy → onBeforeUnmount
destroyed → onUnmounted
errorCaptured → onErrorCaptured

如何应用 vue-next-template-explorer 玩一玩?
https://vue-next-template-exp…

import {createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock} from "vue"
export function render(_ctx, _cache) {return (_openBlock(), _createBlock("div", null, [_createVNode("span", null, "static"),
    _createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)//1 patchflag flag 是编译时生成的一个配置,只有带 patchflag 的 Node(节点)会被追踪,比拟 text 的文字变动
      
  ]))
}
<div>
  <span>static</span>
  <span>
    {{msg}}
  </span> 
</div>

vite 简介
vite 是一个基于 Vue3 单文件组件的非打包开发服务器,它做到了本地疾速开发启动:

1、疾速的冷启动,不须要期待打包操作;
2、即时的热模块更新,替换性能和模块数量的解耦让更新飞起;
3、真正的按需编译,不再期待整个利用编译实现,这是一个微小的扭转。

特色就是应用了 ES Module, 代码以模块的模式引入到文件,同时实现了按需加载。
其最大的特点是在浏览器端应用 export import 的形式导入和导出模块,在 script 标签里设置 type=”module”,而后应用 ES module。

看看 github 这个我的项目:
《前端会客厅第一期代码》和尤大聊 vue3 的 晋升:https://github.com/shengxinji…

三种体验 vue3 的形式

vue-cli

  • Vue create vue3-demo-cli
  • Vue add vue-next
  • 代码文件 vue3-demo-cli

webpack

  • 代码文件 vue-demo-webpack
  • 代码仓库

新工具 vite

  • create-vite-app
  • 代码文件 vue3-demo-vite

而且应用了 wrk 来测压:

// vue2 12 个过程,300 个并发,压 19 秒
➜  ~ wrk -t12 -c300 -d19s http://localhost:3000/
Requests/sec:    130.58
Transfer/sec:     17.19MB
// vue3 12 个过程,300 个并发,压 19 秒
➜  ~ wrk -t12 -c300 -d19s http://localhost:3000/
Requests/sec:    288.21
Transfer/sec:     40.69MB

动手 vue3, 浪里个浪

两步得天下:

git clone https://github.com/vuejs/vue-next-webpack-preview.git
cd vue-next-webpack-preview
npm install

https://github.com/vuejs/vue-…

1、查看 vue-cli 脚手架版本(vue -V),低版本的要更新(npm install @vue/cli -g)
2、创立我的项目(vue create vue3test)
3、进入我的项目文件夹,更新 vue 版本(vue add vue-next)
4、运行我的项目(npm run serve)

Tips: 不是一帆风顺的,过程中预计的修修改改,我的项目能力跑起来,O(∩_∩)O 哈哈~_

动手 vue3 demo, 浪里个浪

https://vue3.github.io/vue3-N…

几个 vue3 demo,给你强势入门 vue3 时代。

  • win10 datepanel
  • todolist
  • art 马里奥
  • 2019-ncov-vue3-version

等等 …

其实官网也一些根底案例:

https://github.com/vuejs/vue-…

vue3 源码汇合, 浪里个浪

【这是入口】你要找的 vue 源码 全宇宙的都在这!
https://github.com/vue3/vue3-…

vue3 装置下来的是打包压缩:

外围代码在这里:

https://github.com/vuejs/vue-…

【这是入口】你要找的 vue 源码 全宇宙的都在这!
https://github.com/vue3/vue3-…

查看更多, 必须浪里个浪

Vue3+ & Vue-CLI3+ 开发生态圈资讯

该举荐文章列表的最新资讯会第一工夫公布到 Github 上,欢送 Star:
Find the latest breaking √vue3 & vue-cli 3 News

???? 欢送Star,后续会不断更新。
???????? 最初更新日期:2️⃣0️⃣2️⃣0️⃣/0️⃣7️⃣/1️⃣7️⃣

【2020】≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡————————【2021】

除了独自 Vue3 资讯,欢送查看更多 vue.js 资讯:【【????Vue.js 资讯????】目前 web 前端开发十分火爆的框架;定时更新,欢送 Star 一下。】

正文完
 0