目录
? ? ? ? ?3. vueuse/core-监听在元素之外点击
onClickOutside 是vue的方法库提供的方法，直接下载使用即可
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<clientHeight，则DOM元素进入了可视区内?
总结：
一张图片就是一个<img>标签，而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的。在进入可视区域之前先不给<img>标签赋src属性，等到进入可视区域，将自定义属性值赋值给<img>标签 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/core2）封装全局指令
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使用
import directive from '@/directive/index'
const app = createApp(App)
app.use(directive)4）DOM元素中使用
<img v-imgLazy="图片地址" />