vue3

这是一篇关于vue3的思维导图，Vue3 教程 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

vue3

• 1||| 脚手架
  • vite
    • 新一代的前端构建工具
    • 开发环境中，无需打包操作，可快速的冷启动
    • 轻量快速的热重载
    • 真正的按需编译不在等待整个应用编译完成
    • 创建项目的时候 --- npm init vite-app 【项目名称】
    • 目前还没有进行大规模的使用
  • 与vue2的不同
    • vue2不要与vue3进行混用
    • 性能的提高
    • 声明的任何东西都需要return出去，否则影响使用，包括methods,computed等
• 2||| 基本操作
  • setUp
    • 是所有的组合API
    • 数据，方法，监听，计算属性等等均在setUp中
    • 返回值
      • 返回对象（可以直接在模板中使用）
      • 渲染函数（自定义渲染函数内容）
      • setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）
    • 执行时机，在beforeCreate之前会执行一次，并且this是undefined
    • 可以有俩参数，第一个参数：props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性，第二个参数：context（上下文对象），本质是一个对象，身上有attrs，slot，emit。attrs:外部组件传值，内部组件没有声明接受。emit：分发自定义函数事件，相当于vue2 的$emit。slot：收到的插槽内容，尽量用v-slot:插槽名
  • reactive
    • 处理对象是深层次的，对象或数组类型数据
    • 数组可以通过下标直接更改
    • 定义对象类型的响应式数据
    • 通过代理对象操作源对象内部数据进行操作，基于Es6的proxy实现
  • 生命周期
    • 与setup(){}同级使用，配置项
      • beforeCreate,created
      • beforeUpdate,updated
      • beforeUnmount,unmounted
      • beforeMount,mouted
    • 组合式API的生命周期
      • 不需要beforeCreate,created
      • onBeforeMount,onMounted
      • onBeforeUpdate,onUpdated
      • onBeforeUnmount,onUnmounted
      • onActived,onDeactivated
  • 监听函数watch
    • watch是一个函数，三个参数，第一个参数是监听的内容，第二个参数是监听的回调函数，第三个参数是监听的配置项，即immediate ：true 或者deep : true
    • ref
      • 监听一个
        • 直接监听
      • 监听多个
        • 可以以数组的形式进行监听
    • reactive
      • 监听reactive定义的基本数据类型的时候，可以正确的获取到oldValue,【基本数据类型】没有必要配置deep:true
      • 监听reactive定义的对象，没有办法正确的获取oldValue,deep:true强制开启，即使第三个参数配置了{deep:false}也没有作用
      • 监听reactive定义的对象中的某个属性且这个目标监听的属性不是基本数据类型（引用数据类型），此时必须要配置deep:true,并且无法正确获取到oldValue
    • watchEffect
      • 是个函数，传入回调函数，用到定义的哪个变量就自动监听哪个变量，不需要说明监听的哪个变量，只要回调中用到的数据发生了变化，就重新执行回调
  • 计算属性 computed
    • let myComputed = computed(()=>{})
    • 简写：直接return出计算的东西(没有考虑到计算属性被修改的情况)
    • 完整写法,get（）读取，set（）修改计算属性
  • 响应式
    • 通过proxy(代理)：拦截对象中任意属性的变化，包括属性值的读写，属性的添加，属性的删除等
    • 通过reflect(反射)：对源对象的属性进行操作
  • hook函数
    • 把setup函数中使用的组合API进行封装，类似于vue2中的mixin
  • ref
    • 定义一个响应式的数据，基本类型数据
    • 可以接受基本数据类型，也可以是对象类型
    • 基本数据类型实质上是通过object.definepropoty的get和set
    • 对象类型实质上求助了reactive
    • 操作数据需要.value
• 3||| toRef与toRefs
  • toRef
    • 为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。
    • 语法：const name = toRef(person,'name')
    • 将响应式对象中的某个属性单独提供给外部使用
  • toRefs
    • 将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。
    • 语法：const name = toRefs(person)
    • 批量创建多个ref对象
• 4||| shallowReactive 与shallowRef
  • shallowReactive
    • 只处理对象最外层属性的响应式（浅响应式）
    • 何时使用：对象数据，结构较深，但变化只是外层属性变化
  • shallowRef
    • 只处理基本数据类型的响应式，不进行对象的响应式处理
    • 何时使用：对象数据，后续功能不会修改对象中的属性，而是生新的对象来替换
• 5||| readonly与shallowReadonly
  • readonly
    • 让一个响应式的数据变为只读的（深只读）
  • shallowReadonly
    • 让一个响应式数据变成只读的（浅只读）
• 6||| toRaw与markRaw
  • toRaw
    • 作用：将一个由reactive生成的响应式对象转化成普通对象
    • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面的更新
  • markRaw
    • 标记一个对象，使其永远不会再成为响应式对象
    • 应用场景：1. 有些值本不应该是响应式的，比如一些复杂的第三方类实例或者vue组件对象 2. 当渲染具有不可变数据源大列表时，跳过proxy转换可以提高性能
• 7||| customRef
  • 创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接受track和trigger函数作为参数，并应该返回一个带有get和set的对象
• 8||| provide与inject
  • 跨级组件进行传值
  • 父组件使用provide传值，子组件使用inject接受