Vue3.0初体验——新特性及相关库使用

前言vue3.0发布已经几个月了，基本上大家都处于试用阶段。但是搬砖厂有个新项目，领导提出了使用vue3.0+ts的想法，为新项目踩坑。那么vue3.0怎么玩呢，最近稍微弄了一点，赶快分享一波铁榨汁机的基本用法。看完文章你将了解到：vue3的使用安装vue3的新特性vuex，vue-router的升级和使用也是一样的，直接开始吧！体验Vue3的方式是官方指定的cli工具vue-cli，更新最新版本。这个比较稳定。建议开始使用这个//新版本的vue-cli会多出一个创建vue3的工程。选择vue3后，其他的配置就看你的喜好了。npminstall-g@vue/clivuecreatevue3-projectcdvue3-projectvueaddvue-nextnpmrunservewebpack这个是vue-cli还没有开始支持的时候，vue官网做了一套webpack项目配置，直接clonegitclonehttps://github.com/vuejs/vue-next-webpack-preview.git01-vue3-webpackcd01-vue3-webpacknpminstallnpmrundevvite这个比较有意思。这是友达最近开发的一款工具，意在替代webpack打包。核心是使用浏览器现在支持导入。遇到import时，会使用http请求加载文件。vite中使用koa拦截这些请求，分类预编译，加载各个模块，build时使用rollup打包，节省了大部分时间。,秒级实现复杂项目npminstall-gcreate-vite-appcreate-vite-appvue3-vitecdvue3-vitenpminstallnpmrundevps：铁榨汁机在使用vite时要注意自己的node版本，这是必须的当使用vite更高版本的node时。Vue3的新特性CompositionAPI体验包括setup、ref、computed等。由于reactive、compiler-sfc、complier-dom等核心模块的分离，在项目中可以更自由的引用和使用，让函数式编程发挥更大的作用。setupVue3.0的重要新功能，熟悉React的同学一定会经常用到Hooks。其实我个人觉得这个其实和Hooks很像。当然友达有没有借鉴React我不知道（/手动狗头），但是函数式编程肯定很酷。设置是一个独立的功能。Vue的所有模块都可以在内部使用，包括lifecycle、responsive、computed、watch等，最后返回一个对象，可以在模板中直接调用。reactive和ref是vue的三大组件之一。响应式模块这次有了很大的创新。它使用代理而不是以前的defineprototype。性能上提升不少，支持Array监听，单独绘制。出去。使用方式是传入一个对象，返回一个proxy代理监听的对象。代理数据都是响应式的。computed和watch这次将computed和watch拆分成了独立的模块，使用的时候可以按需引入，使用方式也有所改变。说了这么多，我们可以这样写Let'stakelook:Fragment我个人觉得很酷，支持多根节点，并且不需要刻意在UselessDOM外面设置一层，虽然有些纠错工具还是会标红....