在移动端场景下使用 Vue 框架进行开发，应该遵循哪些最佳实践？
考察说明
考查候选人对 Vue 在移动端场景下性能优化、开发规范和常见问题处理的理解。
回答思路
- 【回答框架 1】移动端 Vue 最佳实践围绕性能、体验和工程化展开。核心是减少首屏加载时间和运行时开销，手段包括路由懒加载、组件按需加载、合理使用异步组件，以及利用 webpack 的代码分割。
- 【回答框架 2】针对滚动和触摸交互，应避免在 onScroll 等高频事件中做复杂计算，使用函数节流或防抖，并优先使用 CSS 动画或 transform 代替 JavaScript 频繁操作 DOM，以降低主线程压力。
- 【回答框架 3】列表渲染使用 key 且保持稳定，大数据量时采用虚拟滚动或分页加载；长列表的图片使用懒加载并指定占位尺寸，避免布局抖动。
- 【回答框架 4】状态管理方面，合理划分组件层级，避免跨层传递事件过多，可使用 provide/inject 或 Vuex 管理全局状态，但要注意避免状态粒度过于集中导致频繁更新。
- 【回答框架 5】工程化与兼容性上，使用 postcss 和 autoprefixer 处理移动端兼容，合理配置 viewport meta 和响应式设计，并通过 CDN 或缓存策略优化静态资源加载。
- 【关键点 1】性能优先：懒加载、代码分割、减少首屏资源。
- 【关键点 2】交互优化：高频事件节流、使用 transform 和 CSS 动画。
- 【关键点 3】列表处理：虚拟滚动、图片懒加载、稳定 key。
- 【关键点 4】状态管理：合理拆分、利用 provide/inject 或 Vuex。
- 【关键点 5】兼容与工程化：postcss、viewport、缓存和 CDN 策略。
- 【易错点 1】避免在滚动事件中直接进行复杂计算或频繁改动响应式数据，否则会导致卡顿。
- 【易错点 2】不要不加区分地使用虚拟滚动，对于列表较短或有复杂子组件的情况，可能适得其反。
- 【易错点 3】移动端点击延迟和穿透不能靠简单延迟解决，需使用专门处理方案，并注意 fastclick 在部分场景下的副作用。