VUE-someUtils

动态导入组件

• {component: () => import(`@/views${child.component}`)}
  

计算属性稳定性

• <script>
  //由于每次都会创建一个新对象，因此从技术上讲，新旧值始终不同。即使 isEven 属性保持不变，Vue 也无法知道，除非它对旧值和新值进行深度比较。这种比较可能代价高昂，并不值得。
  //相反，我们可以通过手动比较新旧值来优化。如果我们知道没有变化，则有条件地返回旧值：
  const computedObj = computed((oldValue) => {
    const newValue = {
      isEven: count.value % 2 === 0
    }
    if (oldValue && oldValue.isEven === newValue.isEven) {
      return oldValue
    }
    return newValue
  })
  </script>
  

组合式函数/无渲染组件使用

• // mouse.js
  import { ref, onMounted, onUnmounted } from 'vue'
  
  // 按照惯例，组合式函数名以“use”开头
  export function useMouse() {
    // 被组合式函数封装和管理的状态
    const x = ref(0)
    const y = ref(0)
  
    // 组合式函数可以随时更改其状态。
    function update(event) {
      x.value = event.pageX
      y.value = event.pageY
    }
  
    // 一个组合式函数也可以挂靠在所属组件的生命周期上
    // 来启动和卸载副作用
    onMounted(() => window.addEventListener('mousemove', update))
    onUnmounted(() => window.removeEventListener('mousemove', update))
  
    // 通过返回值暴露所管理的状态
    return { x, y }
  }
  

• <script setup>
  import { useMouse } from './mouse.js'
  
  const { x, y } = useMouse()
  </script>
  
  <template>Mouse position is at: {{ x }}, {{ y }}</template>