Uniapp 开发鸿蒙应用教程之选项式 api 和组合式 api

大家好，前两天讲了 Uniapp 开发鸿蒙应用时的基础布局和自定义导航栏，都是仅限于页面上的开发。今天我们尝试进行一些数据上的操作，借此分享一下选项式 API 和组合式 API 的内容。

我们初始化的首页项目代码，它的脚本代码部分通常是这样的：

<script>	export default {		data() {			return {				title: 'Hello',
			}		},		onLoad() {		},		methods: {
		}	}</script>

可以看到它分为三部分，顾名思义，data 部分用来存放数据，onLoad 是页面加载时执行的事件，methods 中用来存放事件方法。

写一个简单的 demo：定义一个变量 age，初始值为 18，再写一个点击事件来修改 age 的值。

我们已经知道了脚本代码中三部分的作用，所以定义变量的代码应该写在 data 中，而修改方法则应该写在 methods 里面，像这样：

<script>	export default {		data() {			return {				title: 'Hello',				age:18
			}		},		onLoad() {		},		methods: {
			changeAge(){				this.age = 20			}
		}	}</script>

这种功能区分明确的编码方式在 Vue 中叫做选项式 api，它的优点显而易见，分区明确、便于理解。但是在大型项目中幽蓝君一般不会使用这种方式，我更喜欢灵活洒脱的写法，所以我会选用选用另一种组合式 api,和刚才一样的功能，组合式 api 的代码是这样的：

<script>	import {ref} from 'vue'	export default{		setup() {			const age = ref(18)
			const changeAge = ()=>{								age.value = 20			}
			return { age,changeAge }		}	}</script>

这样写好像并没有比刚才的写法好多少，代码并不简便，幽蓝君既然喜欢用它，就必有它的独到之处，没错，它还有一种简化版的写法，只要把 setup 写进 script 标签中，所有代码就会变得无比灵活：

<script setup>	import {ref} from 'vue'
	const age = ref(18)
	function changeAge(){		age.value = 20	}
</script>

这样的代码看起来是不是舒服多了，所以在今天以后的文章中看到这样的代码不要觉得奇怪，大家如果自己使用的时候也要注意细节，不要忘了标签中的 setup。#鸿蒙三方框架 ##Uniapp##购物 #