之前為大家講過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是描述文本,可寫可不寫。



