邗江区怡越电子商务工作室
- 营业执照：
- 备案号码：苏ICP备2024104581号-1
- 地址：中国江苏扬州市邗江区
联系我们
- 电话：17712286280
- 邮箱：17712286280@189.cn
- Q Q：17712286280
扫一扫 手机访问
Copyright © 邗江区怡越电子商务工作室
了解最新公司动态及行业资讯
大家好，前两天讲了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##购物#
扫一扫 手机访问
售前咨询专员
