Vue3 第五节 一些组合式API和其他改变

1.provide和inject

2.响应式数据判断

3.Composition API的优势

4.新的组件

5.其他改变

一.provide和inject

作用：实现祖与后代组件间通信

套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据

（1）在祖组件中 

（2）后代组件中

 （3）代码汇总

① App.vue

 ② Child.vue

③ Son.vue

二.响应式数据判断

• isRef:检查一个值是否为一个ref对象
• isReactive:检查一个对象是否由reactive创建的响应式代理
• isReadonly:检查一个对象是否是由readonly创建的只读代理
• isProxy:检查一个对象是否是由reactive或者readonly方法创建的代理

三.Composition API的优势

① 传统optionAPI中，新增或者修改一个需求，就需要分别在data, methods，computed里修改

不集中

② 组合式API更加优雅的组织我们的代码，函数，让相关功能的代码更加有序的组织在一起

四.新的组件

（1）Fragment

• 在Vue2中，组件必须有一个根标签
• 在Vue3中，组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
• 好处：减少标签层级，减小内存占用

（2）Teleport

• 是一种能够将我们的组件html结构移动到指定位置的技术
• 使用

 代码：

Child.vue

Dialog.vue

Son.vue

App.vue

（3）Suspense 

• 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
• Suspense中提供两个插槽，第一个default插槽中放加载的组件，第二个fallback中放额外渲染的内容，如果网速比较慢，组件加载不出来的时候，会展示额外渲染的内容

 五.其他改变

① 全局API的转移

• Vue2.x有很多全局API和配置，Vue3.0对这些API做出了调整，将全局的API，即：Vue.xxx调整到应用实例（app）上

2.x 全局 API（Vue）	3.x 实例 API (app)
Vue.config.xxxx	app.config.xxxx
Vue.config.productionTip	移除
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

② 其他改变

• data选项影适中被声明为一个函数
• 过渡类名的更改

- - Vue2.x写法

    ```css
    .v-enter,
    .v-leave-to {
      opacity: 0;
    }
    .v-leave,
    .v-enter-to {
      opacity: 1;
    }
    ```

  - Vue3.x写法

    ```css
    .v-enter-from,
    .v-leave-to {
      opacity: 0;
    }
    
    .v-leave-from,
    .v-enter-to {
      opacity: 1;
    }
    ```

- 

• 移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes

• 移除v-on.native修饰符

- - 父组件中绑定事件

    ```vue
    
    ```

  - 子组件中声明自定义事件

    ```vue
    
    ```

- 

• 移除过滤器（filter）

 过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是         JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器