VUE3使用小技巧

1、 逻辑复用

// useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  
  return { count, increment, decrement }
}

// 组件中使用
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter(10)
    return { count, increment }
  }
}

2、 生命周期钩子

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    onUnmounted(() => {
      console.log('组件已卸载')
    })
  }
}

3、 生命周期钩子

import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'Vue 3',
      version: '3.0'
    })
    
    // 使用toRefs保持响应性
    return { ...toRefs(state) }
  }
}

4、 计算属性优化

import { computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')
    
    // 缓存计算结果
    const fullName = computed(() => `${firstName.value} ${lastName.value}`)
    
    return { fullName }
  }
}

5、 多根节点

<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

6、 动态组件

<component :is="currentComponent" />

7、指令简写

<div v-bind="objectOfAttrs"></div>
<div v-on="objectOfListeners"></div>

8、v-memo

<div v-memo="[valueA, valueB]">
  <!-- 只有当valueA或valueB变化时才会更新 -->
  {{ valueA }} {{ valueB }}
</div>

9、懒加载组件

import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

10、组合式API类型

import { ref } from 'vue'

export function useCounter() {
  const count = ref<number>(0)
  
  return { count }
}

11、使用provide/inject共享状态

// 父组件
import { provide, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })
    provide('sharedState', state)
  }
}

// 子组件
import { inject } from 'vue'

export default {
  setup() {
    const state = inject('sharedState')
    return { state }
  }
}

12、简易状态管理

// store.js
import { reactive } from 'vue'

export const store = reactive({
  count: 0,
  increment() {
    this.count++
  }
})

// 组件中使用
import { store } from './store'

export default {
  setup() {
    return { store }
  }
}

13、路由守卫

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

export default {
  setup() {
    onBeforeRouteLeave((to, from) => {
      // 离开路由前的逻辑
    })
    
    onBeforeRouteUpdate((to, from) => {
      // 路由更新时的逻辑
    })
  }
}

14、组合式API中使用路由

import { useRoute, useRouter } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    const goHome = () => router.push('/')
    
    return { route, goHome }
  }
}

15、调试响应式数据

import { isRef, isReactive, isReadonly, toRaw } from 'vue'

const state = reactive({ count: 0 })

console.log(isReactive(state)) // true
console.log(toRaw(state)) // 获取原始对象

16、渲染函数调试

import { h } from 'vue'

export default {
  render() {
    return h('div', { class: 'debug' }, [
      h('pre', JSON.stringify(this.$props, null, 2))
    ])
  }
}