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

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

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

🚀 這里有一個配置好 TS/TSX 支持的示例倉庫來幫助你快速開始.

要支持 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 Unwrap

Unwrap is not working with Array index.

數組索引屬性無法進行自動的Unwrap:

Should not store ref as a direct child of Array:

不要使用 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

Should not use ref in a plain object when working with Array:

不要在數組中使用含有 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

Should always use ref in a reactive when working with Array:

應該總是將 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

Using reactive will mutate the origin object

reactive 會返回一個修改過的原始的對象

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

此行為與 Vue 2 中的 Vue.observable 一致

Vue 3 will return an new proxy object.

Vue 3 中會返回一個新的的代理對象.

---

watch() API

onTrack and onTrigger are not available in WatchOptions.

不支持 onTrack 和 onTrigger 選項。

---

Template Refs

✅ Support ❌ Not Supported

✅ String ref && return it from 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:

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():

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.

如果你依然選擇在 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.

⚠️ 警告: 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 類型:

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.

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

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

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

    return {
      result,
    };
  },
};

項目源碼

如果文章和筆記能帶您一絲幫助或者啟發，請不要吝嗇你的贊和 Star，你的肯定是我前進的最大動力😁

• https://github.com/Wscats/vue-cli