之前為大家講過vue2的用戶代碼片段生成模板，現在為大家帶來vue3的代碼片段，vue3由于版本更迭，修改了部分生命周期與數據構建方式。

{
       "Print to console": {
         "prefix": "vue3",
         "body": [
              "<template>",
              "  <div></div>",
              "</template>",
              "",
              "<script>",
              "import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'",
              "export default {",
              "  name: '',",
              "  setup() {",
              "    console.log('1-開始創建組件-setup')",
              "    const data = reactive({})",
              "    onBeforeMount(() => {",
              "      console.log('2.組件掛載頁面之前執行----onBeforeMount')",
              "    })",
              "    onMounted(() => {",
              "      console.log('3.-組件掛載到頁面之后執行-------onMounted')",
              "    })",
              "    return {",
              "      ...toRefs(data),",
              "    }",
              "  },",
              "}",
              "",
              "</script>",
              "<style scoped>",
              "</style>",
             
       ],
         "description": "Log output to console"
       }
  }

    講解一下，首先我們引用常用的四個函數，響應式數據reactive，把對象中的每個數據都變為ref形響應式數據的toRefs，加上常用的生命周期函數onBeforeMount'與onMounted'。

   prefix就是你輸入的觸發文本，body是vscode補全文本，每一行都需要用雙引號包裹，換到下一行需要重新用雙引號包裹，description是描述文本，可寫可不寫。