Vue2.x项目中愉快使用3.0特性

约定不等于承诺〃 2022-12-15 11:14 137阅读 0赞

### Vue2.x项目中愉快使用3.0特性 ###

> 早在 Vue3 源码公布之前，Vue 官方已经透露了代表下一代 Vue 技术的 Vue3 将采取的新的接口使用方式。这种新的方式叫做 Composition API （组合式 API）。随着Vue3 pre-alpha版本的发布，相信小伙伴们已经按耐不住跃跃欲试的心情，下面我为大家简单介绍如何在项目中平滑引入vue3.0特性。

### Composition API（组合 API） ###

> @vue/composition-api 是早期推出用来让开发者能在第一时间体验到vue3.0标准的一个vue插件，该插件在不破坏2.x语法的情况下加入3.0的语法特性。如上文所说，Vue pre-alpha版本的出现意味着源码已经趋于稳定，我们也可以放心在项目中引入这个插件。

### 使用 ###

> 下载了 @vue/composition-api 插件以后，按照文档在 main.js 引用便开启了 Composition API 的能力。

打开main.js

import Vue from 'vue'
    import App from './App.vue'
    import VueCompositionApi from '@vue/composition-api'
    
    Vue.config.productionTip = false
    Vue.use(VueCompositionApi)
    
    new Vue({ 
      render: h => h(App),
    }).$mount('#app')

### setup() 函数 ###

> setup() 是 Vue3.0 中引入的一个新的组件选项，我们所使用Composition API都会写在这个函数内。  
> setup会在实力创建之前运行因此获取不到Vue的this

<template>
      <button @click="increment">
        Count is: { {  count }}, double is: { {  double }}
      </button>
    </template>
    
    <script>
    import {  reactive, computed,toRefs } from '@vue/composition-api'
    
    export default { 
      setup() { 
        const state = reactive({ 
          count: 0,
          double: computed(() => state.count * 2)
        })
    
        function increment() { 
          state.count++
        }
    
        return { 
          ...toRefs(state),
          increment
        }
      }
    }
    </script>