导图社区 vue3
这是一篇关于vue3的思维导图,Vue3 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
社区模板帮助中心,点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
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定义的基本数据类型的时候,可以正确的获取到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
定义一个响应式的数据,基本类型数据
可以接受基本数据类型,也可以是对象类型
基本数据类型实质上是通过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接受