异步组件

基础版本：
使用动态组件component + 动态加载import

高阶版本：
使用工厂函数：
可以操作细节，在异步请求过程中增加更多操作
image.png

  1. import { defineAsyncComponent } from 'vue'
  3. const AsyncComp = defineAsyncComponent({
  4.   // 工厂函数
  5.   loader: () => import('./Foo.vue'),
  6.   // 加载异步组件时要使用的组件，需要另行创建和导入
  7.   loadingComponent: LoadingComponent,
  8.   // 加载失败时要使用的组件，需要另行创建和导入
  9.   errorComponent: ErrorComponent,
  10.   // 在显示 loadingComponent 之前的延迟 | 默认值：200（单位 ms）
  11.   delay: 200,
  12.   // 如果提供了 timeout ，并且加载组件的时间超过了设定值，将显示错误组件
  13.   // 默认值：Infinity（即永不超时，单位 ms）
  14.   timeout: 3000,
  15. })     
  17. //之后再把 AsyncComp 放入 component选项中即可

mixin混入

可以理解为公共组件，同样是高度复用组件的“工具”

自定义指令directives

根据程序复杂性使用，高度复用组件，主要针对视图渲染更新

  1. export default {
  2.   bind(el,binding,vnode){
  3.     //绑定的时候
  4.     const valueOpt = binding.value
  5.     const 
  6.   },
  7.   update(el,binding,vnode){
  8.   //更新的时候
  9.   }
  10. }
  11. //el是DOM元素，常用于获取对应DOM
  12. //binding放配置，常取binding.value
  14. //全局注册directives
  15. app.directive('xxx', xxx);
  1. //组件使用：v-xxx

filter过滤器

class绑定style数组写法结合对象

<div :class ="['默认class', {'激活class': index === curIndex}]"

ref和reactive异同

  1. ref 接收内部值(inner value)返回响应式 Ref对象，reactive 返回响应式代理对象
  2. 两者均用于构造响应式数据，ref通常用于处理原始值的响应式，reactive 用于处理对象类型的响应式数据
  3. ref 返回的响应式数据在js中使用需要加上.value才能访问其值，在视图中使用会自动脱ref，不需要.value，ref可以接收对象或数组等非原始值，但内部依然是reactive实现响应式，
  4. reactive内部如果接收Ref对象会自动脱ref，但使用展开运算符…展开reactive返回的响应式对象会使其失去响应性，可以结合toRefs()将值转换为Ref对象之后再展开
  5. reactive 内部使用Proxy代理传入对象并拦截该对象各种操作，从而实现响应式。ref内部封装一个RefImpl类，并设置get value /set value ，拦截用户对值的访问，从而实现响应式