1. 定义
维护单一功能，可复用的单个个体。
2. 结构
<template></template>
<script></script>
<style></style scoped lang='scss'>
其中scoped，只在当前组件生效。
3. 定义组件
//从vue中导入定义组件的方法，就是defineComponent
import { defineComponent,reactive } from 'vue'
//ES6导出模块，defineComponent方法，内部是一个对象。
export default defineComponent({
name:"Home",//定义组件的名称
//接收父组件的数据
props:{
},
//定义子组件
component:{
},
//setup函数，
setup(props,ctx) {
return {
}
})
4. 定义单个数据ref
（1）引入
import { defineComponent,reactive,ref } from 'vue'
(2) 定义数据并初始化
setup(props,ctx) {
let num = ref(10);
let name = ref('wuning');
return {
}
(3) 暴漏出去
setup(props,ctx) {
let num = ref(10);
let name = ref('wuning');
let arr = ref([1,2,3])//定义数组，并初始化
let obj = ref({
age:20,
})//定义对象
return {
num，//es6简写方式
name，
arr,
obj
}
（4）使用方法---插值表达式
<div>
{{name}}
{{num}}
</div>
5. 定义方法
vue3中已经没有method对象了。使用声明式定义一个函数。ES6中的知识。
(1) 定义
setup(props,ctx) {
//定义数据,并初始化
let num = ref(10)
let data = reactive({name:"wuning"})
//定义方法
let add=()=>{
//访问ref定义的数据，需用num.value的形式拿到。
//访问reactive定义的数据使用，data.name
}
//暴漏出去
return {
...toRef(data),
num,
add
}
}
数据和方法都是在setup中定义的，然后通过export导出模块。
（2）方法之间的调用
方法之间的调用，必须先定义在被调用，被掉用的函数要在调用的函数之前。
