Vue3.0常用代码片段和开发插件

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({...}) 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/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 --save

yarn

yarn add @vue/composition-api

CDN

<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