前端技巧与Vue实践-优快云博客

本文链接：https://blog.youkuaiyun.com/stormzi/article/details/107100493

1. css隐藏多余字，用省略号表示：

white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;

2. vue移动端自适应插件

一般我们做vue移动端项目使用的长度单位是rem、em，需要根据设计稿宽度进行计算，而这个插件可以配置相应属性直接按照原始设计稿长度进行构建，不需要繁琐的单位换算。

安装：

npm install postcss-px-to-viewport --save

安装完成后在vue根目录下找到".postcssrc.js"文件，添加下面的配置：

"postcss-px-to-viewport":{
    viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750.
    viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334.
    unitPrecision: 3, // (指定`px`转换为视窗单位值的小数位数（很多时候无法整除).
    viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw.
    selectorBlackList: ['.ignore', '.hairlines','weui'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名.
    minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值.
    mediaQuery: false // 允许在媒体查询中转换`px`.
 }

tips：selectorBlackList属性用作绕开计算指定类名的样式，若项目中有使用其他ui组件时需配置ui常用类名。

3.vue中var _this = this的作用

var _this=this;
var x=111;
var a={
  x:222,
  say:function(){
    console.log(_this.x);
    console.log(this.x);
  }
};
a.say();  //分别输出111 222

_this只是一个变量名，如果this代表父函数，在子函数还用this，那么this的指向就变成子函数了，_this就是用来存储指向的

4. 关于ES6中箭头函数与普通函数的this的指向问题

普通函数中的this表示调用此函数时的对象，箭头函数里面的this会继承自外部的this，普通函数中的this并不会向上继续找对象，箭头函数中会往上寻找this，直到找到所代表的this为止。

箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。普通函数的this指向调用它的那个对象。

例1:普通函数如上一段代码；
箭头函数：
var x=11;
var b={
 x:22,
 y:this,//window
 say:()=>{
   console.log(this.x);
 }
}
b.say();
console.log(b.y);//分别输出11和Window
//b对象中的this指代的就是window，也就是全局环境，因为箭头函数中的this就会就近找到上一个对象中this所指代的对象，从以上例子可以看出来，b内部属性y就为b内部this指代的对象，输出是Window。

例2:
普通函数：
var x=11
function test1(){
  console.log(this);
  this.x=22;
  let c=function(){
    console.log(this);
    console.log(this.x);
  };
  c();
}
var w=new test1();  //输出test1()、Window和11
//输出11是因为普通函数中的this指向的是调用它的对象，如果没有直接调用对象，会指向undefined或者window，一般都会指向window，在严格模式下才会指向undefined。上述的例子中，并没有明确的调用对象，而普通函数中的this并不会向上继续找对象，所以直接返回window。
箭头函数：
var x=11;
function test2(){
  console.log(this);
  this.x=22;
  let c=()=>{
    console.log(this);
    console.log(this.x);
  }
  c();
}
var w=new test2();//输出test2()、test2()和22

5. Promise

let promise=new Promise((resolve,reject)=>{
  //接收一个回调，参数是成功函数与失败函数
  setTimeout(()=>{
    let num=parseInt(Math.random()*100);
    if(num>50){
        resolve(num)
    }else{
        reject(num)
    }
  },10000)
})
promise.then(res=>{
    //在构造函数中如果执行了resolve函数就会执行这一步
    consolle.log(res);
},err=>{
    //执行了reject函数就会执行这一步
    console.log(err);
})

简写如下：
new Promise(
  function (resolve, reject) {
    // 一段耗时的异步操作
    resolve('成功') // 数据处理完成
    // reject('失败') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失败
)

6. async与await

await后面接一个会return new promise的函数并执行它
await只能放在async函数里

function 摇色子(){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        setTimeout(()=>{
            resolve(sino)
        },3000)
    })
}
async function test(){
    let n =await 摇色子()
    console.log(n)
}
test()

function 摇色子(猜测){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        if(sino > 3){
            if(猜测 === '大'){
                resolve(sino)
            }else{
                reject(sino)
            }
        }else{
            if(猜测 === '大'){
                reject(sino)
            }else{
                resolve(sino)
            }
        }
        setTimeout(()=>{
            resolve(sino)
        },300)
    })
}
async function test(){
    try{
        //把await及获取它的值的操作放在try里
        let n =await 摇色子('大')
        console.log('赢了' + n)
    }catch(error){
      //失败的操作放在catch里
        console.log('输了' + error)
    }
}
test()

把await和成功后的操作放到try里，失败的放在catch。

为什么要用await：为了使我们的异步代码，更像同步的代码。

7. uni-app里设置全局的数据和全局的方法

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {...},
    mutations: {...},
    actions: {...}
})

export default store

//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
    store,...
})
...

//test.vue 使用时：
import {mapState,mapMutations} from 'vuex'

8. uni-app中swiper组件实现点击切换

通过current来实现

getInfo(navState) { //在点击切换按钮上绑定click事件
       this.navState = navState;
		if (this.navState == 0) {
			this.index=0;
		} else if (this.navState == 1) {
			this.index=1;
		} else if (this.navState == 2) {
			this.index=2; 
		} else if (this.navState == 3) {
			this.index=3; 
		}	
},
swiperchange(e){   //在swiper组件上绑定change事件
		this.navState = e.target.current || e.detail.current;
		this.index=e.target.current || e.detail.current;
}

9. uni-app中解决swiper组件已定义高度的问题

在swiper-item里面加scroll-view，并且给swiper和scroll-view一个高度：

<swiper-item class="swiper-box">
	<scroll-view show-scrollbar='false'  scroll-y="true" class="shop-box">
			<view class="swiper-item">排行</view>
	</scroll-view>
</swiper-item>

swiper{
	height: 1434upx;
	padding-top: 40px;
}
scroll-view{
	height: 1434upx;
}

10. vue中keep-alive

作用：
在组件切换过程中将状态保留在内存中，防止重复渲染DOM， keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗，简单一点来说就是从页面1链接到其他页面后回退到页面1不用在重新执行页面1的代码，只会从缓存中加载之前已经缓存的页面1，及不会再触发页面一种的created等类似的钩子函数，除非自己重新刷新该页面1。
什么时候使用：

如果需要频繁切换路由，这个时候就可以考虑用keep-alive了，来达到避免数据的重复请求的目的。很多应用场景都于此类似，比如当我每一次从详情组件退回到列表组件的时候。

如何使用：

<keep-alive>
    <router-view></router-view>
    <!--这里是会被缓存的组件-->
</keep-alive>


//如果只想缓存部分组件的状态，那么可以使用keep-alive的include和exclude属性。
<keep-alive include="newsList,imageList">
    <router-view></router-view>
</keep-alive>

<script>
export default {
    name: "newsList",  //如果使用了keep-alive缓存该组件状态，则该组件必须有name属性。
    data(){
        return {}
    }
</script>