Vue 响应式

概述

参考：

• 官方文档，API 参考
• 官方文档，API 参考-组合式 API-响应式：核心

ref 与 reactive 是响应式的基础

响应式: 核心

ref()

https://cn.vuejs.org/api/reactivity-core.html#ref

ref() 函数返回一个 Ref<T = any> 接口类型的对象，该接口中只有一个名为 value 的属性，用以指向该对象的值。 Ref<T> 接口对象是 响应式、可更改 的。

let number = ref < number > 0

number 是 Ref<number> 类型的实例，Ref.value 则是该实例的值，即 0。 Ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。 如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。 若要避免这种深层次的转换，使用 shallowRef() 来替代。

computed ()

https://cn.vuejs.org/api/reactivity-core.html#computed

reactive()

https://cn.vuejs.org/api/reactivity-core.html#reactive

• readonly()
• watchEffect()
• watchPostEffect()
• watchSyncEffect()
• watch()

响应式: 工具

• isRef()
• unref()
• toRef()
• toRefs()
• isProxy()
• isReactive()
• isReadonly()

响应式: 进阶

• shallowRef()
• triggerRef()
• customRef()
• shallowReactive()
• shallowReadonly()
• toRaw()
• markRaw()
• effectScope()
• getCurrentScope()
• onScopeDispose()

生命周期钩子

• onMounted()
• onUpdated()
• onUnmounted()
• onBeforeMount()
• onBeforeUpdate()
• onBeforeUnmount()
• onErrorCaptured()
• onRenderTracked()
• onRenderTriggered()
• onActivated()
• onDeactivated()
• onServerPrefetch()