Vue3 ElementUI TypeScript 设置 style 属性类型检查失败解决方案

这样可以避免警告，并且更符合 Vue 的样式绑定规范。

Vue 3 实用代码技巧

1. 组合式 API 技巧

// 使用 reactive 替代多个 ref
const state = reactive({ count: 0, name: 'Vue 3', isActive: true })
// 使用 toRefs 解构保持响应式
const { count, name } = toRefs(state)

2. 组件通信技巧

// 父子组件通信 - defineProps & defineEmits (script setup)
const props = defineProps({ title: String, value: Number })
const emit = defineEmits(['update:value'])
emit('update:value', newValue)

// 依赖注入 - provide/inject
const key = Symbol()
provide(key, { data: '共享数据' })
const injectedData = inject(key)

3. 模板技巧

<!-- 动态组件 -->
<component :is="currentComponent"/>
<!-- 条件渲染优化 -->
<template v-if="isLoading">加载中...</template>
<template v-else-if="isEmpty">暂无数据</template>
<template v-else>显示内容</template>
<!-- 样式绑定技巧 -->
<div :class="['base-class', { active: isActive }]"/>
<div :style="{ '--custom-height': height + 'px' }"/>

4. 性能优化技巧

// 计算属性缓存
const fullName = computed(() => `${firstName.value}${lastName.value}`)
// 防抖处理
import { debounce } from 'lodash-es'
const handleInput = debounce(() => {
  // 处理逻辑
}, 300)
// 列表渲染优化
<ul>
  <li v-for="item in list" :key="item.id">{{ item.text }}</li>
</ul>

5. 组合式函数技巧

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'
export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  const update = (e) => {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  return { x, y }
}
// 在组件中使用
const { x, y } = useMouse()

6. 生命周期技巧

// 组合式 API 生命周期
onMounted(() => { console.log('组件挂载') })
onUpdated(() => { console.log('组件更新') })
onUnmounted(() => { console.log('组件卸载') })
// 使用 watchEffect 自动清理副作用
watchEffect((onCleanup) => {
  const timer = setTimeout(() => {
    // 执行操作
  }, 1000)
  onCleanup(() => clearTimeout(timer))
})

7. 路由技巧 (Vue Router)

// 路由导航守卫
import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    return confirm('确定要离开吗？未保存的更改将会丢失')
  }
})
// 路由参数监听
watch(() => route.params.id, (newId) => {
  fetchData(newId)
}, { immediate: true })

8. 状态管理 (Pinia) 技巧

// store/user.js
export const useUserStore = defineStore('user', {
  state: () => ({ name: '', age: 0 }),
  getters: {
    isAdult: (state) => state.age >= 18
  },
  actions: {
    async fetchUser() {
      const user = await api.getUser()
      this.name = user.name
      this.age = user.age
    }
  }
})
// 在组件中使用
const userStore = useUserStore()
userStore.fetchUser()

9. 调试技巧

// 开发环境调试
import { ref } from 'vue'
const debugData = ref(null)
// 在模板中添加调试按钮
<button @click="console.log(debugData)">调试</button>
// 使用 Chrome 的 Vue Devtools 插件