利用用户代码片段快速生成vue3模板

    之前为大家讲过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是描述文本，可写可不写。