uniapp开发：uniapp快速体验vue3.2之setup语法糖，怎么使用怎么爽

目录

• 概要
• 拉开序幕的setup语法糖
• 生命周期钩子
• ref函数与reactive函数对比
• computed计算属性
• 监视（watch、watchEffect）
• 组件注册
• 组件传值
• provide/inject
• style样式使用v-bind绑定动态值
• 获取路由信息
• 全局API的转移
• Composition API 的优势
• 关注我，不迷路
• vue3.x相关会在将来持续更新…更新历史：20211122、20220222

概要

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

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

目前vue3.2在uniapp中暂时只支持h5，小程序端目前只支持到vue3.0，这只是时间的问题，uniapp的小程序肯定会支持vue3.2的，那么我们可以先拿h5来预热吧！uniapp中的vue3.2的用法在_vue-cli脚手架_项目中是完全一样，放心学习。

（2020年2月22日补充：） 果然不出所料，上面之前写的就不删除了，留个纪念吧。在uniapp上几个版本已经全面支持了vue3.2了，小程序也不例外啦。正好最近用vue3.2开发了一款小程序“皮皮虎去水印”，开发的很爽！！！

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

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

拉开序幕的setup语法糖

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

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

生命周期

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

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

<script setup>
	import { onBeforeMount, onMounted } from 'vue';
	onBeforeMount(() => {
		console.log('onBeforeMount生命周期')
	})
	onMounted(() => {
		console.log('onMounted生命周期')
	})
</script>

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

选项式 API

Hook inside setup

beforeCreate

Not needed*

created<