Loading...
首页专栏正文

Composition API 使用总结

 
1人已赏
Fizz 发布于 2020-12-11 14:00:51 浏览 6613 点赞 95 收藏 9

最近在项目中使用了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!')
  })
},
前端架构师,精通前端技术栈,物联网。了解云原生,容器编排。

*本文仅代表作者观点,不代表易百纳技术社区立场。系作者授权易百纳技术社区发表,未经许可不得转载。

精彩评论

内容存在敏感词
打赏
打赏作者
Fizz
您的支持将鼓励我继续创作!
金额:
¥1 ¥5 ¥10 ¥50 ¥100
支付方式:
微信支付
支付宝支付
微信支付
打赏成功!

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

易百纳技术社区
确定要删除此文章、专栏、评论吗?
确定
取消
易百纳技术社区