1.我们第一步要做的就是先搭建一个Vue3.0的项目。
(1)这里我们还使用vue ui 来搭建，这是搭建项目时所选的配置。
（2）这边一定要记得选择3.0，不然创建的项目还是2.0版本的。
（3）在我们创建的项目里查看packge.json,查看我们的Vue版本是3.0的话就创建成功了。
2.接下来就是Vue3的基本使用。
- createApp函数接收一个对象参数，对象中可以包含数据模型等信息
- createApp函数的返回值就是一个vue的实例，然后就可以通过vue的实例进行一些相关操作，比如注册全局组件，注册全局指令等
// main.js
import {createApp} from 'vue';
const app = createApp({
data(){
return {
message:'hello vue3.0'
}
}
});
app.component('xxx',xxx);//注册全局组件
app.directive('xxx',xxx);//注册全局指令
app.use(xxx);//引用其他组件
app.mount('#app');
//上面是分开写的，也可以直接写成连点的形式
createApp().component().directive().use().mount('#app')
2.setup的使用
1、 beforeCreate：表示组件刚刚被创建出来，组件的data和methods还没有初始化好
Created： 表示组件刚刚被创建出来，并且组件的data和methods已经初始化好
2、setup函数是 Composition API（组合API）的入口
3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用
data() 变为 setUp()
1、生命周期的函数只能写在setUp中
2、provide/inject 只能写在setUp
3.父子组件传值
（1）父传子
在setup函数中有两个参数 第一个参数为props，第二个参数为context
props为一个对象，props接收后，内部包含了所有传递过来的prop数据，context包含了attrs，slots，emit属性，其中emit方法可以完成子传父
//父
<template>\
<div>\
<Son :msg="msg"></Son>\
</div>\
</template>\
\
<script>\
import { ref } from 'vue';\
import Son from "./son.vue";\
export default {undefined\
components: {undefined\
Son,\
},\
setup() {undefined\
const msg = ref('奥特曼')\
return {msg}\
},\
};\
</script>\
\
<style scoped>\
</style>
//子
<template>\
<div>子组件 {undefined{msg}} </div>\
</template>\
\
<script>\
export default {undefined\
props:{undefined\
msg:{undefined\
type:String,\
default:''\
}\
},\
setup(props,context){undefined\
console.log(props,context);\
}\
};\
</script>\
\
<style scoped>\
</style>
（2）子传父
注意vue2中的this.$emit 不在生效 setup函数中没有this ，而在setup第二个参数中有emit方法
setup(props,context){undefined\
context.emit('name','哈哈哈哈')\
}\
\
//结构写法\
// setup(props,{emit}){undefined\
// emit('name','哈哈哈哈')\
// }\
父
<template>\
<Son @name="name" ></Son>\
</template>\
\
setup() {undefined\
const name = (name)=>console.log(name);\
return {name}\
}, \
父传子：在setup中使用props数据 setup(props){ props就是父组件数据 }
子传父：触发自定义事件的时候emit来自 setup(props,{emit}){ emit 就是触发事件函数。
