VUE3知识点总结 之 ref reactive toRef toRefs 与源码分析(二)

简介: VUE3知识点总结 之 ref reactive toRef toRefs 与源码分析(二)

9746ea1f8ea94c51948f015ccaba04a0.png


在2.0的时候使用的是ES5 中Object.defineproperty()做的数据劫持, 不过Object.defineproperty是对所有的属性做的数据劫持, vue3 中使用ES6 proxy 进行数据代理,实现起来更加容易,并且可以对数组,对象等数据进行更深层的监视


ref 介绍


  • 可以将变量转换成响应式数据
  • 用法: const age = ref(18)
  • ref(x) 中 x 不可以是对象 { } 类型,其他类型都可以比如 数组,数字,字符串,布尔等
  • ref 可以记录 dom


reative 介绍


  • 可以将对象转换成响应式数据


ref 使用


<script setup>
import { ref } from 'vue'
const name = ref('张三')
const eleDom = ref(null)
</script>
<template>
  <p ref="eleDom">{{ name }}</p>
</template>


reative 使用


<script setup>
import { reactive, ref } from '@vue/reactivity'
const count = ref(0)
const dataList = reactive({
  count,
  arr: [],
  obj: {
    name: '吴八哥',
    age: 18
  }
})
const handleCount1Change = () => count.value++
const handleCount2Change = () => dataList.count++
const handleAgeChange = () => dataList.obj.age++
</script>


toRef 使用


<script setup>
import { reactive, toRef } from '@vue/reactivity'
const dataList = reactive({
  count: 0,
  str: '示例'
})
const count = toRef(dataList, 'count')
const handleCountChange = () => count.value++
</script>


toRefs 使用


<script setup>
import { reactive, toRefs } from '@vue/reactivity'
/* const dataList = reactive({
  count: 0,
  str: '示例'
})
let { count, str } = toRefs(dataList)
const handleCountChange = () => count.value++ */
// 封装一个函数(组合式 API 函数)
const useSomeData = () => {
  const someData = reactive({
    count: 0,
    str: '示例'
  })
  // 数据处理
  someData.count += 3
  someData.str += '123'
  // 将被外界需要的数据返回
  return toRefs(someData)
}
// 外界使用功能
let { count, str } = useSomeData()
const handleCountChange = () => count.value
</script>


Ref对象


ref的作用是提供响应式包装对象,便于利用Vue Composition API 进行函数式的组装,首先我们通过isRef函数入口,看看Vue 3.x 是如何标识ref对象的:


const isRefSymbol = Symbol()
export interface Ref<T = any> {
  // This field is necessary to allow TS to differentiate a Ref from a plain
  // object that happens to have a "value" field.
  // However, checking a symbol on an arbitrary object is much slower than
  // checking a plain property, so we use a _isRef plain property for isRef()
  // check in the actual implementation.
  // The reason for not just declaring _isRef in the interface is because we
  // don't want this internal field to leak into userland autocompletion -
  // a private symbol, on the other hand, achieves just that.
  [isRefSymbol]: true // 用一个symbol来标识ref对象,但是后面又被改成了通过_isRef属性来标识
  value: UnwrapRef<T> // 响应式包装对象的value属性,是解包装的值
}
// ...
export function isRef(r: any): r is Ref {
  // 通过_isRef属性判断一个对象是否是ref对象
  return r ? r._isRef === true : false
}


ref对象总会被挂载一个叫做_isRef的属性,所以通过_isRef这个属性是否存在就可以帮助我们判断一个对象是否是ref对象。此外,ref对象含有一个属性叫value,value的类型是UnwrapRef,下面看看UnwrapRef:


export interface ComputedRef<T = any> extends WritableComputedRef<T> {
  readonly value: UnwrapRef<T>
}
type UnwrapArray<T> = { [P in keyof T]: UnwrapRef<T[P]> }
// Recursively unwraps nested value bindings.
// 递归获取包装对象value的类型
// 因为ref不能是嵌套的ref,即value不能是一个ref对象
export type UnwrapRef<T> = {
  // 如果遇到value是computedRef类型,解套求其value的类型
  cRef: T extends ComputedRef<infer V> ? UnwrapRef<V> : T
  // 如果遇到value是Ref类型,解套求其value的类型
  ref: T extends Ref<infer V> ? UnwrapRef<V> : T
  // 如果遇到value是数组,对数组里每一项解包装
  array: T extends Array<infer V> ? Array<UnwrapRef<V>> & UnwrapArray<T> : T
  // 如果遇到value是对象,对对象每一项遍历解包装
  object: { [K in keyof T]: UnwrapRef<T[K]> }
}[T extends ComputedRef<any>
  ? 'cRef'
  : T extends Ref
    ? 'ref'
    : T extends Array<any>
      ? 'array'
      : T extends Function | CollectionTypes
        ? 'ref' // bail out on types that shouldn't be unwrapped
        : T extends object ? 'object' : 'ref']


通过上面的代码我们看到ref响应式包装对象的value的类型一定是一个解包装的对象,而不能是嵌套的ref。对于数组和对象类型,需要对其进行遍历,保证其中每项都没有嵌套ref对象,如果有嵌套的情况,需要再进行解包装


ref


下面来看ref函数,ref函数将一个普通对象转化为响应式包装对象:



export function ref<T extends Ref>(raw: T): T
export function ref<T>(raw: T): Ref<T>
export function ref<T = any>(): Ref<T>
export function ref(raw?: unknown) {
  // 已经是ref对象了,直接返回原始值
  if (isRef(raw)) {
    return raw
  }
  // 转化为ref对象
  raw = convert(raw)
  const r = {
    _isRef: true,
    get value() {
      // getter触发时,触发依赖收集,源码在effect部分,在笔者下一篇文章会有讲述
      track(r, OperationTypes.GET, 'value')
      return raw
    },
    set value(newVal) {
      // setter触发时,首先调用convert转化为ref对象
      raw = convert(newVal)
      // trigger通知deps,通知依赖这一状态的对象更新
      trigger(
        r,
        OperationTypes.SET,
        'value',
        __DEV__ ? { newValue: newVal } : void 0
      )
    }
  }
  return r
}
// convert的作用是创建响应式包装对象,这里直接使用reactive,其原理在上一节有讲过
const convert = <T extends unknown>(val: T): T =>
  isObject(val) ? reactive(val) : val


通过ref函数,我们了解到了ref的底层就是reactive,ref对象具有对应的 getter 和 setter ,getter总是返回经过convert转化后的响应式对象raw,并触发 Vue 的依赖收集,对ref对象赋值会调用setter,setter调用会通知deps,通知依赖这一状态的对象更新,并重新更新raw,raw被保存为新的响应式包装对象。


toRefs


最后我们来看toRefs,toRefs将reactive对象转换为普通对象,其中结果对象上的每个属性都是指向原始对象中相应属性的ref引用对象,这在组合函数返回响应式状态时非常有用,这样保证了开发者使用对象解构或拓展运算符不会丢失原有响应式对象的响应


export function toRefs<T extends object>(
  object: T
): { [K in keyof T]: Ref<T[K]> } {
  const ret: any = {}
  // 遍历对象的所有属性,都对其调用toProxyRef
  for (const key in object) {
    ret[key] = toProxyRef(object, key)
  }
  return ret
}
// toProxyRef相当于把对象的每个属性都变成一个包装对象,这样在结构和使用拓展运算符时,就不会丢失原有响应式对象的引用了
function toProxyRef<T extends object, K extends keyof T>(
  object: T,
  key: K
): Ref<T[K]> {
  return {
    _isRef: true,
    get value(): any {
      return object[key]
    },
    set value(newVal) {
      object[key] = newVal
    }
  } as any
}
目录
相关文章
|
3月前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
4月前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
53 2
|
4月前
|
API
vue3知识点:reactive函数
vue3知识点:reactive函数
52 1
|
4月前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
53 0
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
145 1
|
3天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
7天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
57 12
|
3天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
24天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
53 8

热门文章

最新文章