Vue 项目中的常见小问题汇总(持续记录~)

619 阅读3分钟

本文主要是为了记录自己在项目中经常会忘记或者遇到的一些小问题和bug~ 持续记录更新~

写法类

1.标签动态绑定 class,style

 <div :class="{'active':isactive,active:isactive2}"></div>
 <div :style="{'color':color,fontSize:fontSize}"></div>

样式active的分号''可有可无,当isactive为真时,active样式起效

2.将if else-if else的逻辑判断改为键值对的方式

ways (type) {
    const key_methods = {
        method: this.history,
        now: this.now
    }
    key_methods[type]()
}

可能很多情况下比下面这种要好

ways (type) {
    if (type === "method") {
        this.history()
    } else if (type === "now") {
        this.now()
    }
}

3.当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中所以,不推荐v-if和v-for同时使用

<!-- worse -->
<div v-for="item in image_url" :key="item" v-if="item.show"></div>
<div v-for="item in image_url_filter" :key="item"></div>
//better
computed: {
    image_url_filter () {
        return this.image_url.filter(item => {
            return item.show
        })
    }
}

当然反面教材也是起作用的,如果你只是希望渲染几个特定条件的元素~

4.一个值的多种情况

//worse
if (name === 'first' || x === 'second' || x === 'third' ) {
}

//better
if (['first', 'second', 'third'].includes(name)) {}

5.给变量赋值

//worse
let a, b, c; 
a = 5; b = 8; c = 12;

//better
let [a, b, c] = [5, 8, 12];

6.链式调用避免变量为空而引起报错

当调用a.b.c时,a或b没有数据时,无法读取undefined中的变量c,会直接引起后台报错导致程序挂掉,为了避免取值为空,以前我们会用a&&a.b&&a.b.c,但是这样代码过于冗长。

可以链式调用a?.b?.c,当没有值时会默认赋值undefined。调用需要下载依赖@babel/plugin-proposal-optional-chaining

习惯类

1.使用插件,比如iview,element中的input,select等组件,如果没有设计或其他特殊限制,尽可能的带上可清空,键盘可回车触发函数,或者交互条件变更后自动请求数据等优化处理,自己和使用者用起来会很舒服~

2.组件模块内的接口请统一封装到一个js文件内,将其引入到需要调用这个接口的模块,像下面这样

image.png

image.png

再通过不同文件夹,区分不同模块的接口,方便各个模块引入并复用

import { flyApi } from '@/api';
//然后在方法里像下面调用
flyApi.getFly().then(res => {
}).catch(e => {
    console.log(e)
});

3.对于调用接口的命名,可以选择 ‘请求方式’+‘接口名’ 的组合,例如getPeopleInfo,postTableInfo等,或是直接跟接口同名,可方便调用和代码维护,ctrl+f搜索查找起来不要太爽

疑惑bug类

1.循环生成图片标签

解决办法:使用require

<template>
    <div class="family">
        <img v-for="(item,key) in imgLists" :key="key" :src="item" alt="暂无图片">
    </div>
</template>

<script>
export default {
    name: "father",
    data () {
        return {
            imgLists: []
        };
    },
    created () {
         /* ``和${} 是ES6新增的动态拼接字符串方法 */
        for (let index = 1; index < 6; index++) {
            this.imgLists.push(require(`@/assets/${index}.jpg`))
        }
    }

};
</script>

3-3.png

其他

axios请求统一带上token,在main.js或者main.ts中对axios请求进行处理


axios.interceptors.request.use(
    config => {
        if (localStorage.getItem("cgToken") != null) {
            config.headers["refresh-token"] = localStorage.getItem("cgToken");
        }
        return config;
    },
    err => Promise.reject(err)
);

// http response 服务器响应拦截器,这里拦截401错误,并重新跳入登页
axios.interceptors.response.use(response => {
    return response;
}, error => {
    if (error.response) {
        switch (error.response.status) {
            case 401:
                router.replace({
                    path: '/login',
                    query: { redirect: router.currentRoute.path }
                });
                break;
            case 403:
                router.replace({
                    path: '/login',
                    query: { redirect: router.currentRoute.path }
                });
                break;
            default:
                try {
                    if (error.response.request.responseURL.includes('authox/curUser')) {
                        router.replace({
                            path: '/login',
                            query: { redirect: router.currentRoute.path }
                        });
                    }
                } catch (e) {
                    console.log(e)
                }
        }
    }
    return Promise.reject(error.response)
});

End:有错误的或者不对的地方,欢迎指摘~