宁夏建设技术职业学院官方网站,html网页制作代码大全图片,设计师的个人网站,抖音官方推广渠道文章目录#x1f31f; 写在前面#x1f31f; 组合式 API 是什么#xff1f;#x1f31f; 直观组合式API#x1f31f; 写在最后#x1f31f; 写在前面
专栏介绍#xff1a; 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章#xff0c;应粉丝要求开始更新 Vue3 的相关技…
文章目录 写在前面 组合式 API 是什么 直观组合式API 写在最后写在前面
专栏介绍 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章应粉丝要求开始更新 Vue3 的相关技术文章Vue 框架目前的地位大家应该都晓得所谓三大框架使用人数最多公司选型最多的框架凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因和 Vue 框架相比其他框架的巨大优势有兴趣的伙伴可以看一下 Vue框架背后的故事、尤大大对前端生态是这样看的随着 Vue 框架不断的被认可现如今的 Vue 框架已经是前端工程师必备的技能了记得尤大大开发 Vue 的初衷为了让自己的开发工作更加便捷也希望这个框架能让更多人的开发工作变得轻松现如今 Vue 框架做到了尤大大做到了当然在 20 年的 9 月 18 日Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布如今已经过去了两年多的时间更多的公司选择了Vue3技术所以凉哥也在这个时候为大家出这份专栏本专栏将帮助大家掌握Vue3TS技术提升自己竞争力
温故知新 上篇文章中我们为大家简单的看了一下Vue3的代码块里面的写法还是有些不同的你还记得有哪些变化么如果你还没有阅读那就赶快去看看吧而且我们手写了Vue2和Vue3的入口文件main.js让大家感受到我们Vue初始化到挂载存在的差距前面的文章中我们也提及到了学习Vue3其实就是学习我们的组合式API这篇文章我们就是来简单的认识和接触一下我们的组合式API下面就让我们来一起看一下吧 组合式 API 是什么
选项式 API (Options API) 大家熟悉的Vue2项目中我们使用的是选项是API就是我们在项目文件中的export default {}对象里面加入我们使用到的 data、methods、watch 等等配置组合式 API (Composition API) 通过组合式 API我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中组合式 API 通常会与 script setup 搭配使用。这个 setup attribute 是一个标识告诉 Vue 需要在编译时进行一些处理让我们可以更简洁地使用组合式 API。比如script setup 中的导入和顶层变量/函数都能够在模板中直接使用。 两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上选项式 API 是在组合式 API 的基础上实现的关于 Vue 的基础概念和知识在它们之间都是通用的。选项式 API 以“组件实例”的概念为中心对于有面向对象语言背景的用户来说这通常与基于类的心智模型更为一致。同时它将响应性相关的细节抽象出来并强制按照选项来组织代码从而对初学者而言更为友好。组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的它的灵活性也使得组织和重用逻辑的模式变得更加强大。 直观组合式API
上面我们说的都是他们的理论点我们不如通过一个小小的案例来从代码层面直观的感受一下两种API形式的区别吧我们就用一个简单的例子就是下面图片中的两个小功能一个是通过点击按钮切换图片的展示与隐藏一个是通过点击按钮实现点赞累加总的获赞数量 相信大家在看到这个需求思路就非常清晰了哈其实就是你想的那么简单我们声明一个变量利用v-if控制图片的展示隐藏通过上方按钮改变变量的布尔值第二个我们初始化一个变量为0 每次点击点赞按钮让变量即可实现那么下面呢我们分别利用Vue2的选项API和Vue3的组合式API同时来用代码实现上面的功能我们来感受一下 Vue3中可以编写选项API吗当然可以所以大可不必可以切换到Vue2框架中去尝试直接在我们Vite构建的Vue3项目中去编写即可 选项式API
templateh2凉哥案例/h2divbutton clickswitchBtn展示/隐藏/button/divimg v-ifshowImg width200 height200srchttps://img2.baidu.com/it/u2167395474,3773933499fm253fmtautoapp138fPNG?w1018h500 altp请为我点赞 共{{ fabulous }}个赞 button clickgive点赞/button/p
/template
script
export default {data(){return{showImg:true,fabulous:0}},methods:{switchBtn(){this.showImg!this.showImg},give(){this.fabulous}}
}
/script
style langless scoped
/style组合式API
templateh2凉哥案例/h2divbutton clickswitchBtn展示/隐藏/button/divimg v-ifshowImg width200 height200srchttps://img2.baidu.com/it/u2167395474,3773933499fm253fmtautoapp138fPNG?w1018h500 altp请为我点赞 共{{ fabulous }}个赞 button clickgive点赞/button/p
/template
script
import { ref, reactive } from vue
export default {setup() {//切换图片展示let showImg ref(true)const switchBtn () {showImg.value !showImg.value}//点赞let fabulous ref(0)const give () {fabulous.value}return { showImg, switchBtn, fabulous, give }}
}
/script
style langless scoped
/style上面的两套代码你都进行了尝试么相同的功能我们看到两个API实现上逻辑相同但是写法上有点点区别就是我们能感受到 组合式API 表现出来的是每个逻辑使用到的数据、函数都在一起当然我们这里只是简单的小例子如果复杂的项目中我们运用组合式API 每个逻辑都是一块代码甚至我们可以将一个逻辑的代码块单独摘出来进行封装以便复用这对我们后期的维护和代码的梳理来说都是有很大的优势。大家应该对组合API的写法非常陌生没有关系大家就先跟上上面的代码先写出来即可下篇文章我们会展开来讲解 组合API的各类函数 写在最后
相信大家都基本上知道了组合式API和选项API的大致差别了吧你心里倾向于哪一种呢比如我们上面案例中的ref其实就是组合式API中的一个函数还有其他的一些函数我们会在下一篇文章中为大家详细的讲解作用以及用法让我们 let’s coding
本期推荐 ✨原创不易还希望各位大佬支持一下\textcolor{blue}{原创不易还希望各位大佬支持一下}原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力\textcolor{green}{点赞你的认可是我创作的动力}点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向\textcolor{green}{收藏你的青睐是我努力的方向}收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富\textcolor{green}{评论你的意见是我进步的财富}评论你的意见是我进步的财富
