vue3开发备忘录（持续更新）

Codegen node is missing for element/if/for node. Apply appropriate transform报错处理

导致此问题的原因有两个：

1.原因：只有v-else，没有v-if。

   解决：删除v-else，或补齐v-if。

2.原因：组件插槽使用<template #default></template>标签包裹。

   解决：用其他标签替换template标签。

解决项目启动后报错：[plugin:unplugin-element-plus] code.replaceAll is not a function

原因：node版本与unplugin-element-plus依赖版本不兼容

解决：升级node版本至16.20.1

组合式函数封装技巧

• 返回值如果是对象，一般在函数中通过 reactive 创建一个对象，最后通过 toRefs 导出，这样做可以产生任意多个可以解构的响应式对象，以免在解构返回值时丢失响应性。

toRefs的作用是将一个响应式对象转换为普通对象，这个普通对象的属性变成了对原始对象属性的响应式引用。这意味着，当修改这些响应式引用的属性时，不仅引用的视图会更新，而且原始响应式对象中的相应属性值也会同步更新。这个功能特别适用于需要将响应式对象中的某个属性单独提供给外部使用的场景。此外，toRefs可以批量创建多个响应式引用的对象，而不是一个个手动创建。

// usePaginaion.js
import { toRefs } from 'vue'

const usePaginaion = () => {
  const pagination = reactive({
    page: 1,
    total: 0
  })

  return {...toRefs(pagination)}
}

// paginaion.vue
const { page, total } = usePagination()

• 为了减少隐患，利用 effectScope 和 onScopeDispose 来统一收集副作用，并且在需要的时候去统一清除副作用

举个栗子，我们封装一个监听鼠标位置的组合式API：

import { onUnmounted, ref } from 'vue'

const useMouse = () => {
  const x = ref(0)
  const y = ref(0)

  const handler = ({x, y}) =>{
    x.value = x
    y.value = y
  }

  window.addEventListener('mousemove', handler)
  onUnmounted(() => window.removeEventListener('mousemove', handler))

  return {x, y}
}

但是如果在页面里调用多次的话，那么就会在 window 上添加重复的监听事件，可能会导致性能问题，所以更优雅的做法是，无论页面里调用多少次 useMouse，我们只在 window 上添加一个监听事件。

import { effectScope, onscopeDispose, ref } from 'vue'

const useMouse = () => {
  const x = ref(0)
  const y = ref(0)

  const handler = ({x, y}) =>{
    x.value = x
    y.value = y
  }

  window.addEventListener('mousemove', handler)
  onScopeDispose(() => window.removeEventListener('mousemove', handler))

  return {x, y}
}

const clearComposableEffect = composable => {
  let subscribers = 0
  let status = null
  let scope = null

  const dispose = () => {
    if (scope && --subscribers <= 0) {
      scope.stop()
      status = null
      scope = null
    }
  }

  return (...args) => {
    subscribers++
    if (!status) {
      scope = effectScope(true)
      status = scope.run(() => composable(...args))
    }
    onscopeDispose(dispose)
    return status
  }
}

export default clearComposableEffect(useMouse)