之前為大家講過vue2的用戶代碼片段生成模板，現(xiàn)在為大家?guī)韛ue3的代碼片段，vue3由于版本更迭，修改了部分生命周期與數(shù)據(jù)構(gòu)建方式。

{
       "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-開始創(chuàng)建組件-setup')",
              "    const data = reactive({})",
              "    onBeforeMount(() => {",
              "      console.log('2.組件掛載頁面之前執(zhí)行----onBeforeMount')",
              "    })",
              "    onMounted(() => {",
              "      console.log('3.-組件掛載到頁面之后執(zhí)行-------onMounted')",
              "    })",
              "    return {",
              "      ...toRefs(data),",
              "    }",
              "  },",
              "}",
              "",
              "</script>",
              "<style scoped>",
              "</style>",
             
       ],
         "description": "Log output to console"
       }
  }

    講解一下，首先我們引用常用的四個(gè)函數(shù)，響應(yīng)式數(shù)據(jù)reactive，把對象中的每個(gè)數(shù)據(jù)都變?yōu)閞ef形響應(yīng)式數(shù)據(jù)的toRefs，加上常用的生命周期函數(shù)onBeforeMount'與onMounted'。

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