Vue3.0 全面探索 - 基於 Visual Studio Code 的程式碼片段開發外掛
Vue3 Snippets for Visual Studio Code
- Vue3 Snippets原始碼
- Vue3 Snippets下載
This extension adds Vue3 Code Snippets into Visual Studio Code.
這個外掛基於最新的 Vue3 的 API 添加了 Code Snippets。
Snippets / 程式碼片段
Including most of the API of Vue3. You can type reactive, choose reactive, and press ENTER, then const data = reactive({...})
外掛的 Snippets 如下表格所示，比如你可以鍵入 reactive 然後按上下鍵選中 reactive 再按 Enter 鍵，就輸入了const data = reactive({...})了。
| Prefix | JavaScript Snippet Content |
|---|---|
import |
import {...} from "@vue/composition-api" |
import |
import {...} from 'vue' |
newVue |
newVue({...}) |
createComponent |
createComponent({...}) |
export |
export default { ... } |
setup |
setup(${...}) {...} |
reactive |
const data = reactive({...}) |
watch |
watch(..., ...) |
watchFn |
watch(() => {...}) |
computed |
computed(() => { get: () => {...}, set: () => {...}}) |
toRefs |
toRefs(...) |
ref |
ref(...) |
props |
props(...) |
onBeforeMount |
onBeforeMount(...) |
onMounted |
onMounted(...) |
onBeforeUpdate |
onBeforeUpdate(...) |
onUpdated |
onUpdated(...) |
onBeforeUnmount |
onBeforeUnmount(...) |
onUnmounted |
onUnmounted(...) |
onErrorCaptured |
onErrorCaptured(...) |
Vue Composition API
Vue Composition API
@vue/composition-api 使開發者們可以在 Vue 2.x 中使用 Vue 3.0 引入的基於函式的邏輯複用機制。
English Version
Navigation
- Installation / 安裝
- Usage / 使用
- TypeScript
- TSX
- Limitations / 限制
- API
- Changelog / 更改日誌
Installation
npm
npm install @vue/composition-api --saveyarn
yarn add @vue/composition-apiCDN
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>By using the global variable window.vueCompositionApi.
通過全域性變數 window.vueCompositionApi 來使用。
Usage
You must install @vue/composition-api via Vue.use() before using other APIs:
在使用任何 @vue/composition-api 提供的能力前，必須先通過 Vue.use() 進行安裝:
import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';
Vue.use(VueCompositionApi);After installing the plugin you can use the Composition API to compose your component.
安裝外掛後，您就可以使用新的 Composition API 來開發元件了。
TypeScript
This plugin requires TypeScript version >3.5.1. If you are using vetur, make sure to set vetur.useWorkspaceDependencies to true.
To let TypeScript properly infer types inside Vue component options, you need to define components with createComponent:
請使用最新版的 TypeScript，如果你使用了 vetur，請將 vetur.useWorkspaceDependencies 設為 true。
為了讓 TypeScript 正確的推導型別，我們必須使用 createComponent 來定義元件:
import { createComponent } from '@vue/composition-api';
const Component = createComponent({
// 啟用型別推斷
});
const Component = {
// 無法進行選項的型別推斷
// TypeScript 無法知道這是一個 Vue 元件的選項物件
};TSX