Vue的学习Ⅹ（mixin与extend、fastclick、图片懒加载、单位转换插件）

川长思鸟来 2023-03-13 02:29 11阅读 0赞

# 一、mixin与extend #

### mixin ###

let mixin = { 							// 定义一个mixin data() { 								// 混入mixin，也可以混入methods、components等等 return { 
    	  name: ''
    	}
      }, created: function () {  console.log(1) }
    }
    
    let vm = new Vue({ 
      created: function () {  console.log(2) },
      mixins: [mixin]						//在Vue实例上面挂载mixin
    })
    // => 1
    // => 2

mixin的作用：为了**减少**不同的**组件里面的重复代码**  
执行顺序：**mixin**里面的**钩子函数**会比**原Vue实例对象里面的钩子函数**先执行

### extend ###

extend目的：**允许声明扩展另一个组件**，而**无需使用 Vue.extend**，这主要是为了便于扩展单文件组件

var CompA = {  ... }
    
    // 无需调用 `Vue.extend` 来继承 CompA，使用Vue里面的extends即可 var CompB = { 
      extends: CompA,
      ...
    }

可以参考[官网的mixin][mixin]  
或者[另一个官网的mixin][mixin 1]

# 二、fastclick #

**fastclick可以解决移动端300ms的点击延迟**

/*fastclick安装*/
    npm install fastclick --save
    
    /*以下的操作是在main.js里面完成的*/
    /*导入*/
    import FastClick from 'fastclick'
    /*调用attach方法*/
    FastClick.attach(document.body);

参考[ntt小小图][ntt]  
来自：https://blog.csdn.net/ningtt/article/details/74625629

也可以查看[github上面的fastclick][github_fastclick]

# 三、图片懒加载 #

图片懒加载：**图片需要显示在屏幕上时，再加载**

### 插件：vue-lazyload ###

**安装**

npm i vue-lazyload -S

**main.js:**

import Vue from 'vue' import App from './App.vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) // or with options Vue.use(VueLazyload, { 
      preLoad: 1.3,
      error: 'dist/error.png',
      loading: require('dist/loading.gif'), 		// 注意这里是require，因为require可以加载图片，而import是不行的
      attempt: 1
    }) new Vue({ 
      el: 'body', components: { 
        App
      }
    })

**template:**

<ul>
      <li v-for="img in list">
        <img v-lazy="img.src" >				// 需要把img标签的src属性改为v-lazy
      </li>
    </ul>

**一些其他的选项：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]

以上参考[github上面的hilongjw/vue-lazyload][github_hilongjw_vue-lazyload]  
来源：https://github.com/hilongjw/vue-lazyload

# 四、单位转换插件 #

### postcss-px-to-viewport： ###

/*安装*/
    npm install postcss-px-to-viewport --save
    
    
    /*根目录下创建一个 postcss.config.js 文件*/
    module.exports = { 
        plugins:{ 
          autoprefixer:{ }, "postcss-px-to-viewport":{ 
          unitToConvert: 'px', 				// 需要转换的单位，默认为"px"
          viewportWidth: 375, 				// 视窗的宽度，对应的是我们设计稿的，iPhone6的宽度
          viewportHeight: 1334,				// 视窗的高度，根据375设备的宽度来指定，一般指定667，也可以不配置
          unitPrecision: 13, 				// 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
          propList: ['*'], 					// 能转化为vw的属性列表
          viewportUnit: 'vw', 				// 指定需要转换成的视窗单位，建议使用vw
          fontViewportUnit: 'vw', 			// 字体使用的视口单位
          selectorBlackList: ['.ignore', '.hairlines'], 	// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
          minPixelValue: 1, 				// 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值	
          mediaQuery: false, 				// 允许在媒体查询中转换`px`
          replace: true, 					// 是否直接更换属性值，而不添加备用属性
          exclude: [
            /RightBar/,
            /gotop.vue/,
          ], 								// 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
          landscape: false, 				// 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
          landscapeUnit: 'vw', 				// 横屏时使用的单位
          landscapeWidth: 1134 				// 横屏时使用的视口宽度
            },
    
        }
    }

来自[Komorebi\_][Komorebi]  
原文链接：https://juejin.im/post/5d415603e51d4561d044cc51

### px2rem-loader： ###

可查看链接[丑小喵喵][Link 1]  
来源：https://blog.csdn.net/qq\_39851888/article/details/100049651

题外话：Vue里面的**created**是**创建完Vue对象时触发**，**mounted**是**挂载完DOM对象（此时的img不一定会加载完）时触发**，**updated**是**数据更新后是触发**

本文只用于个人学习与记录

[mixin]: https://cn.vuejs.org/v2/api/#mixins
[mixin 1]: https://cn.vuejs.org/v2/api/#Vue-mixin
[ntt]: https://blog.csdn.net/ningtt/article/details/74625629
[github_fastclick]: https://github.com/ftlabs/fastclick
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230312/f8d80500427f4e04b8f098fced29e4aa.png
[github_hilongjw_vue-lazyload]: https://github.com/hilongjw/vue-lazyload
[Komorebi]: https://juejin.im/post/5d415603e51d4561d044cc51
[Link 1]: https://blog.csdn.net/qq_39851888/article/details/100049651