1.入口：setup
setup中的数据和方法必须return出去，模板才能使用
<script>
export default {setup () {console.log('setup');const message = 'this is a message'const logMessage = () => {console.log(message);}return {message,logMessage}},beforeCreate() {console.log('beforecreate');}
}
</script><template><div>This is div{{ message }}<button @click="logMessage">log</button></div>
</template>但是定义一个数据就要手动导出一次，未免太麻烦了。因此vue3加入语法糖
下面是简化后的代码：
<script setup>
const message = 'this is a message'
const logMessage = () => {console.log(message)
}
</script>2.reactive 和 ref函数
都用于生成响应式数据，但是reactive只能接收对象类型，ref可以接受对象或者简单类型
//导入函数
import { reactive } from 'vue';//传入一个对象类型的参数 变量接收
const state = reactive ({count:0
})在模板中调用：
<button>{{ state.count }}</button>ref用法相同，但是在计数器案例上，对自增的操作不太一样
const setCount = () => {state.count++,count1.value++
}对象.属性是reactive的操作，变量.value是ref的操作（本质还是把变量当做对象来处理的）
3.computed
计算属性，基本思想和vue2一样，不过是在组合式API下写法变化了。
import { computed } from 'vue';const list = ref([1,2,3,4,5,6,7,8])
const computedList = computed(()=>{return list.value.filter(item => item>2)
}) <div>原始响应式数组-{{ list }}计算属性数组-{{ computedList }}</div>小案例是使用filter函数计算出大于2的元素。
为了验证其是响应式，再添加一个定时器
setTimeout(()=>{list.value.push(9,10)
},3000)
4.watch
侦听器，作用：侦听数据变化，数据变化时执行回调函数
import { watch } from 'vue';
const count2 = ref(0)watch(count2,(newValue,oldValue)=> {console.log(`count2发生变化，旧值为${oldValue},新值为${newValue}`);})模板中配合计数器使用
侦听多个数据：
const count2 = ref(0)
const count3 = ref(0)watch([count2,count3],([newCount2,newCount3],[oldCount2,oldCount3])=> {console.log('count2 or count3 变化了',[newCount2,newCount3],[oldCount2,oldCount3]);})immediate
在侦听器创建时立即执行回调，响应式数据变化时也执行回调
比如光标聚焦到搜索框时就出现下拉列表，输入东西后就会变化
const count = ref(0)
const setCount = () => {count.value++
}watch(count,()=> {console.log('count变化了');
},{immediate:true
})这个demo执行时，还没有点击count，控制台会先打印出count变化了
deep
深度侦听。首先，watch的默认机制：通过watch监听的ref对象默认是浅层侦听，直接修改嵌套的对象属性不会出发回调函数执行，需要开启deep。
比如直接在控制台修改上面count的值：
给count赋值为3时，不会触发count变化了，点击按钮让count++才会触发.
const state = ref({ count:0 })watch(state,()=> {console.log('count变化了');
},{deep:true
})const changeStateByCount = () => {state.value.count++
}刚开始不加deep时，点击按钮控制台不会打印，加上后就可以打印了，这就是用了deep监听
缺点就是deep开启后会侦听整个对象，就是比如state有两个属性，一个是count，一个是age，但是我只想侦听age，不管count变化情况。
这时候我想到把watch的第一个属性改成state.value.age
接着就给我报错了，它说 接受的参数不符合要求，只能接受一个方法 ，整个ref对象,一个reactive对象或者元素是这几个类型的数组。所以不能接收对象里面的一个属性。但是vue有解决办法：
watch(()=>state.value.age,()=>console.log('count变化了')
)第一个参数不能是对象的属性，但他可以是函数的返回值，让函数返回 对象的属性不就行了吗
这样就可以侦听某个属性了。
5.vue3的生命周期函数API
| 选项式API | 组合式API |
| beforeCreate/created | setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeUnmount | onBeforeUnmount |
| unmounted | onUnmounted |
import { onMounted } from 'vue'
onMounted(()=> {console.log('组件挂载完毕，mounted执行了');
})6.父子通信
父传子
1.父组件中给子组件绑定属性
2.子组件内部通过props选项接收
下面是son的vue文件：
这是father的：
就是import引入son的组件。通过在标签里面赋值来传给儿子，儿子在defineProps中定义这么一个变量来接收父亲传过来的数据。
如何传入响应式数据：
<SonCom message="666666666" :count = "count"/>在响应式数据前面加冒号。
子传父
1.父组件中给子组件标签通过@绑定事件
2.子组件内部通过$emit方法触发事件
son：
father：
7.模板引用
通过ref标识获取真实的DOM对象或者组件实例对象
defineExpose()
默认情况下语法糖<script setup>不会把组件内部的属性和方法给父最组件访问，可以通过defineExpose()暴露子组件的属性和方法。
获取模板引用的时机是：组件挂载完毕后
8.provide和inject
作用：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信
跨层传递普通数据：
1.顶层组件通过provide提供数据
2.底层组件通过inject获取数据
