前言：在主页中，通过按钮点击，以弹层组件来展示频道管理页，具体的频道管理管理功能由这个页面来决定。
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
总结：今天最重要的就是组件之间的传值
数组做减法-在项目中的实际应用
场景 当点击区块链，可选频道的区块链消失，添加到我的频道中，目前已知后端会发一个总的数据，以及我的频道数据，那么，可选频道的数据就是后台发回来的总数据减去我的频道的总数据，他们都存在数组中，所以我们要做数组的减法得到新的数据，把它渲染到可选频道中。思路可以是数组减完后保存到新的数组再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(对象，属性名，值) 就会有响应式的效果
