Vue 项目优化

1、基础优化

    所谓的基础优化就是任何web项目都需要做的事情，并且也是问题的根源。

    HTML,CSS,JS是第一不要优化的点，分别对应是.vue文件内的<template></template>,<style></style>,<script></script>

(1)、template

    模板部分帮助我们展示结构化数据，vue通过数据驱动视图，主要注意以下几点

a、v-show,v-if使用问题

     涉及到权限相关展示的，用v-if

     在没有权限限制下根据用户点击的频次选择，频繁切换的使用v-show,不频繁切换的使用v-if。

     另外，v-if的优点是减少了dom数量，加快首屏渲染。

b、不要在模板中写过多的表达式与判断，比如 v-if="isShow && isAdmin && (a || b)",这种表达式虽然可以识别，但看着不舒服，适当的写到methods和computed里面封装成一个方法，这样的好处是方便我们在多处判断相同的表达式，其他权限相同的元素再判断展示的时候调用同一个方法即可。

c、循环调用子组件时添加key，key可以唯一标识一个循环个体，可以使用例如item.id作为key，假如数组数据是这样的['a','b','c','d'],那么使用:key="item"显然没有意义，更好的办法就是在循环的时候(item, index) in arr,然后:key="index"来确保key的唯一性。

(2)、style

a、style样式无论放在文件内部还是外部，建议加上<style scoped>将样式文件锁住，因为再好用的标准也避免不了多人开发的麻烦，约束命名规则也可能会冲突，锁定区域后尽量采用简短的命名规则。

b、全局的样式文件，尽量抽象化，既然不在每一个组件里重复写，就尽量通用，这部分抽象做的越好说明你的样式文件体积越小，复用率越高。

c、不使用float布局,之前封装了float:left到全局文件，然后又得.clear。建议使用flex，下面补补css的常用布局

Flex布局

    Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

    任何一个容器都可以指定为Flex布局。

.box{
    display: flex;
}

  行内元素也可以使用Flex布局。

.box{
    display: inline-flex;
}

  Webkit内核的浏览器，必须加上-webkit前缀

.box{
    display: -webkit-flex; /*Safari*/
    display: flex;
}

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

1) 容器的属性

    以下6个属性设置在容器上：

flex-derection:决定主轴的方向（即项目的排列方向）
 

.box{
    flex-direction: row | row-reverse | column-reverse;
    //row: 主轴为水平方向，起点在左端
    //row-reverse: 主轴为水平方向，起点在右端
    //column: 主轴为垂直方向，起点在上沿
    //column-reverse: 主轴为垂直方向，起点在下沿。
}

(3)、script

a、多人开发时尽量保持每个组件export default {} 内的方法顺序一致，方便查找对应的方法。我个人习惯data、props、钩子、watch、computed、components.

b、data 里要说的就是初始化数据的结构尽量详细、命名清晰、简单易懂、避免无用的变量。

c、props父子组件传值时尽量 :width="" :height="" , 不要 :option={}  ,细化的好处是只传需要修改的参数，在子组件props里加数据类型，是否必传，以及默认值，便于排查错误，让传值更严谨。

d、钩子理解生命周期的含义就好，什么时间应该请求，什么时间注销方法，哪些方法需要注销。

e、methods中每一个方法一定要简单，只做一件事，尽量封装可复用的简短方法，参数不易过多。