这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战
vue3.x：
//main.js文件
//变量app
这里我们可以看到，vue3的写法和vue2已经不一样了,vue3.x引入的不再试Vue构造函数了，引入的是一个名为createAPP的工厂函数
vue2.x：
//main.js
import Vue from 'vue'
import App from './App.vue
new Vue({
render:h=>h(App)
}).$mount('#app')
Vue3的组件模板结构可以没有根标签，如下：
常用Composition API (组合式API)
setup
- 理解：vue3.0中的一个新的配置项，值为一个函数
- setup是所有CompositionAPI的入口
- 组件中用到的：数据、方法等等均要配置在setup中（包括vue生命周期函数，data，计算属性，侦听器等等）
- setup函数的两种返回值：
- 若返回一个对象，则对象中的属性，方法，在模板中均可以直接使用（常用，重点关注）
- 若返回一个渲染函数，则可以自定义渲染内容
5：注意点：
- 尽量不要与vue2.x配置混用
- vue2.x配置（data，methods,computed....）中可以访问到setup中的属性、方法
- 但在setup中不能访问到vue2.x配置（data,methods...）
- 如有重名，setup优先
- setup不能是一个async函数，如果setup前面加了async关键字则setup的返回值就不再是return的对象，而是promise，模板看不到return对象中的属性就会有问题。
实操：
setup若返回一个对象，则在模板中可以直接使用，如下：
页面效果如下：
setup若返回一个渲染函数()
页面效果如下：
测试在vue3.x中写vue2的代码：
上图可知：
vue3中依然可以写vue2的代码，但是，不推荐，且当vue2中和vue3中重复时，vue3中setup优先
