Vue技巧

一、响应式系统进阶

1. 精准控制响应式追踪

scss 复制代码
import { effectScope, onScopeDispose } from 'vue'

// 创建独立作用域
const scope = effectScope()

scope.run(() => {
  const state = reactive({ count: 0 })
  watchEffect(() => console.log(state.count))
})

// 组件卸载时自动清理
onScopeDispose(() => scope.stop())

场景 :管理复杂组件的副作用集合
优势:批量停止侦听器,避免内存泄漏

2. 非响应式数据优化

arduino 复制代码
const heavyObject = markRaw({
  // 10万条数据的静态配置
  bigData: [...Array(100000).keys()]
})

// 在响应式系统中使用
const state = reactive({
  config: heavyObject, // 不会被代理
  active: true
})

效果:减少不必要的响应式代理开销

二、模板引擎黑科技

1. 动态CSS变量绑定

xml 复制代码
<template>
  <div :style="{
    '--progress': `${progress}%`,
    '--theme-color': themeColor
  }">
    <div class="progress-bar" />
  </div>
</template>

<style scoped>
.progress-bar {
  width: var(--progress);
  background: var(--theme-color);
}
</style>

创新点:JS与CSS变量的实时联动

2. 高阶v-model用法

xml 复制代码
<!-- 自定义多v-model组件 -->
<UserForm 
  v-model:name="userName"
  v-model:age="userAge"
  v-model:role="userRole"
/>

<!-- 子组件实现 -->
<script setup>
defineProps(['name', 'age', 'role'])
defineEmits(['update:name', 'update:age', 'update:role'])
</script>

优势:支持多个双向绑定参数

三、组件模式进阶

1. 动态组件加载器

javascript 复制代码
// 智能组件加载器
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  timeout: 3000, // 超时时间
  suspensible: false, // 禁用Suspense
  onError(error, retry) {
    if (error.message.includes('fetch')) {
      retry() // 网络错误自动重试
    }
  }
})

场景:优化大型应用的组件加载体验


2. 组件元编程

javascript 复制代码
// 自动注册组件配置
const setupComponent = (options) => {
  return defineComponent({
    ...options,
    setup(props, ctx) {
      // 统一注入逻辑
      const theme = inject('theme')
      return options.setup?.(props, { ...ctx, theme }) 
    }
  })
}

// 使用示例
export default setupComponent({
  props: { /* ... */ },
  setup(props, { theme }) {
    // 可直接使用注入的theme
  }
})

优势:实现跨组件的统一逻辑封装

四、TypeScript深度集成

1. 类型安全的Provide/Inject

typescript 复制代码
// types.ts
interface InjectionKey<T> extends Symbol {}
const ThemeKey: InjectionKey<Theme> = Symbol()

// 提供者
provide(ThemeKey, { color: '#42b983' })

// 消费者
const theme = inject(ThemeKey) // 自动推断类型

优势:避免字符串注入的类型安全问题


2. 复杂Props类型推导

scala 复制代码
type Props<T extends string> = {
  data: Record<T, any>
  primaryKey: T
}

defineProps<Props<'id' | 'code'>>() // 自动校验data包含id/code字段

五、性能调优秘籍

1. 虚拟滚动优化器

xml 复制代码
<template>
  <div class="viewport" @scroll="handleScroll">
    <div class="scroll-list" :style="{ height: totalHeight }">
      <div 
        v-for="item in visibleItems" 
        :key="item.id"
        :style="{ transform: `translateY(${item.offset}px)` }"
      >
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script setup>
// 计算可见项算法
const visibleItems = computed(() => {
  const start = Math.floor(scrollY.value / itemHeight)
  return data.slice(start, start + visibleCount)
})
</script>

性能提升:万级数据列表内存占用减少90%


2. 编译时优化配置

php 复制代码
// vite.config.js
export default defineConfig({
  plugins: [vue({
    reactivityTransform: true, // 启用响应式语法糖
    template: {
      compilerOptions: {
        hoistStatic: true, // 静态节点提升
        cacheHandlers: true // 事件缓存
      }
    }
  })]
})

效果:生产包体积减少5%-15%

六、生态融合技巧

1. Pinia状态快照

typescript 复制代码
// 状态时光机
const store = useStore()
const history = ref<typeof store.$state[]>([])

store.$subscribe((_, state) => {
  history.value.push(JSON.parse(JSON.stringify(state)))
})

// 恢复到指定状态
const restore = (index: number) => {
  store.$patch(history.value[index])
}

场景:开发调试/撤销重做功能


2. Vue与Web Components互操作

javascript 复制代码
// 注册Vue组件为Web Component
import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  props: { msg: String },
  template: `<div>{{ msg }}</div>`
})

customElements.define('my-element', MyVueElement)

// 在原生HTML中使用
<my-element msg="Hello WC!"></my-element>

优势:跨框架复用Vue组件

相关推荐
Boilermaker199214 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子25 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102440 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构