Vue 高级技巧深度解析

Vue 高级技巧深度解析

mindmap
  root(Vue2高级技巧)
    组件通信
      EventBus
      provide/inject
      $attrs/$listeners
    性能优化
      虚拟DOM优化
      函数式组件
      按需加载
    状态管理
      Vuex模块化
      持久化存储
      严格模式
    高级指令
      自定义指令
      动态组件
      异步组件
    渲染控制
      作用域插槽
      渲染函数
      JSX支持

一、组件通信的进阶之道

1.1 跨层级通信方案对比

通信方案性能测试：

1.2 高阶属性传递

// 父组件
<template>
  <child v-bind="$attrs" v-on="$listeners"></child>
</template>

// 子组件
export default {
  inheritAttrs: false,
  mounted() {
    console.log(this.$attrs); // 获取非props属性
    console.log(this.$listeners); // 获取所有监听器
  }
}

最佳实践：

• 使用inheritAttrs: false避免自动绑定到根元素
• 结合v-bind="$attrs"实现属性透传
• 通过$listeners批量处理事件监听

二、性能优化深度策略

2.1 虚拟DOM优化技巧

// 优化前
<template>
  <div>
    <div v-for="item in list" :key="item.id">
      {{ item.content }}
    </div>
  </div>
</template>

// 优化后：使用函数式组件
Vue.component('functional-list', {
  functional: true,
  render(h, context) {
    return context.props.list.map(item => 
      h('div', { key: item.id }, item.content)
  }
})

优化效果对比：

2.2 按需加载实现

// 路由配置
const routes = [
  {
    path: '/dashboard',
    component: () => import(
      /* webpackChunkName: "dashboard" */ 
      './views/Dashboard.vue'
    )
  }
]

// 异步组件工厂
Vue.component('async-component', (resolve) => {
  setTimeout(() => {
    resolve(import('./components/HeavyComponent.vue'))
  }, 1000)
})

性能提升数据：

三、Vuex 高级应用模式

3.1 模块化状态设计

// store/modules/user.js
export default {
  namespaced: true,
  state: () => ({
    profile: null
  }),
  mutations: {
    SET_PROFILE(state, payload) {
      state.profile = payload
    }
  },
  actions: {
    async fetchProfile({ commit }) {
      const res = await api.getProfile()
      commit('SET_PROFILE', res.data)
    }
  }
}

// 组件中调用
this.$store.dispatch('user/fetchProfile')

3.2 持久化存储方案

// 使用vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  plugins: [
    createPersistedState({
      key: 'vuex_storage',
      paths: ['user.profile'],
      storage: window.sessionStorage
    })
  ],
  modules: {
    user
  }
})

存储方案对比：

四、自定义指令与渲染控制

4.1 权限控制指令实现

// 注册全局指令
Vue.directive('permission', {
  inserted(el, binding) {
    const { value } = binding
    const permissions = store.state.user.permissions
    
    if (!permissions.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

// 使用示例
<button v-permission="'delete'">删除</button>

4.2 渲染函数与JSX

// 普通模板
<template>
  <div :class="wrapperClass">
    <slot name="header"></slot>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>

// 等价渲染函数
export default {
  render(h) {
    return h('div', {
      class: this.wrapperClass
    }, [
      this.$scopedSlots.header(),
      h('ul', this.items.map(item => 
        h('li', item)
      ))
    ])
  }
}

// JSX写法
export default {
  render() {
    return (
      <div class={this.wrapperClass}>
        {this.$scopedSlots.header()}
        <ul>
          {this.items.map(item => <li>{item}</li>)}
        </ul>
      </div>
    )
  }
}

五、项目最佳实践

5.1 错误监控集成

// 全局错误处理
Vue.config.errorHandler = (err, vm, info) => {
  console.error(`Error: ${err.toString()}\nInfo: ${info}`)
  Sentry.captureException(err)
}

// 异步错误捕获
window.addEventListener('unhandledrejection', event => {
  event.preventDefault()
  console.error('Unhandled promise rejection:', event.reason)
})

5.2 性能监控方案

// 使用Performance API
const perfData = {
  dns: performance.timing.domainLookupEnd - 
       performance.timing.domainLookupStart,
  tcp: performance.timing.connectEnd - 
       performance.timing.connectStart,
  ttfb: performance.timing.responseStart - 
        performance.timing.requestStart,
  domReady: performance.timing.domContentLoadedEventEnd - 
            performance.timing.navigationStart
}

// 发送监控数据
axios.post('/perf-log', perfData)

关键性能指标：