vue3知识点大全

选项api和组合式api

1、options API:在对应的属性中编写对应的功能模块；比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变

缺点：实现一个功能时，功能对应的代码逻辑会被拆分到各个属性中，当组件复杂的时候 ，逻辑关注点的列表就会增长，同一个功能的逻辑就会被拆分的很分散，这种碎片化的代码使得理解和维护这个都复杂的组件会很困难，并且隐藏了潜在的逻辑问题，当处理单个逻辑关注点时，需要不断地跳到相应的代码块中

2、composition API：将同一个逻辑关注点相关的代码收集在一起

setup函数

1. setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）
2. setup函数只会在组件初始化的时候执行一次
3. setup函数在beforeCreate生命周期钩子执行之前执行，this不指向当前实例

选项式api

reactive是一个函数，接收一个普通的对象传入，把对象数据转化为响应式对象并返回

ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象，在setup函数中使用ref结果，需要通过.value访问，模板中使用不需要加.value

computed根据现有响应式数据经过一定的计算得到全新的数据

watch：基于响应式数据的变化执行回调逻辑，和vue2中的watch的功能一致

组件通信

在vue3的组合式API中，和vue2通信方式一致：父传子是通过prop进行传入，子传父通过调用自定义事件完成

1. setup函数提供俩个参数，第一个参数为props，第二个参数为一个对象context
2. props为一个对象，内部包含了父组件传递过来的所有prop数据，context对象包含了emit属性，其中的emit可以触发自定义事件的执行从而完成子传父

App.vue

Children.vue

provide 和 inject

1. 顶层组件在setup方法中使用provide函数提供数据
   provide(‘key’，数据)
2. 任何底层组件在setup方法中使用inject函数获取数据
   const data = inject(‘key’)

App.vue

grandSon.vue

provide默认情况下传递的数据不是响应式的，也就是如果对provide提供的数据进行修改，并不能响应式的影响到底层组件使用数据的地方，如果想要传递响应数据也非常简单，只需要将传递的数据使用ref或者reactive生成即可