vue2使用vue3語法

丁少华發表於2024-10-30
Vue

Composition API

Composition API 將是 Vue 3 的核心功能，它具有許多更改和效能改進。
我們也可以在 Vue 2 中透過 npm 外掛@vue/composition-api 使用它。
安裝 yarn add @vue/composition-api 之後，在入口檔案 main.js 中使用它。

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

Vue.use(VueCompositionAPI)

之後，你就可以在你vue2專案中用vue3的組合式API來編寫元件了！

<template>
  <button @click="increase">count is: {{ count }}</button>
</template>
<script>
  export default {
    setup() {
      let count = 0
      const increase = () => count++
      return { count, increase }
    },
  }
</script>

script setup

<script setup>語法糖可以使得組合式API編寫更為簡潔。
這裡我們透過unplugin-vue2-script-setup 讓vue2在使用@vue/composition-api的基礎上也能使用上此特性！

安裝 yarn install --dev unplugin-vue2-script-setup，之後在vue.config.js中進行配置

const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default

module.exports = {
  parallel: false, // disable thread-loader, which is not compactible with this plugin
  configureWebpack: {
    plugins: [
      ScriptSetup({ /* options */ }),
    ],
  },
}

路由和vuex等

Vue2 Helpers 能讓你在vue2中也能使用到更先進的api，比如 useRouter

import { useRouter } from 'vue2-helpers/vue-router';

const router = useRouter();
router.push('/login');

相關文章