Vue3.0语法快速入门

作为前端开发者，大家这几天肯定都看到了Vue3.0的beta版本。是的，4月17日游达在微博上发布了Vue3.0的内测链接。不少FEer兴奋不已，但也有不少其他的声音：“学不会了”、“这不就是React”、“什么时候出正式版”；Vue3.0-beta链接：https://github.com/vuejs/vue-next#status-beta那么首先我们简单的看一下Vue发布版本的过程：Alpha-Beta-RC-Official所以，从截图来看，在正式版可以使用前会先过RC阶段别太着急，目前友达正在努力开发配套的基础功能，比如脚手架、vue-router、生态插件;Vue3.0的设计目标是更小的全局API，内置组件/函数支持tree-shaking常驻代码大小控制在10kb左右。Gzipped更快Proxy-basedchangedetection，整体性能优于getter/setterVirtualDOMRefactoringCompiler架构重构，更多编译时优化增强API设计一致性增强TypeScript支持，提高自维护性永久代码采用monorepo结构，并且内层更清晰。TypeScript让外部贡献者更有信心进行更改并开放更多底层功能。对于我们开发者来说，最关心的就是它的语法。其实这个变化是非常大的。虽然目前是beta版本，但我们还是可以试用一下，在本地创建一个Vue项目，做一个demo；1.创建项目//先将vue-cli升级到4.x版本cnpminstall-g@vue/cli//通过脚手架创建项目，一路进入vuecreatevue3.0注意：这一步还是用2.x版本2，升级2.6到3.0beta版本//安装vue/cli后，可以使用vueadd添加插件//目前3.0对应vue-next项目vueaddvue-next安装vue-next后，我们发现本地项目已升级到3.0。打开main.js如图：左边的目录结构没有太大变化，只是main的语法大同小异；我们前面提到Vue3.0更小，因为它支持Tree-Shaking并且可以提取每个使用的API。从上图中，我们发现只能解构一个createApp函数，比2.0简单了很多。3.LifeCycle(Hooks)简介在Vue3.0中，生命周期的方法发生了很大的变化。接下来我们来对比一下：4.CompositionAPI介绍其实最早定义的是Vue-Function-API，经过社区意见收集，更名为Vue-Composition-API。接下来介绍CompositionAPI的几大变化：reactiveAPIrefAPIwatchAPI变化computedAPI变化lifecyclehook变化（参考上面）TypeScript和JSX支持（暂时忽略）reactive功能：创建响应式对象，非封装对象，类似在2.0数据中声明变量。它是一种Hooks能力。用过ReactHook的其实相当于useState()；大家大概很好奇，为什么叫反应式呢？让人莫名觉得你又在抄袭React！接下来是硬菜：//打开App.vue，删除多余代码页面效果图：Ref功能：创建一个wrapper对象，其中包含一个responsive属性值。它和reactive的区别在于前者没有wrapper属性值。接下来是硬菜：效果图如下：既然事件处理没有使用方法，那么事件处理应该如何调用方法呢？硬菜：效果图：onMounted/computedFunction：周期函数和计算函数硬菜：<样式>#app{text-align:center;color:#2c3e50;margin-top:60px;}效果图：经过上面几个API的讲解，相信大家是越来越兴奋了，语法新颖，简洁明了，但是大家需要一个过渡期，刚开始肯定会比较陌生；其实用法远不止这些，包括父子传递、支持jsx语法等等，这里就不一一介绍了。可以通过第三方资料了解更多Vue3.0的语法；官网为大家提供了几个API文档：https://composition-api.vuejs.org/#summaryhttps://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/友达4.21直播播放地址：https://live.bilibili.com/record/R14x411c7rW以上源码已上传至Github：https://github.com/JackySoft/vue3.0-demo温馨提示：目前为Vue3.0与大多数2.x兼容语法，其实主要的变化已经在上面Vue3.0的设计目标中列出了。我们主要的学习成本可能在CompositionAPI上。添加了许多新的组合API。不依赖this指针本身，方便我们对逻辑进行抽取和封装。不知道大家能不能看懂这张图！我上面提到的API文档将详细介绍。