一、性能痛点分析

大型Vue2应用中，不当的渲染更新会导致性能下降300%，通过优化策略可提升5倍渲染效率

二、核心优化策略

// 优化前
Vue.component('ArticleItem', {
  template: `
    <div class="article">
      <h2>{{ title }}</h2>
      <div class="content">{{ content }}</div>
      <footer class="meta">
        © 2022 我的博客 - 永久版权声明
      </footer>
    </div>
  `
})

// 优化后
Vue.component('ArticleItem', {
  template: `
    <div class="article">
      <h2>{{ title }}</h2>
      <div class="content">{{ content }}</div>
      <static-footer/>
    </div>
  `,
  components: {
    'static-footer': {
      template: '<footer class="meta">© 2022 我的博客 - 永久版权声明</footer>'
    }
  }
})

// 列表项优化示例
Vue.component('TodoList', {
  props: ['items'],
  render(h) {
    return h('ul', this.items.map(item => {
      return h('li', {
        key: item.id,
        staticClass: 'item',
        class: { active: item.isActive },
        on: {
          click: () => this.$emit('select', item.id)
        }
      }, item.text)
    }))
  }
})

// 强制更新优化
methods: {
  updateItem(id) {
    const index = this.items.findIndex(item => item.id === id)
    // 替代this.$forceUpdate()
    this.items.splice(index, 1, {...this.items[index], updated: true})
  }
}

三、高级优化方案

// 无状态函数式组件
Vue.component('FunctionalButton', {
  functional: true,
  props: ['type', 'text'],
  render(h, context) {
    return h('button', {
      class: `btn-${context.props.type}`,
      on: context.listeners
    }, context.props.text)
  }
})

// 使用keep-alive缓存
<keep-alive include="StaticComponent">
  <component :is="currentView"></component>
</keep-alive>

// 虚拟滚动实现核心
Vue.directive('virtual-scroll', {
  inserted(el, binding) {
    const itemHeight = 50
    const visibleCount = Math.ceil(el.clientHeight / itemHeight)
    let startIndex = 0
    
    el.addEventListener('scroll', () => {
      startIndex = Math.floor(el.scrollTop / itemHeight)
      binding.value(startIndex, startIndex + visibleCount)
    })
  }
})

// 使用方式
<ul v-virtual-scroll="renderVisibleItems" style="height: 500px; overflow-y: auto">
  <li v-for="item in visibleItems" :key="item.id" style="height: 50px">
    {{ item.content }}
  </li>
</ul>

四、完整优化案例

// 电商商品列表优化实战
Vue.component('ProductList', {
  props: ['products'],
  data() {
    return {
      visibleRange: [0, 20] // 仅渲染可见项
    }
  },
  computed: {
    visibleProducts() {
      return this.products.slice(...this.visibleRange)
    }
  },
  methods: {
    updateRange(start, end) {
      this.visibleRange = [start, end]
    }
  },
  render(h) {
    return h('div', [
      h('virtual-scroll-container', {
        props: {
          itemHeight: 100,
          total: this.products.length,
          onUpdate: this.updateRange
        }
      }),
      h('ul', this.visibleProducts.map(product => 
        h(ProductItem, {
          key: product.id,
          props: { product }
        })
      ))
    ])
  }
})