学习vue3之路day5

「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」

继续学习API函数

reactive

• 作用: 定义多个数据的响应式
• const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
• 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
• 使用ref处理对象 ==> 对象会被自动reactive为proxy对象

const state = reactive({
      name: 'tom',
      age: 25,
    })
const m3 = ref({a1: 2, a2: {a3: 'abc'}})

比较Vue2与Vue3的响应式

Vue2

• 对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)

• 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

• 对象直接新添加的属性或删除已有属性, 界面不会自动更新

vue3

• 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等
• 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

计算属性与监视

computed函数 计算函数

watch函数 监视数据改变响应回调函数

生命周期

与 2.x 版本生命周期相对应的组合式 API

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

只需记住初始化用setup(), 其他不常用

toRefs

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref

reactive 对象取出的所有属性值都是非响应式的

利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性

 const state = reactive({
      foo: 'a',
      bar: 'b',
    })

    const stateAsRefs = toRefs(state)

ref页面元素

<input type="text" ref="inputRef">
const inputRef = ref<HTMLElement|null>(null)

readonly

只读对象

provide 与 inject

实现跨层级组件(祖孙)间通信

父组件provide 一个值，在子孙组件inject获取数据。

const color = ref('red')
provide('color', color) 

获取数据

const color = inject('color')

新组件

Fragment 片断

• 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中

Teleport(瞬移)

插入元素到某标签，可以是body。

vue3的基础知识已基本了解。