经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue组合式API浅显入门示例详解
来源:jb51  时间:2023/3/27 14:48:44  对本文有异议

正文

在react推出了hook之后,vue也在vue3里面添加了组合式API,鉴于这个时间间隔,我有理由认为组合式api和hook还是有一些关系的。不过在我具体的使用中,我并没发现这两个方法太多的相同点,不过鉴于vue自动发布之后就与react之间那剪不断理还乱的量子力学关系,估计会有很多人会问及这俩之间的异同。我还没到能分辨出异同的地步,就简单的介绍一下vue的组合式API吧。

组合式API

在vue3.0发布的时候,组合式API也随着发布会进入到大众的视野。官网把原来的使用方式命名为选项式API,同时官网也明确表示选项式API是由组合式API所实现的,所以大概后面vue的主推方向应该就是组合式API了。

我学习框架的方法是从语法到词法,再到运行状态。那么先从语法开始学习,照旧还是以官网为例。

  1. //代码一
  2. <script setup>
  3. import { ref, onMounted } from 'vue'
  4. // 响应式状态
  5. const count = ref(0)
  6. // 用来修改状态、触发更新的函数
  7. function increment() {
  8. count.value++
  9. }
  10. // 生命周期钩子
  11. onMounted(() => {
  12. console.log(`The initial count is ${count.value}.`)
  13. })
  14. </script>
  15. <template>
  16. <button @click="increment">Count is: {{ count }}</button>
  17. </template>

可以看出,组合式API和原来的选项式API还是有差别的,原来的选项式API可以直接使用生命周期,变量声明之类的内置方法,组合式API则需要先引入再使用。

先声明一下,这个不是vue3.0版本的组合式API写法,是vue3.2版本发布时的语法糖,但是也是我个人建议使用的方法,毕竟不推荐的话也不会出这个语法糖。3.0版本的写法有些繁琐,但是大致上大差不差。

  1. //代码二
  2. import { reactive } from 'vue'
  3. export default {
  4. // `setup` 是一个专门用于组合式 API 的特殊钩子函数
  5. setup() {
  6. const state = reactive({ count: 0 })
  7. // 暴露 state 到模板
  8. return { state }
  9. }
  10. }

这个是最初的组合式API的写法,比起新版的语法糖只是多了一个setup和需要将变量return出来,而这个setup就是我认为的组合式API的核心。

setup

最初的响应式API以 setup 函数作为入口函数, setup函数必须返回两种类型的值:第一是对象,第二是函数。

当 setup 函数返回对象时,对象中的数据或方法可以在 template中被使用,也就相当于data函数里面的变量。当 setup函数返回函数时,函数会被作为 render 函数。

不过可预见的是当页面数据量变大的时候,setup函数会变得巨大,而且return的内容也会膨胀,所以vue3.2的语法糖省略了setup函数的包裹,而是直接将setup放到script里面,里面的代码就等同于放到了setup函数中,而且还省略了return的步骤。虽然没有写出setup函数,但是这段代码的本质就是setup函数的执行。

变量声明

setup函数执行之后,里面的变量会被直接暴露给组件,由组件使用。就以最上面的代码一中的count为例,count被声明之后就可以放到template里面,还可以被increment函数修改后在页面中更新,这个就是靠ref方法,但是说ref之前先要说一下组合式API生命对象的方法reactive。

代码二中的state就是reactive方法声明的对象,reactive和ref一样,都是用来声明变量的,只有通过这两个方法声明后的变量才能做到响应式更新。这里其实是vue为了让用户简单而导致的复杂,具体说比较复杂,我就简单说说吧。

vue3依然是响应式的架构,通过对声明的变量监听从而收集到变量的修改事件,已达到响应式更新的功能。对vue3有一些了解的用户都知道,vue3用的是proxy,但是proxy只能做到对对象代理,如果使用了原始类型,像是string,number之类的就没有办法了,所以vue3为了监听原始类型的数据,使用ref去声明原始类型,从而将原始类型变成对象,看起来通过ref声明后的依然是原始类型,实际上我们修改的是这个变量的value的值,而不是这个对象的值。

组合式API还有一点就是无法直接修改声明的变量值。以代码一为例,无论是count = 3还是count=ref(3)都会导致显示无法更新。同样的,代码二中的state的修改也不可以直接通过state=reactive({a:23})或者state = {a:23}的方式修改。

虽说ref也可以用来生命对象,不过还是不太建议,毕竟还是按照文档的方式去写才能做到最方便的维护,毕竟比维护别人的烂代码更难受的就是维护自己的烂代码。

当 ref 在模板中作为顶层属性被访问时,它们会被自动“解包”,所以不需要使用 .value。所以代码一中,template中的count不需要写作count.value。

说回组合式API,变量修改之后,组合式API和选项式API一样,是无法做到立刻将显示更新的,所以想要获取到变量修改后的页面元素就需要nextTick,用法和vue的nextTick是一样的,就不多赘述了。

目前比起选项式API的优点

从代码一和代码二中可以看出,组合式API里面不需要将变量放到data里面,函数放到method里面,这样的话可以让有相关性的变量和函数放到一起。开发选项式API的时候当页面数据量大的时候在method写函数的时候忘记了变量名称,就需要滑到data里面看一下,然后在滑回method继续写函数。组合式API不能说完全避免,但是能大大减少这种情况的出现。

生命周期

生命周期官网图片还是挺全的,基本上和选项式API差不多,就是改改名字,去掉了create,改用setup。

Vue2.xVue3
beforeCreatesetup
created
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyonBeforeUnmount
destroyedonUnmounted

这篇文章中找到了一个对比的列表,大体上是可以一一对应的。生命周期的逻辑我就不多赘述了,由于用法不同,所以这里我就根据代码一放一个错误的例子。

  1. setTimeout(() => {
  2. onMounted(() => {
  3. // 异步注册时当前组件实例已丢失
  4. // 这将不会正常工作 })
  5. }, 100
  6. )

生命周期可以放到函数里面,然后在setup里面调用,但是不能放到异步函数里面。

大体上回了这些就可以开始开发项目了,至于计算属性,监听器之类的,那都是后面的事情,这只是入门文章,过于入门了,所以并不建议熟练掌握的阅读此文。

以上就是vue组合式API浅显入门示例详解的详细内容,更多关于vue组合式API入门的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号