1.路由组件的缓存
使用的场景：
路由地址的变化： http://localhost:8080/#/category/1013001 --> http://localhost:8080/#/category/1013304
路由地址变化的时候，页面的内容被没有更新。
原因：
这两个地址都匹配同一个组件，在切换的过程中，被没有重新销毁生成
解决方法：
有三种解决方式
解法一：给组件添加key属性
<router-view :key="$route.fullPath"/>
小结：类似于v-for的key ，利用diff算法计算不同，从而刷新页面，fullpath意思是路由的全地址
解法二：使用watch监听id变化重新拉取接口
// 监听 route.params.id的变化 // watch(对象 | 数组 | 函数, (newVal, oldVal) => {}, // { immediate: true | false, deep: true | false }) watch(() => route.params.id, (newVal) => { console.log('route.params.id变化了...', newVal) 变化后执行的逻辑 }, { immediate: true })
小结：使用watch来监听路由的变化，注意watch的使用方法，三个参数代表的含义。
解法三： 使用onBeforeRouteUpdate 钩子函数 （推荐）
// 路由变化时执行 // to： 要跳转的路由对象 onBeforeRouteUpdate((to) => { console.log('onBeforeRouteUpdate...............', to) loadData(to.params.id) })
总结：
key 最简单粗暴，但性能不好（因销毁重建组件浪费性能），适合对性能要求不高的情况。
watch 没有销毁重建。从更底层的方式（侦听响应式数据的变化）去切入重发请求。
onBeforeRouteUpdate : 没有销毁重建。理解更加自然。
2.手写图片放大镜
效果：
- 固定放大两倍；
- 鼠标进入，显示遮罩，同时在右侧展示放大效果；
- 鼠标离开，隐藏；
思路（核心问题） ：
问题1：如何实现左侧遮罩的鼠标跟随效果？
1.准备待移动的遮罩容器，它是绝对定位的，通过修改它的top，left来移动它
2.实时监听鼠标的位置，让遮罩容器跟着鼠标走
问题2：如何展示放大后的效果？
css属性background-size
技术关键：
鼠标跟随效果：在@vueuse中，有一个工具方法：useMouseInElement（vue是工具库，使用vue必会）
// 导入 useMouseInElement import { useMouseInElement } from '@vueuse/core' setup(){ // 以哪个元素为基准，计算鼠标的位置 const target = ref(null) const { elementX, elementY, isOutside } = useMouseInElement(target) return { currIndex, target, elementX, elementY, isOutside } }
计算相对位置
位置计算修正
// 遮罩元素的位置不能移出 中图 所在范围 if (top > 200) top = 200 if (top < 0) top = 0 if (left > 200) left = 200 if (left < 0) left = 0
放大效果：绝对定位 + 背景图
放大两倍：
图片本身是800 * 800； div是400 * 400； background-size:800px 800px
移动放大区域
修改：background-position-x,background-position-y
3. vueuse/core-监听在元素之外点击
使用场景：当打开某个组件，想在XXX之外点击，关闭组件
是什么：
onClickOutside 是vue的方法库提供的方法，直接下载使用即可
怎么用：
// 1. 导入方法 import { onClickOutside } from '@vueuse/core' setup() { // 鼠标在目标之外点击，就会执行回调 onClickOutside(监听的目标, (e) => { // 鼠标在目标之外点击，要做什么？ }) }
4.loading图片优化
问题：网络特别慢，有可能加载图片这个过程也比较慢，而导致整块区域白屏。
解决：将loading图转成base64编码，让它成为代码的一部分，而不是一张额外的图片。
注意事项： 需要配置10kb下的图片打包成base64的格式 vue.config.js
module.exports = { // 省略其他... chainWebpack: config => { config.module .rule('images') .use('url-loader') .loader('url-loader') .tap(options => Object.assign(options, { limit: 10000 })) } }
5.图片懒加载
是什么：懒就是延迟的意思，所以“懒加载”说白了就是延迟加载，不会一次性加载完，而是优先加载可视区域的内容，其他部分等进入了可视区域在加载
为什么：
1：网页性能优化，提升用户体验
2：减少浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量。
实现原理：
关键技术：
//获取屏幕可视区域的高度 document.documentElement.clientHeight element.offsetTop //获取元素相对于文档顶部的高度 #当前元素上边框外边缘到最近的已定位父级（offsetParent） 上边框内边缘的距离。如果父级都没有定位，则是到body顶部 document.documentElement.scrollTop //获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
判断公式：offsetTop-scroolTop
总结：
一张图片就是一个
标签，而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的。在进入可视区域之前先不给标签赋src属性，等到进入可视区域，将自定义属性值赋值给标签 src 属性
原生js代码实现：
<script> // 获取所有的 img 标签 var imgs = document.querySelectorAll('img') //offsetTop获取元素相对于文档顶部的高度 function getTop(e) { var T = e.offsetTop while ((e = e.offsetParent)) { T += e.offsetTop } return T } function lazyLoad(imgs) { //获取可视区域高度 var H = document.documentElement.clientHeight // 获取卷曲高度 var S = document.documentElement.scrollTop || document.body.scrollTop for (var i = 0; i < imgs.length; i++) { if (H + S > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute('data-src') } } } window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发 lazyLoad(imgs) } </script>
vue3实现：
1）安装工具包：
npm i vueuse/core
2）封装全局指令
import { useIntersectionObserver } from '@vueuse/core' import imgDefault from '@/assets/images/200.png' // 默认图片 export default { install (app) { app.directive('imgLazy', { mounted (el, binding) { el.src = imgDefault // 默认图片 // 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为） // 2. el 是观察的目标容器 dom对象 | 组件对象 // 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出 // 4：observerElement 被观察的dom const { stop } = useIntersectionObserver(el, ([{ isIntersecting }], observerElement) => { if (isIntersecting) { // 到达可见区域 el.onerror = () => { // 当图片加载失败 设置为默认图片 el.src = imgDefault } stop() // 可见区域后 下次不在执行监听 el.src = binding.value // 设置传过来的地址去请求 } }, { threshold: 0 }) // 当可视区域宽高为0就触发 console.log(el, binding.value) } }) } }
3）main.js使用
1. import directive from '@/directive/index' 2. const app = createApp(App) 3. app.use(directive)
4）DOM元素中使用
<img v-imgLazy="图片地址" />
