【Vue】学习笔记十一：练手项目总结

￡神魔★判官ぃ 2021-09-21 02:44 471阅读 0赞

### 文章目录 ###

*   *   *  项目的结构
         *  封装
         *   *  组件封装
             *  封装插件
         *  插件的使用心得
         *  组织接口中的数据心得
         *  出现的问题汇总
         *   *  CSS移动端兼容问题
             *  父子组件传值问题
             *  data、props、computed的合理使用
             *  watch、computed

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

### 项目的结构 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIxNzk0Mg_size_16_color_FFFFFF_t_70_pic_center]  
合理划分目录结构使项目模块更加清晰，上图中绝大部分为Vue CLI4自动生成结构，部分为跟据项目需要添加的。

### 封装 ###

封装是为了复用（代码）和减少项目依赖。  
项目经常出现对插件依赖性大的问题，代码重复问题，代码复用问题，合理的进行封装能最大限度避免以上问题。

#### 组件封装 ####

在vue中一切皆组件。

*  组件与外界保持最小耦合
 *  组件所使用的数据尽可能用户不传递，也能是组件正常工作
 *  在组件的事件处理上，如果事件触发需要外部数据则把事件发射给父组件，否则要在子组件内处理
 *  能共用的组件需要抽离
 *  如果一个组件只在当前那个视图用，把它放在当前视图模块中
 *  最好不要使用混合mixins

#### 封装插件 ####

当一个项目引用一个插件是，未来降低项目对该插件的依赖需要对插件进行封装（部分不能进行封装的可以忽略），这样，当插件不在维护或者有更好的插件时可以更好替换。  
这里的封装就是加一个中间层，本来直接访问插件的操作由访问这个中间层代替。  
接下来的一段代码是对axios的封装，通过加一个中间的request函数对其封装。

//基本封装
    import axios from 'axios'
    
    const baseURL1 = 'http://10.10.10.1:8000/api';
    const baseURL2 = 'http://10.10.10.2:8000/api';
    
    export function request(config) { 
        //创建axios实例
        const instance = axios.create({ 
            baseURL:baseURL2,
            timeout:5000
        });
        
        //instance函数返回Promise对象
        return instance(config);
    }
    
    
    //主页数据请求封装
    export function getMultidada() { 
        return request({ 'url': "/homeData"})
    }

**使用示例**

getMultidada().then(res => { 
          this.banners = res.data[BANNER].list;//res是外层data，需要取的是内层data中的list
          this.recommends = res.data[RECOMMEND].list;
     }).catch(err=>{ 
        console.log(err)
     })

### 插件的使用心得 ###

*  不了解的插件不用（熟悉后再用）
 *  稳定适应项目的优先，实现功能和稳定是第一位
 *  能进行封装的插件需要进行封装，尽量减少项目对其依赖

### 组织接口中的数据心得 ###

*  如果多个数据需要发送, 将它打包在一个对象发送
 *  当接口中所给数据的字段与组件中所使用的不同时, 将接口中的数据整合为一个对象(中间层)然后传给组件使用
 *  一般来说父组件请求数据然后传递给子组件
 *  将公共的数据放到vuex中, 必要时可以划分模块

### 出现的问题汇总 ###

#### CSS移动端兼容问题 ####

*  谨慎使用定位! 不要都使用或乱用
 *  一般来说组件只设置width就行了, 最好别设置height, 否则移动端屏幕易出问题
 *  移动端一般需要隐藏滚动条

#### 父子组件传值问题 ####

*  props属性是单向数据响应的, 父组件中的数据改变子组件中的数据响应改变, 反之不改变.
 *  如果子组件想改变父组件中的数据, 可以通过$emit触发事件传值改变

#### data、props、computed的合理使用 ####

*  一般不改变props中的数据, 它是由父组件改变的, 若改变$emit事件
 *  自己改变的在data中
 *  computed可以整合data和props形成一个新的数据字段, 可以避免创建多余的对象

#### watch、computed ####

watch数据项可以侦听data或者props中的数据，当数据改变watch函数才执行，否则watch返回**缓存**的结果。computed计算数据，调用一次执行一次函数。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIxNzk0Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20210920/f44f02029c564772855505779cb1804a.png