Vue3和Vue2的Visual Studio代码语法突出显示

Vue片段 (vue-snippets)

Vue3 Snippets, This extension adds Vue3 Code Snippets into Visual Studio Code.

Vue3代码片段，此扩展将Vue3代码片段添加到Visual Studio Code中。

片段 (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.

包括Vue3的大多数API。 您可以键入reactive ，选择reactive ，然后按ENTER，然后const data = reactive({...})出现在屏幕上。

插件的 Snippets 如下表格所示，比如你可以键入 reactive 然后按上下键选中 reactive 再按 Enter 键，就输入了const data = reactive({...})了。

插件的片段如下表所示，某些你可以键入reactive然后按上下键进入reactive再按Enter键，就输入了const data = reactive({...}) react 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(...)

字首	JavaScript代码段内容
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 Composition API

@vue/composition-api 使开发者们可以在 Vue 2.x 中使用 Vue 3.0 引入的基于函数的逻辑复用机制。

@vue/composition-api使开发者们可以在Vue 2.x中使用Vue 3.0的基于函数的逻辑 替换 机制 。

安装 (Installation)

npm

npm

npm install @vue/composition-api --save

yarn

纱

yarn add @vue/composition-api

CDN

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。

通过全局变量 window.vueCompositionApi 来使用。

通过全局变量window.vueCompositionApi来使用。

用法 (Usage)

You must install @vue/composition-api via Vue.use() before using other APIs:

在使用其他API之前，您必须通过Vue.use()安装@ vue / composition-api：

在使用任何 @vue/composition-api 提供的能力前，必须先通过 Vue.use() 进行安装:

在使用任何@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来组成您的组件。

安装插件后，您就可以使用新的 Composition API 来开发组件了。

安装插件后，您就可以使用新的Composition API来开发组件了。

打字稿 (TypeScript)

This plugin requires TypeScript version >3.5.1. If you are using vetur, make sure to set vetur.useWorkspaceDependencies to true.

此插件需要TypeScript版本> 3.5.1。 如果您使用的是vetur ，请确保将vetur.useWorkspaceDependencies设置为true 。

To let TypeScript properly infer types inside Vue component options, you need to define components with createComponent:

为了让TypeScript正确推断Vue组件选项中的类型，您需要使用createComponent定义组件：

请使用最新版的 TypeScript，如果你使用了 vetur，请将 vetur.useWorkspaceDependencies 设为 true。

请使用最新版本的TypeScript，如果您使用了vetur ，则替换vetur.useWorkspaceDependencies创建true 。

为了让 TypeScript 正确的推导类型，我们必须使用 createComponent 来定义组件:

为了让TypeScript正确的推导类型，我们必须使用createComponent来定义组件：

import { createComponent } from '@vue/composition-api';

const Component = createComponent({
  // 启用类型推断
});

const Component = {
  // 无法进行选项的类型推断
  // TypeScript 无法知道这是一个 Vue 组件的选项对象
};

多伦多证券交易所 (TSX)

🚀 An Example Repository with TS and TSX support is provided to help you start.

with提供了具有TS和TSX支持的示例存储库以帮助您开始。

To support TSX, create a declaration file with following content in your project.

要支持TSX，请在项目中创建一个声明文件，其中包含以下内容。

🚀 这里有一个配置好 TS/TSX 支持的示例仓库来帮助你快速开始.

/这里有一个配置好TS / TSX支持的示例仓库来帮助您快速开始。

要支持 TSX，请创建一个类型定义文件并提供正确的 JSX 定义。内容如下：

要支持TSX，请创建一个类型定义文件并提供正确的JSX定义。内容如下：

// file: shim-tsx.d.ts`
import Vue, { VNode } from 'vue';
import { ComponentRenderProxy } from '@vue/composition-api';

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends ComponentRenderProxy {}
    interface ElementAttributesProperty {
      $props: any; // specify the property name to use
    }
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

局限性 (Limitations)

Ref包装 (Ref Unwrap)

Unwrap is not working with Array index.

Unwrap不适用于数组索引。

数组索引属性无法进行自动的Unwrap:

Unwrap索引属性无法进行自动的

不应将ref存储为Array的直接子代： (Should not store ref as a direct child of Array:)

不要使用Array直接访问ref对象： (不要使用 Array 直接存取 ref 对象:)

const state = reactive({
  list: [ref(0)],
});
// no unwrap, `.value` is required
state.list[0].value === 0; // true

state.list.push(ref(1));
//  no unwrap, `.value` is required
state.list[1].value === 1; // true

使用Array时， 不应在普通对象中使用ref ： (Should not use ref in a plain object when working with Array:)

不要在层叠中使用含有ref的普通对象： (不要在数组中使用含有 ref 的普通对象:)

const a = {
  count: ref(0),
};
const b = reactive({
  list: [a], // a.count will not unwrap!!
});

// no unwrap for `count`, `.value` is required
b.list[0].count.value === 0; // true

const b = reactive({
  list: [
    {
      count: ref(0), // no unwrap!!
    },
  ],
});

// no unwrap for `count`, `.value` is required
b.list[0].count.value === 0; // true

使用Array时， 应始终在reactive使用ref ： (Should always use ref in a reactive when working with Array:)

应该总是将ref收藏到reactive对象中： (应该总是将 ref 存放到 reactive 对象中:)

const a = reactive({
  count: ref(0),
});
const b = reactive({
  list: [a],
});
// unwrapped
b.list[0].count === 0; // true

b.list.push(
  reactive({
    count: ref(1),
  })
);
// unwrapped
b.list[1].count === 1; // true

使用reactive会改变原始对象 (Using reactive will mutate the origin object)

reactive会返回一个修改过的原始的对象 (reactive 会返回一个修改过的原始的对象)

This is an limitation of using Vue.observable in Vue 2.

这是在Vue 2中使用Vue.observable的限制。

此行为与 Vue 2 中的 Vue.observable 一致

此行为与Vue 2中的Vue.observable一致

Vue 3 will return an new proxy object.

Vue 3将返回一个新的代理对象。

Vue 3 中会返回一个新的的代理对象.

Vue 3中会返回一个新的的代理对象。

---

---

watch() API (watch() API)

onTrack and onTrigger are not available in WatchOptions.

onTrack和onTrigger不是WatchOptions可用。

不支持 onTrack 和 onTrigger 选项。

不支持onTrack和onTrigger选项。

---

---

模板参考 (Template Refs)

✅ Support ❌ Not Supported

✅支持❌不支持

✅ String ref && return it from setup():

✅字符串ref &&从setup()返回：

<template>
  <div ref="root"></div>
</template>

<script>
  export default {
    setup() {
      const root = ref(null);

      onMounted(() => {
        // the DOM element will be assigned to the ref after initial render
        console.log(root.value); // <div/>
      });

      return {
        root,
      };
    },
  };
</script>

✅ String ref && return it from setup() && Render Function / JSX:

✅字符串引用&&从setup() ＆渲染函数/ JSX返回：

export default {
  setup() {
    const root = ref(null);

    onMounted(() => {
      // the DOM element will be assigned to the ref after initial render
      console.log(root.value); // <div/>
    });

    return {
      root,
    };
  },
  render() {
    // with JSX
    return () => <div ref="root" />;
  },
};

❌ Function ref:

❌功能参考：

<template>
  <div :ref="el => root = el"></div>
</template>

<script>
  export default {
    setup() {
      const root = ref(null);

      return {
        root,
      };
    },
  };
</script>

❌ Render Function / JSX in setup():

setup()渲染函数/ JSX：

export default {
  setup() {
    const root = ref(null);

    return () =>
      h('div', {
        ref: root,
      });

    // with JSX
    return () => <div ref={root} />;
  },
};

If you really want to use template refs in this case, you can access vm.$refs via SetupContext.refs.

如果您确实想在这种情况下使用模板引用，则可以通过SetupContext.refs访问vm.$refs 。

如果你依然选择在 setup() 中写 render 函数，那么你可以使用 SetupContext.refs 来访问模板引用，它等价于 Vue 2.x 中的 this.$refs:

如果您依然选择在setup()中写render函数，那么您可以使用SetupContext.refs来访问模板引用，它等价于Vue 2.x中的this.$refs ：

⚠️ Warning: The SetupContext.refs won't exist in Vue 3.0. @vue/composition-api provide it as a workaround here.

Warning️ 警告 ： SetupContext.refs在Vue 3.0中将不存在。 @vue/composition-api在此处提供了解决方法。

⚠️ 警告: SetupContext.refs 并不属于 Vue 3.0 的一部分, @vue/composition-api 将其曝光在 SetupContext 中只是临时提供一种变通方案。

⚠️警告： SetupContext.refs并不属于Vue 3.0的一部分， @vue/composition-api将其曝光在SetupContext中只是临时提供一种变通方案。

export default {
  setup(initProps, setupContext) {
    const refs = setupContext.refs;
    onMounted(() => {
      // the DOM element will be assigned to the ref after initial render
      console.log(refs.root); // <div/>
    });

    return () =>
      h('div', {
        ref: 'root',
      });

    // with JSX
    return () => <div ref="root" />;
  },
};

You may also need to augment the SetupContext when working with TypeScript:

使用TypeScript时，您可能还需要增强SetupContext ：

如果项目使用了 TypeScript，你还需要扩展 SetupContext 类型:

如果项目使用了TypeScript，你还需要扩展SetupContext类型：

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

declare module '@vue/composition-api/dist/component/component' {
  interface SetupContext {
    readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] };
  }
}

固态继电器 (SSR)

Even if there is no definitive Vue 3 API for SSR yet, this plugin implements the onServerPrefetch lifecycle hook that allows you to use the serverPrefetch hook found in the classic API.

即使尚无用于SSR的确定性Vue 3 API，该插件也会实现onServerPrefetch生命周期挂钩，该挂钩可让您使用经典API中的serverPrefetch挂钩。

import { onServerPrefetch } from '@vue/composition-api';

export default {
  setup (props, { ssrContext }) {
    const result = ref();

    onServerPrefetch(async () => {
      result.value = await callApi(ssrContext.someId);
    });

    return {
      result,
    };
  },
};

翻译自: https://vuejsexamples.com/visual-studio-code-syntax-highlighting-for-vue3-and-vue2/