Composition API 使用总结

这把我C 2020-12-07 23:36:10 10301

最近在项目中使用了vue的新属性,Composition API,这是一个最新版Vue3.0的组合式 API: 一组低侵入式的、函数式的 API,使得我们能够更灵活地「组合」组件的逻辑。由于Vue3.0目前还不太稳定,官方提供了这个API来体验Vue的最新的特征。大家可以尝尝鲜。

刚开始用的很不习惯,但慢慢地感受到了它带来的便利。下面是我使用一段时间后的总结。希望能够帮助各位前端读者快速地启用最新的姿势写Vue组件。

我们项目中使用的还是vue2.x,只是单独引入了@vue/composition-api,另外也使用了TypeScript,听说今年TS使用量大增,大家也要赶紧学起来啊,后面我也会带来一些TS的分享与总结。有兴趣的同学可以关注一下。

要使用Composition API 就要先安装,项目根目录下执行

npm i @vue/composition-api

项目中配置

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

使用@vue/composition-api写一个简单的组件

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
  import { defineComponent, reactive } from "@vue/composition-api";

  export default defineComponent({
    setup() {
      const state = reactive({
        count: 0,
        double: computed(() => state.count * 2),
      })

      function increment() {
        state.count++
      }

      return {
        state,
        increment,
      }
    },
  })
</script>

router,$message, vuex, emit的方法的改造

 import { defineComponent, reactive } from "@vue/composition-api";

  export default defineComponent({
    setup(props, {root, emit}) {

        // 使用root属性的$route
      const clusterId = root.$route.params.clusterId;

      const state = reactive({
        count: 0,
        double: computed(() => state.count * 2),
      })

      function increment() {
        state.count++
        root.$message.success('操作成功')
        emit('input', state.count)
      }

      return {
        state,
        increment,
      }
    },
  })

setup从生命周期钩子的视角来看,它会在 beforeCreate 钩子之前被调用
第一个参数是props,第二个参数是上下文对象, 上下文对象中有包含以下几个属性attrs, slots, emit,

reactive的使用发

const obj = reactive({ count: 0 })

ref 的使用

const count = ref(0)

computed的使用

const count = ref(1)
const plusOne = computed(() => count.value + 1)

watch的使用

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

生命周期

setup() {
  onMounted(() => {
    console.log('mounted!')
  })
  onUpdated(() => {
    console.log('updated!')
  })
  onUnmounted(() => {
    console.log('unmounted!')
  })
},
声明:本文内容由易百纳平台入驻作者撰写,文章观点仅代表作者本人,不代表易百纳立场。如有内容侵权或者其他问题,请联系本站进行删除。
红包 95 9 评论 打赏
评论
0个
内容存在敏感词
手气红包
    易百纳技术社区暂无数据
相关专栏
置顶时间设置
结束时间
删除原因
  • 广告/SPAM
  • 恶意灌水
  • 违规内容
  • 文不对题
  • 重复发帖
打赏作者
易百纳技术社区
这把我C
您的支持将鼓励我继续创作!
打赏金额:
¥1易百纳技术社区
¥5易百纳技术社区
¥10易百纳技术社区
¥50易百纳技术社区
¥100易百纳技术社区
支付方式:
微信支付
支付宝支付
易百纳技术社区微信支付
易百纳技术社区
打赏成功!

感谢您的打赏,如若您也想被打赏,可前往 发表专栏 哦~

举报反馈

举报类型

  • 内容涉黄/赌/毒
  • 内容侵权/抄袭
  • 政治相关
  • 涉嫌广告
  • 侮辱谩骂
  • 其他

详细说明

审核成功

发布时间设置
发布时间:
是否关联周任务-专栏模块

审核失败

失败原因
备注
拼手气红包 红包规则
祝福语
恭喜发财,大吉大利!
红包金额
红包最小金额不能低于5元
红包数量
红包数量范围10~50个
余额支付
当前余额:
可前往问答、专栏板块获取收益 去获取
取 消 确 定

小包子的红包

恭喜发财,大吉大利

已领取20/40,共1.6元 红包规则

    易百纳技术社区