vue3电商项目总结（2）

女爷i 2023-10-03 11:59 4阅读 0赞

**目录**

1.路由组件的缓存

2.手写图片放大镜

移动放大区域

3. vueuse/core-监听在元素之外点击

onClickOutside 是vue的方法库提供的方法，直接下载使用即可

4.loading图片优化

5.图片懒加载

--------------------

#### 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.  **固定放大两倍；**
2.  **鼠标进入，显示遮罩，同时在右侧展示放大效果；**
3.  **鼠标离开，隐藏；**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70][]

--------------------

**思路（核心问题） ：**

**问题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 }
    }

**计算相对位置**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 1][]

**位置计算修正**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 2][]

// 遮罩元素的位置不能移出 中图 所在范围
          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：减少浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量。

**实现原理：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 3][]

**关键技术：**

//获取屏幕可视区域的高度
    document.documentElement.clientHeight	
    
    element.offsetTop	//获取元素相对于文档顶部的高度
    #当前元素上边框外边缘到最近的已定位父级（offsetParent） 
    上边框内边缘的距离。如果父级都没有定位，则是到body顶部
    
    document.documentElement.scrollTop	
    //获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离

判断公式：offsetTop-scroolTop<clientHeight，则DOM元素进入了可视区内

**总结**：

一张图片就是一个<img>标签，而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的。在进入可视区域之前先不给<img>标签赋src属性，等到进入可视区域，将自定义属性值赋值给<img>标签 src 属性

**原生js代码实现：**

**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使用**

import directive from '@/directive/index'
    const app = createApp(App)
    app.use(directive)

**4）DOM元素中使用**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021072701382550.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210727014758441.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210727014903154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210727020735380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70