在实际工作中，可以对Vue做哪些优化

• v-if和v-show

  • v-if彻底销毁组件
  • v-show使用dispaly切换block/none
  • 实际工作中大部分情况下使用v-if就好，不要过渡优化

• v-for使用key

  • key不要使用index

• 使用computed缓存

• keep-alive缓存组件

  • 频繁切换的组件 tabs
  • 不要乱用，缓存会占用更多的内存

• 异步组件

  • 针对体积较大的组件，如编辑器、复杂表格、复杂表单
  • 拆包，需要时异步加载，不需要时不加载
  • 减少主包体积，首页会加载更快
  • 演示

  
  <template>
    <Child>Child>
  template>
  <script>
  import { defineAsyncComponent } from 'vue'
  export default {
    name: 'AsyncComponent',
    components: {
      // child体积大 异步加载才有意义
      // defineAsyncComponent vue3的写法
      Child: defineAsyncComponent(() => import(/* webpackChunkName: "async-child" */ './Child.vue'))
    }
  }
  
  <!-- child.vue -->
  <template>
    <p>async component child</p>
  </template>
  <script>
  export default {
    name: 'Child',
  }
  script>
  

• 路由懒加载

  • 项目比较大，拆分路由，保证首页先加载
  • 演示

  const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home // 直接加载
    },
    {
      path: '/about',
      name: 'About',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      // 路由懒加载
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
  

• 服务端SSR

  • 可使用Nuxt.js
  • 按需优化，使用SSR成本比较高

• 实际工作中你遇到积累的业务的优化经验也可以说

连环问：你在使用Vue过程中遇到过哪些坑

• 内存泄露

  • 全局变量、全局事件、全局定时器没有销毁
  • 自定义事件没有销毁

• Vue2响应式的缺陷(vue3不在有)

  • data后续新增属性用Vue.set
  • data删除属性用Vue.delete
  • Vue2并不支持数组下标的响应式。也就是说Vue2检测不到通过下标更改数组的值 arr[index] = value

• 路由切换时scroll会重新回到顶部

  • 这是SPA应用的通病，不仅仅是vue

  • 如，列表页滚动到第二屏，点击详情页，再返回列表页，此时列表页组件会重新渲染回到了第一页

  • 解决方案

    • 在列表页缓存翻页过的数据和scrollTop的值
    • 当再次返回列表页时，渲染列表组件，执行scrollTo(xx)
    • 终极方案：MPA(多页面) + App WebView(可以打开多个页面不会销毁之前的)

• 日常遇到问题记录总结，下次面试就能用到

在实际工作中，你可以对 Vue 做以下优化来提升应用的性能和用户体验：

1. 懒加载路由：将路由组件按需加载，根据用户的实际需要动态加载组件，减少初始加载时间和资源占用。

2. 路由懒加载：使用 Vue 的异步组件技术（如 import()）对页面组件进行懒加载，仅在需要时才加载对应的组件。

3. 使用虚拟列表：对于大型列表，可以使用虚拟滚动（Virtual Scroll）或虚拟列表（Virtual List）技术，只渲染可见区域内的列表项，减少 DOM 节点的数量，提高性能。

4. 合理使用计算属性和 watch：避免在模板中频繁使用复杂的计算属性，尽量将计算逻辑提取为计算属性，以减少模板的渲染次数。使用 watch 监听数据变化，避免不必要的重复计算。

5. 使用 keep-alive 缓存组件：对于频繁切换的组件，可以通过使用 组件进行缓存，避免每次重新渲染和销毁组件。

6. 优化列表渲染：使用 v-for 渲染大量数据时，尽量避免在每个项中使用复杂的操作和计算。

7. 避免过度渲染：避免使用过多的嵌套组件和无限循环的计算属性，减少不必要的渲染和响应。

8. 使用异步组件：对于一些非关键的组件，可以使用异步组件进行延迟加载，提高初始加载速度。

9. 使用 CDN 加速：将一些公共的 Vue 库和资源文件通过 CDN 进行加速，减少服务器负载和提高网络请求速度。

10. 合理使用 Vuex：对于大型应用，使用 Vuex 进行状态管理，避免组件之间的无序通信和混乱的数据流动。

11. 配置生产环境优化：在构建生产环境代码时，开启压缩、代码分割、Tree Shaking 等优化选项，减小文件体积和加载时间。

12. 使用性能分析工具：使用 Vue 提供的性能分析工具（如 Vue Devtools）来分析和优化应用的性能瓶颈，找出耗时操作和优化空间。

以上是一些常见的 Vue 优化技巧和建议，具体的优化策略应根据具体应用的需求和特点进行调整和实施。