*.vue 文件，这个文件会被 vue-loader（如果你用的是 Webpack 的话）加工处理。
其中 <template> 部分会被 vue-template-compiler 编译成 render 函数，并插入到export default { render() }中被导出的 JS 对象中；<style> 部分会被转换成样式函数或提取为独立 CSS 文件（取决于你的 Webpack 配置）。所以在尽管<template>、<style>不在export default中仍然会被导出。

？？？为什么不可以用export 代替export default：

vue-loader 只会处理 <script> 部分默认导出的内容（也就是 export default 出来的内容）。所以你修改了导出的类型变成export就不可以。

1.Vue的生命周期可以划分为四个阶段：

create 阶段： vue实例被创建；
mount 阶段： vue实例被挂载到真是的DOM节点；
update 阶段：当vue实例里面的data数据变化时，触发组件的重新渲染；
destroy 阶段：vue实例被销毁。

beforeCreate - 加入loading事件
created - 结束loading
beforemount - 发起服务端请求，取数据
mounted - 根据请求数据，对页面DOM做些什么操作

2.生命周期小结

我们对上面的分析结果做个小结，此处的表格会多考虑两个方法（当有<keep-alive></keep-alive>组件时，生命周期会多出现一个activate阶段）。

created 组件实例创建完成。属性已绑定，但DOM还未产生。    data有值了，$el属性还是undefined。
beforeMount 模板编译/挂载前。   $el是虚拟DOM。
mounted 模板编译/挂载后。   “虚拟”的dom节点被真实的dom节点替换，并将其插入到dom树中。此时可以获取到$el为真实的dom元素。
beforeUpdate    组件更新之前。 $el、data 的值都为新数据。
updated 组件更新之后。 $el、data 的值都为新数据。
activated   for kepp-alive，组件被激活时调用。    
deactivated for kepp-alive，组件被移除时调用。    
beforeDestroy   组件销毁前嗲用。此时实例仍可用。    $el、data 都有值。实例绑定的事件还存在。
destroyed   组件销毁后调用。    $el、data 虽然都有值。但实例绑定的事件和子组件都没有了。

vue3.页面模板

vscode内选择首选项>用户代码片段

image.png
打出vue.json>并将以下代码复制进去就可以了

image.png

vue.json内代码

// {
//  // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
//  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
//  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
//  // same ids are connected.
//  // Example:
//  // "Print to console": {
//  //  "prefix": "log",
//  //  "body": [
//  //      "console.log('$1');",
//  //      "$2"
//  //  ],
//  //  "description": "Log output to console"
//  // }
// }
// 自己可以编写的vue模板格式（用""引住，一行一个逗号，）
// {
// "Print to console": {
//  "prefix": "vue",
//  "body": [
//      "<template>",
//      "  <div></div>",
//      "</template>",
//      "",
//      "<script>",
//      "export default {",
//      "  components :{",
//      "},",
//      "  name: '',",
//      "  data() {",
//      "    return {",
//      "    };",
//      "  },",
//      "  computed:{",
//      "  },",
//      "  watch:{",
//      "  },",
//      "  methods: {},",
//      "};",
//      "</script>",
//      "",
//      "<style scoped>",
//      "",
//      "</style>",
//      "",
//  ],
//  "description": "Log output to console"
//  }
//}
{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "<div>",
            "",
            "</div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "components :{",
            "},",
            "name:'',",
            "data(){",
            "return{",
            "",
            "}",
            "},",
            "computed:{",
            "",
            "},",
            "watch:{ ",
            "",
            "},",
            "methods:{",
            "",
            "},",
            "beforeCreate(){",
            "",
            "},",
            "created(){",
            "",
            "},",
            "beforeMount(){",
            "",
            "},",
            "mounted(){",
            "",
            "},",
            "beforeUpdate(){",
            "",
            "},",
            "updated(){",
            "",
            "},",
            "beforeDestroy(){",
            "",
            "},",
            "distroyed(){",
            "",
            "}",
            "}",
            "</script>",
            "",
            "<style lang='' scoped>",
            "",
            "</style>",
        ],
        "description": "Log output to console"
    }
}


// // 出来后
// <template>
//   <div>

//   </div>
// </template>

// <script>
// export default {
//   components: {},
//   name: "",
//   data() {
//     return {};
//   },
//   computed: {},
//   watch: {},
//   methods: {},
//   beforeCreate() {},
//   created() {},
//   beforeMount() {},
//   mounted() {},
//   beforeUpdate() {},
//   updated() {},
//   beforeDestroy() {},
//   distroyed() {}
// };
// </script>

// <style lang='' scoped>
// </style>

这样在.vue中打出一个vue就可以出来你所设定的模板

image.png

vue模板设置