vue3学习笔记——第二章1. 组合式API1. provide与inject2. 生命周期钩子2. 响应式API1. toRef和toRefs函数1. toRef2. toRefs2. readonly和shallowReadonly函数1. readonly2. shallowReadonly3. shallowRef和shallowReactive函数1. shallowRef2. shallowReactive4. toRaw和markRaw函数1. toRaw请谨慎使用2. markRaw3. customRef5. 响应式数据的判断1. 组合式API1. provide与inject官方文档provide 和 inject 启用依赖注入。这两者只能在使用当前活动实例的 setup() 期间被调用。作用实现祖组件和后代组件间通信两级以上使用方式祖组件使用 provide 提供数据后代组件使用 inject 接受数据// 祖组件使用provide提供数据 let person wmh provide(person, person) // 后代组件使用inject接收数据 let person inject(person)2. 生命周期钩子可以通过直接导入 onX 函数来注册生命周期钩子X表示原有选项式 APIimport { onMounted, onUpdated, onUnmounted } from vue const MyComponent { setup() { onMounted(() { console.log(mounted!) }) onUpdated(() { console.log(updated!) }) onUnmounted(() { console.log(unmounted!) }) } }2. 响应式API1. 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也会返回一个可用的ref2. toRefs官方文档将响应式对象转换为普通对象ref对象其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。const state reactive({ foo: 1, bar: 2 }) const stateAsRefs toRefs(state) /* stateAsRefs 的类型: { foo: Refnumber, bar: Refnumber } */ // ref 和原始 property 已经“链接”起来了 state.foo console.log(stateAsRefs.foo.value) // 2 stateAsRefs.foo.value console.log(state.foo) // 32. 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) // true2. markRaw官方文档标记一个对象使其永远不会转换为 proxy返回对象本身。const foo markRaw({}) console.log(isReactive(reactive(foo))) // false // 嵌套在其他响应式对象中时也可以使用 const bar reactive({ foo }) console.log(isReactive(bar.foo)) // falsemarkRaw 和上述的 shallowXXX API 使你可以有选择地退出默认的深度响应式/只读转换模式并将原始的未被代理的对象嵌入状态图中。3. customRef官方文档创建一个自定义的 ref并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数该函数接收 track 和 trigger 函数作为参数并且应该返回一个带有 get 和 set 的对象。典例使用自定义 ref 通过 v-model 实现 debounce 的示例input v-modeltext / 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
vue3学习笔记 - P2
vue3学习笔记——第二章1. 组合式API1. provide与inject2. 生命周期钩子2. 响应式API1. toRef和toRefs函数1. toRef2. toRefs2. readonly和shallowReadonly函数1. readonly2. shallowReadonly3. shallowRef和shallowReactive函数1. shallowRef2. shallowReactive4. toRaw和markRaw函数1. toRaw请谨慎使用2. markRaw3. customRef5. 响应式数据的判断1. 组合式API1. provide与inject官方文档provide 和 inject 启用依赖注入。这两者只能在使用当前活动实例的 setup() 期间被调用。作用实现祖组件和后代组件间通信两级以上使用方式祖组件使用 provide 提供数据后代组件使用 inject 接受数据// 祖组件使用provide提供数据 let person wmh provide(person, person) // 后代组件使用inject接收数据 let person inject(person)2. 生命周期钩子可以通过直接导入 onX 函数来注册生命周期钩子X表示原有选项式 APIimport { onMounted, onUpdated, onUnmounted } from vue const MyComponent { setup() { onMounted(() { console.log(mounted!) }) onUpdated(() { console.log(updated!) }) onUnmounted(() { console.log(unmounted!) }) } }2. 响应式API1. 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也会返回一个可用的ref2. toRefs官方文档将响应式对象转换为普通对象ref对象其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。const state reactive({ foo: 1, bar: 2 }) const stateAsRefs toRefs(state) /* stateAsRefs 的类型: { foo: Refnumber, bar: Refnumber } */ // ref 和原始 property 已经“链接”起来了 state.foo console.log(stateAsRefs.foo.value) // 2 stateAsRefs.foo.value console.log(state.foo) // 32. 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) // true2. markRaw官方文档标记一个对象使其永远不会转换为 proxy返回对象本身。const foo markRaw({}) console.log(isReactive(reactive(foo))) // false // 嵌套在其他响应式对象中时也可以使用 const bar reactive({ foo }) console.log(isReactive(bar.foo)) // falsemarkRaw 和上述的 shallowXXX API 使你可以有选择地退出默认的深度响应式/只读转换模式并将原始的未被代理的对象嵌入状态图中。3. customRef官方文档创建一个自定义的 ref并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数该函数接收 track 和 trigger 函数作为参数并且应该返回一个带有 get 和 set 的对象。典例使用自定义 ref 通过 v-model 实现 debounce 的示例input v-modeltext / 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
