图片懒加载实现原理?
图片懒加载的原理很简单，就是我们先设置图片的data-set属性(当然也可以是其他任意的，只要不会发送http请求就行了，作用就是为了存取值)值为其图片路径，由于不是src，所以不会发送http请求。
懒加载的实现原理-它的实现原理很简单，先把img的src指向一个小图片，图片真实的地址存储在img一个自定义的属性里，等到此图片出现在视野范围内了，获取img元素，把src里的值赋给src。
实现图片懒加载，并且显示数组中，始终只有3张图片，上下滑动增加的同时，删除最开始的那一张。可以指定从总图片的第几张开始加载 。要实现上下滑动时的动画效果，我这里用到是uni-app自带swiper组件。
这个通过滑动监听，滑动到当前位置的时候出现动画。
网页中加载的图片越多，对于网站主和访客用户来说，都是对服务器和本地网络资源的极大浪费，同时也拉低了网站的打开速度，及时视觉效果方面提升了，但性子急的用户可以早就选择离开而看不到了。
vue两种路由模式及原理
1、Hash： 使用URL的hash值来作为路由。支持所有浏览器。History： 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式 Abstract： 支持所有javascript运行模式。
2、vue路由的两种模式，hash与history 对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。
3、window.location.hash和window.history.pushState(或replaceState)唯一的不同是通过hash改变url带入#，而后者不会。
vue-router路由切换数据加载中效果是怎么实现的
1、热刷新 。在开发过程中编辑Vue组件时，组件将“热切换”到正在运行的应用程序中，在不重新加载页面的情况下维护应用程序状态。 这极大地提高了开发体验。
2、使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
3、首先vue-router实现了 在无需刷新页面的情况下更新视图 对比：location.href=实现了跳转但是刷新了页面 在浏览器环境下的两种方式，分别就是在HTML5History，HashHistory两个类中实现的。
在vue中如何优化页面(按需加载)
预渲染方式 在构建时(buildtime)简单地生成针对特定路由的静态HTML文件。优点是设置预渲染更简单，并可以将您的前端作为一个完全静态的站点。如果您使用webpack，您可以使用prerender-spa-plugin轻松地添加预渲染。
所以将JS文件拆开，点击某个页面时再加载该页面的JS是一个很好的优化方法。这里用到的就是vue的组件懒加载。在router.js中，不要使用import的方法引入组件，使用require.ensure。
对于无限长列表来说，性能优化主要方法是保持仅渲染可视化部分。来看一下下面这个例子：这是最常见的写法，不过如果列表的内容很多，你就会发现页面十分的卡顿。
这次给大家带来如何优化Vue项目，优化Vue项目的注意事项有哪些，下面就是实战案例，一起来看一下。