element-plus源码学习后，我了解到多种多样的写法

news2024/11/26 4:22:43

文章封面来自于深圳湾桥，很漂亮！

本文是阅读源码之后，学习到一些新写法，平常业务开发也可以用起来。在我看来，阅读源码，不但能知道该框架的底层原理，出现bug时，可以快速排查和修复，更重要的是，阅读源码就像向优秀的人学习，掌握我们不曾了解的新知识点，看看别人是如何编写出漂亮的，可复用的代码。

操作符!.

onMounted(() => {
  // 组合在一起,!. 就是“强制执行方法,然后再访问它的返回值”。
  const items = breadcrumb.value!.querySelectorAll(`.${ns.e('item')}`)
  if (items.length) {
    items[items.length - 1].setAttribute('aria-current', 'page')
  }
})

element-plus: 只有控制到页面上行为的函数就存在于vue文件中，其他逻辑处理函数，都在ts文件中

取值和监听值变化，不使用watch

const checkedValue = computed<CascaderValue>({
  get() {
    return cloneDeep(props.modelValue) as CascaderValue
  },
  set(val) {
    emit(UPDATE_MODEL_EVENT, val)
    emit(CHANGE_EVENT, val)
    if (props.validateEvent) {
      formItem?.validate('change').catch((err) => debugWarn(err))
    }
  },
})

方法调用后面加！

// 透传
  const carouselContext = inject(carouselContextKey)!

在 JavaScript 中,方法调用后面加上感叹号 ! 通常是用来强制执行(Force execution)这个方法。以数组作为例子:- 使用数组方法时不加感叹号,它只会返回方法的结果,但不会改变数组自身:

let arr = [1, 2, 3];
let newArr = arr.map(x => x * 2);

// newArr [2, 4, 6]
// arr 还是 [1, 2, 3], 数组本身没有变化

而加上感叹号后,会修改数组自身:

let arr = [1, 2, 3];
arr.map!(x => x * 2);

// arr 变为 [2, 4, 6]
// 数组自身被修改了

这是因为,数组的 map 等方法本身是不会修改原数组的,而加上感叹号后则会强制修改数组自身。

其他数组方法同理,比如 filter、forEach、sort 等,不加感叹号只返回结果,加感叹号则修改原数组。

总的来说,感叹号 ! 被用于强制执行某个不会产生副作用的方法,产生副作用(side effect),修改调用者自身。

这一点和 Haskell 中的特写运算符(Bang pattern)! 类似,也用于产生 computations with effects。

使用感叹号需要小心,可能会影响程序的可预测性和数据不变性,但对于需要改变源数据的场景,使用感叹号可以使代码更加简洁。

透传使用symbol

provide(
      CASCADER_PANEL_INJECTION_KEY, // 透传下去，使用Symbol作为唯一值
      reactive({
        config,
        expandingNode,
        checkedNodes,
        isHoverMenu,
        initialLoaded,
        renderLabelFn,
        lazyLoad,
        expandNode,
        handleCheckChange,
      })
    )


export const CASCADER_PANEL_INJECTION_KEY: InjectionKey<ElCascaderPanelContext> =
  Symbol()

强制执行，会影响最终值

获取组件实例，调用组件自定义事件

const { emit } = getCurrentInstance()!

const model = computed({
    get() {
      return isGroup.value
        ? checkboxGroup?.modelValue?.value
        : props.modelValue ?? selfModel.value
    },

    set(val: unknown) {
      if (isGroup.value && isArray(val)) {
        isLimitExceeded.value =
          checkboxGroup?.max?.value !== undefined &&
          val.length > checkboxGroup?.max.value
        isLimitExceeded.value === false && checkboxGroup?.changeEvent?.(val)
      } else {
        emit(UPDATE_MODEL_EVENT, val)
        selfModel.value = val
      }
    },
  })

getCurrentInstance() 函数可以在 setup() 中获取到当前组件实例。
但是直接调用 getCurrentInstance() 会返回一个可选型(maybe)的实例,可能为 null。
为了确保获取到实例,使用 ! 非空断言运算符,强制转换为非空实例。
所以 getCurrentInstance()! 确保了返回的实例不会是 null。
然后使用 ES6 解构赋值语法,从实例中取出 emit 方法。
emit 方法用于在组件内部触发自定义事件。
这种方式避免了代码中出现隐式的 this,使代码更清晰可读。
是 Vue 3 Composition API 中常用的一种实例访问模式,用于在 setup() 中获取实例属性和方法。

unref与ref

unref 和 ref 都可以用来获取响应式对象的值,但是有以下几点关键区别:

unref 是一个函数,ref 是创建ref对象的方法。unref直接返回值,ref会创建一个响应式的引用对象。
unref 获取值,ref 创建值的引用。unref目的是获取值,ref是创建一个值的响应式引用。
unref 参数可以是基础值或响应式对象,ref只接受基础值创建引用。unref的参数可以是基础类型的值,也可以是ref或reactive对象,它会返回对象的值或对象本身。ref只接受基础类型的值来创建一个响应式的引用对象。
unref 使用场景是在组件逻辑中获取值,ref创建应用于模板的响应式引用。unref常用于组件逻辑中,需要获取响应式对象的原始值时使用。ref更多地在模板中使用,创建一个可以响应式跟踪的引用。

unref直接返回的值，不需要用.value访问

rAF & cAF

requestAnimationFrame 和 cancelAnimationFrame 是浏览器用来实现高性能动画的 API。它可以把每一帧的代码编排到浏览器的一次重绘中,避免频繁的重绘导致性能问题。

这两个函数在频繁重绘调用，可以减轻浏览器负担

比如：定时器

const isClient = typeof window !== "undefined";

export const rAF = (fn: () => void) =>
  isClient
    ? window.requestAnimationFrame(fn)
    : (setTimeout(fn, 16) as unknown as number)

export const cAF = (handle: number) =>
  isClient ? window.cancelAnimationFrame(handle) : clearTimeout(handle)

(event.target as HTMLElement).closest

const handleMouseDown = (event: MouseEvent) => {
  const target = (event.target as HTMLElement).closest('td')
  if (!target) return
  focusWithClick = true
}

const handleMouseUp = (event: MouseEvent) => {
  const target = (event.target as HTMLElement).closest('td')
  if (!target) return
  focusWithClick = false
}