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）方法之间的调用
方法之间的调用，必须先定义在被调用，被掉用的函数要在调用的函数之前。