uniapp开发:uniapp快速体验vue3.2之setup语法糖,怎么 ...
admin
2023-09-28 12:24:55
0

uni-app+vue3.2+unicloud开发产品:




关注微信公众号:去水印掌中宝



微信扫一扫:皮皮虎去水印

概要

随着vue3.0的发布,不久后vue3.2紧接着发布了,现在uniapp也支持了vue3.2的编译。vue3.x的优点我在这里就不多说了,了解更多到uniapp官方vue3的教程。

从学习前端开始,学习的主要框架就是vue,一直以来也是vue的忠实粉丝。现在3.x的发布,让我感觉到它用在移动端上面是目前最好的选择,毕竟不需要考虑ie兼容。uniapp本身初衷就是为移动端而生,所以vue3.x用在uniapp上面,简直就是完美至极。

目前vue3.2在uniapp上几个版本已经全面支持了vue3.2了,小程序也不例外啦。正好最近用vue3.2开发了一款小程序“皮皮虎去水印”,开发的很爽!!!uniapp中的vue3.2的用法在vue-cli脚手架项目中是完全一样,放心学习。

vue3.2改进了 setup语法糖,怎么使用怎么爽! vue3.2的一些特性在vue3.0的基础上做出了改动,这篇文章直接总结vue3.2的特性,接下来就让我们快速体验vue3.2

下面讲解的内容不局限于vue3.2做出的改动,部分写法已在vue3.0中改动。

拉开序幕的setup语法糖

从vue3.2开始setup直接写在script标签上面,意味着所有的js代码直接在script中间完成。setup语法糖在vue的将来绝对是一种趋势,而且这种趋势已经到来。

是一种编译时语法糖,可在 SFC 内使用Composition API 时极大地提升工作效率。在script中声明的
js变量,template模板中可以直接读取使用,后面会有大量相关案例展示。

生命周期

虽然3.x写法上与2.x的script里面的代码相差很大,但是生命周期还是必不可少,毕竟在开发的过程中还是有需求不同阶段进行处理逻辑。

特性:在2.x的生命周期钩子前面加上“on”来访问组件的生命周期钩子。
了解更多vue3.x生命周期钩子

vue2.x与vue3.x生命周期的区别:

选项式 APIHook inside setupbeforeCreateNot needed*createdNot needed*beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmountederrorCapturedonErrorCapturedrenderTrackedonRenderTrackedrenderTriggeredonRenderTriggeredactivatedonActivateddeactivatedonDeactivated

相关内容