PS:2022,7月更新–最新的2.7版本已支持compositionAPI,不用再单独引入,写下面文章时2.7版本还未发布
vue2的optionsAPI与vue3的compositionAPI孰优孰劣就不再赘述了,萝卜青菜各有所爱,小孩才做选择,大人当然是全都要,vue3中依然可以使用optionsAPI,vue2中也可以使用compositionAPI

首先是从npm或者yarn上下载@vue/composition-api这个包

npm install @vue/composition-api
# or
yarn add @vue/composition-api

然后在main.js/main.ts里通过Vue.use()安装

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

Vue.use(VueCompositionAPI)

紧接着就可以在项目中尽情享用3的特性了,有遗憾的是还不能在script标签后面直接使用setup语法糖(补充:2.7版本已支持)

<template>
    <div>
        {{msg}}
        <ul v-for="item in look">
            <li>{{item}}</li>
        </ul>
    </div>
</template>
<script>
    import {ref, reactive} from '@vue/composition-api'
    export default {
        name: 'Vue2CompositionAPI',
        setup() {
            const msg = ref('hello vue')
            const obj = {
                name: 'vue2',
                version: '2.6.x',
                title: 'optionsAPI'
            }
            const look = reactive({...obj})
            return {msg, look}
        }
    }
</script>
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐