移动端项目实践方法提炼知识总结

深碍√TFBOYSˉ_ 2023-10-04 16:17 2阅读 0赞

> 前言：在主页中，通过按钮点击，以弹层组件来展示频道管理页，具体的频道管理管理功能由这个页面来决定。

![20210611214236557.png][]

> #### 1.总体认知： ####
> 
> 搭结构，先做基本的页面样式，再做功能。能封装就封装，复杂功能拆分成一个个分支组件

#### 2 我要实现的效果是 ####

> 让登陆用户可以订制(添加或者删除)自已订阅的频道

#### 3.大体： ####

> 在主页中，通过点击按钮，以弹层组件来展示频道管理页，具体的频道管理功能由这个页面来决定。  
> :第一步，在home页添加一个按钮和一个弹层，点击按钮，显示弹层。弹层内容的显示使用组件来装  
> 第二步，进行布局  
> 第三步，数据绑定，将数据渲染到页面上 （使用计算属性做数组的减法）

#### 4 主要技术点【摘要-下面会具体介绍】 ####

> 1.调接口\---还是封装到单独文件中，之后使用时调用  
> 2.渲染数据 \------一般套路是掉接口，拿到返回数据，定义数组接受数据--v-for渲染到页面  
> 3.计算属性 \---**可以v-for计算属性名**  
> 5.子传父、父传子 \--组件通信少的情况用这个，如果很多的话用vuex  
> 6.不同组件之间的传参（参数给请求函数用之类的，如传递下标，id）  
> 7.vue不允许在子组件中直接修改父组件传入的props。但是可以通过修改引用类型修改--堆栈--间接  
> 8-bug修复--在删除频道 时，如果下标在当前频道之前，则去更新父组件的中active
> 
> 9-数组做减法 
> 
> 10-简单逻辑判断下的代码写法：1.在template中@click=‘可以写简单的逻辑代码’，还有其他的如v-if等。2.还有如： 你好？ ‘好’：‘不好’ 3.还有如 a = 1 || 0 具体问题具体分析，但此种方法很简便
> 
> 11-请求方式的总结\--除get、post外的其他方式介绍
> 
> 12-请求预检 --如option
> 
> 13-简单类型，复杂类型的说明，及修改后造成的影响--牵扯堆栈--堆栈就完了？--必须更深一层分析
> 
> 14-动态class利用布尔值，显示某个类
> 
> 15-路由，插槽和动态组件，简单理解--插槽传结构，动态组件传数据没有地址切换页面局部切换，路由是地址的切换
> 
> 16，人为的丢错误：自定义错误--throw new Error  
> 总结：今天最重要的就是组件之间的传值

#### 数组做减法-在项目中的实际应用 ####

> #### 场景 ![20210611225328900.png][]当点击区块链，可选频道的区块链消失，添加到我的频道中，目前已知后端会发一个总的数据，以及我的频道数据，那么，可选频道的数据就是后台发回来的总数据减去我的频道的总数据，他们都存在数组中，所以我们要做数组的减法得到新的数据，把它渲染到可选频道中。思路可以是数组减完后保存到新的数组再v-for渲染，但这里使用计算属性更加的简单高效酷炫。同时，计算属性的名字竟可以当做v-for的数组名使用。数组相减的实现。大数组使用fil ####

// const allChannels = [{ id: 0, name: 'a' }, { id: 1, name: 'b' }]
    
    // const channels = [{ id: 1, name: 'b' }]
    
    export const arrSub = (allChannels, channels) => {
      // return allChannels - channels
      // 开始代码
      // 做减法
      // 从大数组中，选出一些元素（没有在小数组中出现过）
      const res = []
      // 1. 对大数组中的每一元素
      allChannels.forEach((item) => {
        // 如果item 没有在小数组中出现过： item.id与小数组中所有元素的id都不相同
        const idx = channels.findIndex(it => {
          if (it.id === item.id) {
            return true
          }
        })
        // 找不到，就添加
        if (idx === -1) {
          res.push(item)
        }
      })
    
      return res  //这个方法是保存到数组中，再渲染到页面。
    }
    
    // const result = arrSub(allChannels, channels)
    
    // console.log(result) // [{id:0, name:'a'}]
    ----------------------第二种，filiter+findIndex-----------------

#### 子传父，不通知父组件，直接修改。----复杂类型的 ####

> 在js中，分为复杂类型和简单类型。复杂类型的数据保存在堆中，引用地址保存在栈中，如引用地址可以有一个或多个，每修改其中一个引用地址就会改变数据，在vue中同样可以利用这一点，通过改变引用地址修改父组件里面的数据。
> 
> 结论：1.vue不允许在子组件中直接修改父组件传入的props
> 
> 2.如果从父组件中传入的props是引用数据类型(数组，对象),则在子组件中可以通过数组提供的api(push,slice......) 来间接修改props的值**【必须是可以改变原数组的方法】**

### vue2中不能监控数据变化的两种情况 ###

data (){
    	return {
    		arr:[1],
    		obj:{a:1}
    	}
    }
    arr[0] = 2 // 这里不会触发视图的变化
    
    obj.b = 2  // 这里不会触发视图的变化
    
    用this.$set(对象，属性名，值) 就会有响应式的效果

[20210611214236557.png]: https://img-blog.csdnimg.cn/20210611214236557.png
[20210611225328900.png]: https://img-blog.csdnimg.cn/20210611225328900.png