专栏首页大前端开发《Vue3.0抢先学》系列之:使用Composition API

《Vue3.0抢先学》系列之:使用Composition API

在上一篇文章中,我们大致了解了如何使用Vue3.0编写一个简单的计数器程序。不过,正如熟悉Vue2.x的朋友所看到的,我们用Vue3.0实现出来的代码和Vue2.x的看起来并没有什么太大区别。难道Vue3.0就这样了?没什么新的东西吗?

非也。Vue3.0考虑到新老框架的平滑过渡,做了挺不错的向下兼容,对Vue2.x风格的写法几乎都支持。这种Vue2.x的写法被称之为Options API(可选项式API),我们在创建组件的时候,其实都是在拼装一个可选项集合,比如我们传入data、computed、methods、watch以及created、mounted等生命周期函数,用这个可选项集合来声明一个组件:

export default {
    name: 'MyComp',
    props: ['title'],
    data() {
      return {
        a: 1,
        b: '斤',
        c: '代码'
      }
    },
    methods: {
      printInfo(txt) {
        console.log(`Result is ${this.a}${this.b}${this.c}`)
      }
    },
    created() {
      console.log('created!!!')
    }
}

这种方式的代码,组织良好,各个部分划分的比较清晰。但它也有缺点,就是这样的写法在逻辑复用上面不太友好。我们知道JS里最简洁、最清晰的复用方式就是将逻辑封装在一个个单纯的函数里,然后函数与函数之间互相调用。像上面这种嵌套对象的形式,复用性和优雅度就打了折扣。另外,以函数形式组织成的模块,在通过具名方式进行导入使用,在使用tree-shaking(摇树优化,可减小打包尺寸)的时候支持的更好,有更好的效果。下面是具名方式导入模块中的函数的例子,大家记得在编写代码的时候养成具名导入的好习惯:

import { myFunc1, myFunc2 } from 'my-module'

再则,由于Vue3.0支持TypeScript,TypeScript很重要的一个特性就是可以进行类型推导,而函数天然对类型推导非常友好(至少比嵌套对象要好得多)。

因此,像Composition API这种函数式的编程风格,成为了新框架的亮点,也可能是各个前端框架未来的主角。下面,我们就尝试使用Composition API来改造我们前文所写的计数器程序,主要是对Counter组件进行初步改造,代码大致就是这样的:

const { createApp, ref } = Vue

// 计数器组件
const Counter = {
    template: `
        <div class="counter-display">
            <span class="counter-label">恭喜你,你已经写了</span>
            <span class="counter-text">{{ count }}</span>
            <span class="counter-label">斤代码!</span>
        </div>
        <div class="counter-btns">
            <button class="btn" @click="increase">写一斤</button>
            <button class="btn" @click="reset">删库啦</button>
        </div>
    `,

    setup() {
        // 创建一个响应式的对象
        const count = ref(0)

        // 操作函数
        const increase = () => { count.value++ }
        const reset = () => { count.value = 0 }

        // 导出给模板访问
        return { count, increase, reset }
    }
}

我们观察到,data、methods部分都不见了,取而代之的是一个setup方法,它是Vue3.0中新增的组件入口,专为使用Composition API而设计,调用时机是在组件生命周期的 beforeCreate 和 created 之间(所以在 setup 里面是访问不了你所期望的 this 对象的,即它里面的this并不是指向当前组件,这点需要注意也尽量避免使用)。原先在 data 里的响应式对象属性 count 在这里成为了一个使用 ref 函数创建的响应式常量;而用于递增和重置这个 count 值的函数内部,不再需要通过 this 引用任何东西(也不推荐使用),这为我们进行进一步的重构提供了机会。我们可以把对 count 操作的业务逻辑独立提取出来:

// 计数器组件
const Counter = {
    template: `
        <div class="counter-display">
            <span class="counter-label">恭喜你,你已经写了</span>
            <span class="counter-text">{{ count }}</span>
            <span class="counter-label">斤代码!</span>
        </div>
        <div class="counter-btns">
            <button class="btn" @click="increase">写一斤</button>
            <button class="btn" @click="reset">删库啦</button>
        </div>
    `,

    setup() {
        const countOps = useCount()
        return { ...countOps }
    }
}

// 对count值的操作逻辑
function useCount() {
    const count = ref(0)    
    const increase = () => { count.value++ }
    const reset = () => { count.value = 0 }
    return { count, increase, reset }
}

我们将 count 值操作逻辑都分离到了 useCount() 函数中,这种做法有利于拆分复杂的业务逻辑,让代码看起来更清晰,更好维护;在我们使用模块化机制的时候,更可以进一步把这些独立逻辑函数移入模块文件中,让每一部分的代码都变得更干净。

好了,今天就先改到这儿,大家理解和消化一下代码中出现的新东西吧,后续我会做更详细的解读分析。

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.jianshu.com/u/d0dea96b2432复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 《Vue3.0抢先学》系列之:使用render函数

    还记得Vue2.x中组件的 render 方法么?我们除了可以用template来进行模板化的渲染输出,还可以用 render 方法进行编程式的渲染。模板有着看...

    一斤代码
  • 《Vue3.0抢先学》系列之:更多响应式API示例

    这几天,我们陆续学习了解了关于Vue3.0的一些新特性,尤其是新的Composition API的用法。这套新的API中最重要、最核心的部分,恐怕就是实现响应式...

    一斤代码
  • Vue3.0 新特性全面探索 - 基于 Composition Api 快速构建实战项目

    建议配合 Visual Studio Code 和 Vue 3 Snippets 代码插件食用Ψ( ̄∀ ̄)Ψ。

    wscats
  • 使用Vue3.0,我收获了哪些知识点(一)

    近期工作感觉很忙,都没有多少时间去写文章,今天这篇文章主要是将自己前期学习Vue3.0时候整理的一些笔记内容进行了汇总,通过对本文的阅读,你将可以自己完成Vue...

    用户1308196
  • 全网首发:Vue3.0+Vite避坑指南!升级后有新增了哪些看点?

    Vue2.0 全线升级,升级后的新版本 Vue3.0 凭借新特性,新工具,一经问世便在 IT 圈中引起广泛的讨论:

    用户3806669
  • [前端学习]大数据全栈工程师之一文快速上手vue3

    下面是学习Vue3的成果,一些案例,能让你能快速了解什么是Vue?Vue2.x和Vue3.x的区别在哪里?:

    ChinaManor
  • ❤️[前端学习]大数据全栈工程师之一文快速上手vue3❤️

    下面是学习Vue3的成果,一些案例,能让你能快速了解什么是Vue?Vue2.x和Vue3.x的区别在哪里?:

    ChinaManor
  • 《Vue3.0抢先学》系列之:组件属性Props

    组件,是封装和复用性的体现。封装,将尽量少的细节暴露给外界;复用,在保证整体功能的情况下通过一些方式提供灵活性、可变性。这些设计指导原则可以让我们在程序开发的过...

    一斤代码
  • 适合Vue用户的React教程,你值得拥有(二)

    上周小编我写了 适合Vue用户的React教程,你值得拥有,得到了小伙伴们的一致好评,今天这篇文章是这一系列的第二篇文章。今年的9月18日是九一八事变89周年,...

    用户1308196
  • 《Vue3.0抢先学》系列之:网友们都惊呆了!

    今天开始,我想给大家讲点新东西。大家不用大喊学不动,请放松心情随意观看,我也讲不出什么很深奥难学的东西,本系列文章都会是些比较浅显易懂的家常内容。

    一斤代码
  • vue3.0 源码解析一 :响应式原理(上)

    从本文开始,我们正式进入vue3.0 源码解析流程。个人觉得从ceateApp入手并不是最佳的学习方案,所以我们先从composition-api响应式原理入手...

    用户6835371
  • Vue3 学习笔记 —— (一)深入理解组合式 API

    Vue3 是向下兼容 Vue2 API 的,但是 Vue3 中提供了一种全新的 Composition API

    Gorit
  • 《Vue3.0抢先学》系列之:响应式之Ref vs. Reactive

    在上文中,我们使用Vue3.0最新的Composition API改写了由Options API写成的计数器示例。我们发现,原先的数据响应式监听的用法发生了变化...

    一斤代码
  • 《Vue3.0抢先学》系列之:组件生命周期

    在组件化的框架中,比如Angular、React或Vue,都为组件定义了生命周期这个概念,每个组件实例在被创建时都要经过一系列的初始化过程,例如:需要设置数据监...

    一斤代码
  • 那个男人 他带着Vue3来了~

    其实Vue3.0版本发布的消息,我是昨天晚上刷朋友圈看到的(已经差不多凌晨 1 点了),然后我就立刻起来,打开电脑,看了一下github,把官方发布文档过了一遍...

    前端森林
  • 《Vue3.0抢先学》系列之:一个简单的例子

    书接上文:你被我撩拨了一下,从Github上下载了Vue3.0的源码。然后呢,你是不是已经迫不及待的想知道到底怎么样快速的把这个源代码用起来呢?

    一斤代码
  • 最强Vue3.0新特性讲解,99%的人都觉得很赞!

    2020年4月前端开发框架Vue发布了3.0-Beta版本,9月发布正式版。 纳尼?2.0还没玩转,3.0的时代就来了???

    pingan8787
  • Vue3.0来了

    Vue这次3.0发布了,博客平台、公众号、朋友圈基本都有这么一条新闻,可见大家对其期待程度,毕竟Vue 有 130 万的使用者嘛,萌新不知不觉感觉瑟...

    前端黑板报
  • vue3.0 源码解析三 :watch和computed流程解析

    之前我们分两个章节详细的介绍了vue3.0 数据相应原理,知道了用proxy代替Object.defineProperty 的利与弊,了解了依赖收集和派发更新的...

    用户6835371

扫码关注云+社区

领取腾讯云代金券