一、【Vue3】——工程结构分析&初识setupVue3组件模版结构中可以没有根标签，内部会将多个标签包裹在一个frag

本文已参与【新人创作礼】活动，一起开启掘金创作之旅。

前言：学习Vue3之前首先要知道Vue3与Vue2工程结构的区别，才方便更好的理解Vue3。其实整体上区别不大，主要浅谈一下main.js和App.vue对应vue文件的区别。

一、main.js区别

Vue3引用的是createApp工厂函数，而不是Vue2中的整个Vue构造函数。这样做实现了按需引入，工厂函数也可以直接创建应用实例对象app；
引入App组件，它是所有组件的父组件。与Vu2中一致；
创建应用实例对象app并挂载（app类似Vue2中的vm，但比vm更轻盈）；

Vue3中main.js代码展示

// 一：引入createApp工厂函数
import { createApp } from 'vue'
// 二：引入App组件
import App from './App.vue'
// 三：创建应用实例对象app并挂载（app类似vm，但比vm更轻盈）
// createApp(App).mount('#app')
// 或者
const app = createApp(App)
app.mount('#app')

Vue2中main.js代码展示

// 一：引入Vue构造函数
import Vue from 'vue' 
// 二：引入App组件，它是所有组件的父组件
import App from './App.vue' 
//三： 创建vue实例对象vm并挂载
new Vue({
    el:'#app',
    render:h => h(App), // 将App组件放入容器中
})
// 或者
const vm = new Vue({
    components,
    render: h => h(App)
})
vm.$mount('#app')

二、App.vue区别

Vue3组件模版结构中可以没有根标签，内部会将多个标签包裹在一个fragment虚拟元素中。（在浏览器扩展程序中可以看到）；

<template>
  <!-- Vue3组件模版结构中可以没有根标签，内部会将多个标签包裹在一个fragment虚拟元素中 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <h1>Welcome to Your Vue.js App</h1>
  <h2>名称：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <button @click="handleClick">点击</button>
  <button @click="test">测试vue2</button>
</template>

Vu3写法：组件所用的数据、方法均配置在setup中，并进行返回直接在模版中使用。setup是所有Composition API（组合API） “ 表演的舞台 ”

setup () {
    let name = '小花' // 暂不考虑响应式
    function handleClick () {
      alert('Welcome to Your Vue3.js App')
    }
    return {
      name,
      handleClick
    }
  }

Vue2写法：数据和方法分别放在data和methods中

// vue2形式的写法，数据和方法分别放在data和methods中
  data () {
    return {
      age:18
    }
  },
  methods : {
    test () {
      // Vue2中可以使用Vue3setup配置中的(data,methods,components)等，但setup中不能访问到Vue2配置
      this.handleClick()
      console.log('name',this.name)
    }
  },

注：尽量不要与Vue2.x配置混用

Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
如果有重名, setup优先。