VUE 3.0快速入门
? ? ?在前端开发中VUE是必不可缺的，下面就让我们来了解一下关于VUE方面的知识吧。
? ? ?Vue3.0设计目标更小全局 API 和内置组件 / 功能支持 tree-shaking常驻的代码尺寸控制在 10kb gzipped 上下更快基于 Proxy 的变动侦测，性能整体优于 getter / setterVirtual DOM 重构编译器架构重构，更多的编译时优化加强API设计一致性加强TypeScript支持提高自身可维护性代码采用 monorepo 结构，内部分层更清晰TypeScript 使得外部贡献者更有信心做改动开放更多底层功能。
? ? ?对于我们开发者来讲，最关心的还是它的用法，实际上这块变化非常大。虽然目前是beta版本，但我们依然可以尝鲜，在本地创建Vue项目，并做一做Demo；
一、创建项目
二、升级2.6到3.0beta版本
? ? ?左侧目录结构没有太大变化，main的语法却大不一样了；
? ? ?前面我们提到Vue3.0更小，因为它支持Tree-Shaking，可以把每一个用到的API都抽取出来，通过上图我们发现，可以只解构出一个createApp函数，相比2.0简化了很多。
三、LifeCycle介绍(Hooks)
? ? ? Vue3.0中，生命周期方法已经发生了很大变化。
四、Composition API介绍
? ? ?实际上，起初定义的是Vue-Function-API，后经过社区意见收集，更名为Vue-Composition-API.
? ? ? 接下来，我们介绍几个变化大的Composition API：
? ? ? reactive APIref APIwatch API变化computed API变化生命周期钩子变化（参考上面）TypeScript和JSX支持（暂时忽略）reactive。
作用：
? ? ?创建响应式对象，非包装对象，可以认为是模板中的状态。
? ? ?它本身一种Hooks能力，用过React Hook的，实际上就等同于useState();大家估计很好奇，为什么叫reactive? 让人莫名有一种你再抄袭React的感觉！
REF
作用：
创建一个包装式对象，含有一个响应式属性value。
它和reactive的差别，就是前者没有包装属性value
作用：
? ? ?新周期函数和新计算函数
? ? ?经过以上几个API讲解，相信大家开始越来越激动了，语法新颖，简洁凝炼，但大家需要有一个过渡期，刚开始肯定会很陌生；
? ? 实际上用法远不止这些，包括父子传递、支持jsx语法等，我们这儿不做一一介绍了，大家可以自己通过第三方资料整理，了解更多Vue3.0的语法；
温馨提示：
? ? ?目前Vue3.0是会兼容大部分2.x的语法，实际上主要的变化，在上面的Vue3.0设计目标里面已经列出，我们主要的学习成本可能就在Composition API这块，新增了很多组合API，它本身不依赖this指针，方便我们对逻辑做抽取封装。
? ? ?以上就是本文内容，谢谢大家阅读。
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20210201A06YWP00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
