vue3学习笔记 - P2

1. 组合式API

1. provide与inject

• 官方文档：provide 和 inject 启用依赖注入。这两者只能在使用当前活动实例的 setup() 期间被调用。
• 作用：实现祖组件和后代组件间通信（两级以上）
• 使用方式：祖组件使用 provide 提供数据；后代组件使用 inject 接受数据

// 祖组件使用provide提供数据 let person = 'wmh' provide('person', person) // 后代组件使用inject接收数据 let person = inject('person')

2. 生命周期钩子

可以通过直接导入 onX 函数来注册生命周期钩子：（X表示原有选项式 API）

import { onMounted, onUpdated, onUnmounted } from 'vue' const MyComponent = { setup() { onMounted(() => { console.log('mounted!') }) onUpdated(() => { console.log('updated!') }) onUnmounted(() => { console.log('unmounted!') }) } }

2. 响应式API

1. toRef和toRefs函数

1. toRef

• 官方文档：可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

import { toRef } from 'vue'

• 简单说：创建一个ref对象，其value值指向另一个对象的某个属性，这两个值互相联系

let state = reactive({ foo: 1, bar: 2 }) let fooRef = toRef(state, 'foo') fooRef.value++ console.log(state.foo) // 输出：2 state.foo++ console.log(fooRef.value) // 输出：3

应用场景：需要将响应式对象中的某个值单独提供给外部，或是提供给某个方法时

useSomeFeature(toRef(state, 'foo'))

需要注意的是，即使源property（例如上述的state.foo）不存在，toRef也会返回一个可用的ref

2. toRefs

• 官方文档：将响应式对象转换为普通对象（ref对象），其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。

const state = reactive({ foo: 1, bar: 2 }) const stateAsRefs = toRefs(state) /* stateAsRefs 的类型: { foo: Ref<number>, bar: Ref<number> } */ // ref 和原始 property 已经“链接”起来了 state.foo++ console.log(stateAsRefs.foo.value) // 2 stateAsRefs.foo.value++ console.log(state.foo) // 3

2. readonly和shallowReadonly函数

1. readonly

• 官方文档：接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理。只读代理是深层的：任何被访问的嵌套 property 也是只读的。

import { readonly, shallowReadonly } from 'vue'

• 理解：包裹一个响应式数据返回该数据的只读代理

const original = reactive({ count: 0 }) const copy = readonly(original) // 变更 original 正常执行 original.count++ // 变更副本将失败并导致警告 copy.count++ // 警告!

只读代理是深层的：任何被访问的嵌套 property 也是只读的。

2. shallowReadonly

• 官方文档：创建一个 proxy，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换 (暴露原始值)。

const state = shallowReadonly({ foo: 1, nested: { bar: 2 } }) // 改变 state 本身的 property 将失败 state.foo++ // ...但适用于嵌套对象 isReadonly(state.nested) // false state.nested.bar++ // 正常执行

• 理解：浅层的readonly，只会影响源数据自身的property，不影响嵌套对象

3. shallowRef和shallowReactive函数

1. shallowRef

• 官方文档：创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的。
• 理解：只处理基本类型的响应式，不进行对象的响应式处理

2. shallowReactive

• 官方文档：创建一个响应式代理，它跟踪其自身 property 的响应性，但不执行嵌套对象的深层响应式转换 (暴露原始值)。
• 理解：只处理对象最外层的响应式（浅响应式）

const state = shallowReactive({ foo: 1, nested: { bar: 2 } }) // 改变 state 本身的性质是响应式的 state.foo++ // ...但是不转换嵌套对象 isReactive(state.nested) // false state.nested.bar++ // 非响应式

4. toRaw和markRaw函数

1. toRaw（请谨慎使用）

• 官方文档：返回 reactive 或 readonly 代理的原始对象。

import { toRaw, markRaw } from 'vue'

• 理解：将一个由 reactive 或 readonly 生成的响应式对象转为普通对象，对这个普通对象的所有操作，不会引起页面更新（数据会发生改变）

const foo = {} const reactiveFoo = reactive(foo) console.log(toRaw(reactiveFoo) === foo) // true

2. markRaw

• 官方文档：标记一个对象，使其永远不会转换为 proxy，返回对象本身。

const foo = markRaw({}) console.log(isReactive(reactive(foo))) // false // 嵌套在其他响应式对象中时也可以使用 const bar = reactive({ foo }) console.log(isReactive(bar.foo)) // false

markRaw 和上述的 shallowXXX API 使你可以有选择地退出默认的深度响应式/只读转换模式，并将原始的，未被代理的对象嵌入状态图中。

3. customRef

• 官方文档：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。
• 典例：使用自定义 ref 通过 v-model 实现 debounce 的示例：

<input v-model="text" /> function useDebouncedRef(value, delay = 200) { let timeout //定义延迟 return customRef((track, trigger) => { return { get() { track() return value }, set(newValue) { clearTimeout(timeout) timeout = setTimeout(() => { value = newValue trigger() }, delay) } } }) } export default { setup() { return { text: useDebouncedRef('hello') } } }

5. 响应式数据的判断

• isRef：判断一个值是否为一个ref对象
• isReactive：判断一个对象是否是由Reactive创建的响应式代理
• isReadonly：判断一个对象是否是由readonly创建的响应式代理
• isProxy：判断一个对象是否是由Reactive或readonly创建的响应式代理

let name = ref('wmh') isRef(name) // true isReactive(name) // false