vue3 快速掌握 Composition API 大全

setup学习传送门

1. setup函数是 Composition API
2. vue2中在一个组件中会 有data methods computed等多个属性 当组件越来越大则会增加复杂度以及维护难度， setup 则是将这些内容全部合并
3. 执行时间在beforecreate与create之间
4. 两个参数 props（父组件传递的值） context （attrs, slots, emit）
5. 需要使用的值或函数，必须return出去
6. setup中不能写this ， 因为是在create实例之前还未创建， 所以拿不到实例setup函数中， 不能调用外部的函数， 例如methods  mounted 等
7. methds 可以调用setup里面的函数
8. 默认定义的变量，页面引用后修改将不会自动重新渲染 需要借助 ref /reactive
    

ref 学习传送门

• ref  处理基础类型的 例如字符串，数字

reactive 学习传送门

• reactive 处理引用类型 例如 数组，对象。

readonly 学习传送门

• 是将通过ref 或reactive定义好的数据进行拷贝后变为仅可读的数据，不可进行修改，即无响应

toRefs  学习传送门

• toRefs接受一个参数，即一个需要响应的obj，如果接收定义的key没有则响应会失败

toRef  学习传送门

• 接受两个参数，第一个是响应的obj，第二个需要响应的key，如果自定义的key 没有则可以默认是空，继续进行响应，如果找到相应的key则根据相应的Key相应数据

computed计算属性  学习传送门

watch  学习传送门

• watch可以监听到之前的值与更改后的值

watchEffect  学习传送门

• watchEffect不行只能获取当前的值

生命周期函数 学习传送门

provide与inject 学习传送门

• provide第一个参数是key，第二个参数是value
• inject第一个参数是获取provide的key，从而获取value ，第二个值如未获取到相应的值则给一个默认值

使用ref获取dom元素 学习传送门

vuex使用介绍  学习传送门