首页专栏详情
打赏
Composition API 使用总结
易百纳技术社区 不完整教程 2020-12-07 23:36:10

最近在项目中使用了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!')
  })
},
打赏
共1人已赏
完整的教程https://fizzz.blog.csdn.net。该网站都是残缺
评论
0个
内容存在敏感词
相关专栏
打赏作者
易百纳技术社区
不完整教程
您的支持将鼓励我继续创作!
打赏金额:
¥1 易百纳技术社区
¥5 易百纳技术社区
¥10 易百纳技术社区
¥50 易百纳技术社区
¥100 易百纳技术社区
支付方式:
微信支付
支付宝支付
易百纳技术社区 微信支付
易百纳技术社区
打赏成功!

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

审核成功

发布时间设置
发布时间:

审核失败

失败原因
备注
Loading...
易百纳技术社区
确定要删除此文章、专栏、评论吗?
确定
取消
易百纳技术社区
易百纳技术社区
在专栏模块发布专栏,可获得其他E友的打赏
易百纳技术社区
回答悬赏问答,被题主采纳后即可获得悬赏金
易百纳技术社区
在上传资料时,有价值的资料可设置为付费资源
易百纳技术社区
达到一定金额,收益即可提现~
收益也可用来充值ebc,下载资料、兑换礼品更容易
易百纳技术社区
活动规则
  • 1.周任务为周期性任务,每周周一00:00刷新,上周完成的任务不会累计到本周,本周需要从头开始任务,当前任务完成后才可以完成下一个任务
  • 2.发布的专栏与资料需要与平台的板块有相关性,禁止注水,专栏/资料任务以审核通过的篇数为准
  • 3.任务完成后,现金奖励直接打款到微信账户;EBC/收益将自动发放到个人账户,可前往“我的钱包”查看;其他奖励请联系客服兑换
  • 4.每周最后三个任务将会有以下奖品掉落:社区热卖开发板、小米音响、视频年度会员、京东卡、华为手机等等
易百纳技术社区
升级提醒
易百纳技术社区

恭喜您由入门

社区送出礼品一份

请填写您的收件地址,礼品将在3个工作日寄出

易百纳技术社区