Vue3.0常用代码片段和开发插件
Vue3 Snippets for Visual Studio Code
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({...}) appear on the screen.
插件的 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 2.x 中使用 Vue 3.0 引入的基于函数的逻辑复用机制。
Navigation
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 组件的选项对象
};