前端知识点总结

1.组件通信

1. 组件通信方式1：props

   1. 使用场景：父子通信

   2. 传递数据类型：

      • 可能是函数 -----------实质子组件想给父亲传递数据
      • 可能不是函数-----------实质就是父亲给子组件传递数据
      • 使用提示：

   3. 特殊情况：路由传递props

      • 布尔值类型，把路由中params参数映射为组件props数据
      • 对象，静态数据，很少用
      • 函数，可以把路由中params|query参数映射为组件props数据

2. 组件通信方式2：自定义事件

   1. 使用场景：子组件→父组件
   2. 使用提示： $emit $on[简写@]

3. 组件通信方式3：全局事件总线

   1. 使用场景：万能
   2. 使用提示：$bus、组件实例的原型的原型指向的Vue.prototype

4. 组件通信方式4：消息订阅与发布

   1. 使用场景：万能
      • 在vue中基本不用，在react中常用
   2. 使用提示：pubsub-js插件

5. 组件通信方式5：仓库

   1. 使用场景：万能
   2. 使用提示：vuex{state、mutations、actions、getter、modules}
   3. tip：数据非持久化

6. 组件通信方式6：插槽

   1. 使用场景：父组件→子组件【结构】
   2. 使用提示：slot
      • 默认插槽
      • 具名插槽
      • 作用域插槽:子组件的数据来源于父组件，但是子组件的自己的结构有父亲决定。

7. v-model实现组件通信

   1. 基本使用：

      • v-model：指令，可以收集表单数据【text、radio、checkbox、range】等等
        切记：v-model收集checkbox需要用数组收集

   2. v-model实现原理： :value @input

   3. 使用场景：父子数据同步

   4. 使用实例：

      <!--CustomInput.vue-->
      <template>
         <div style="background:#ccc;height:50px;">
           <h2>input包装组件</h2>
          <!-- :value:动态属性 @input:给原生DOM练定原生DOM事件-->
           <input type="text" value="value" @input="Semit('input',$event.target.value)">
          </div>
      </template>
      <script type="text/ecmascript-6">
         export default {
            name:'CustomInput',
            props:['value']
      }
      </script>
      <!--ModelTest.vue-->
      <template>
         <div>
             <h2>深入v-mode1k/h2>
             <input type="text"v-model="msg">
             <span>{{msg}}</span>
             <br>
             <hr/>
             <h2>v-model实现原理(vue2)</h2>
             <!-- 原生DoM当中是有oninput:事件，它经常结合表单元素一起使用，当表单元素文本内容发生变化的时候就会发出发一次回调
                  vue2:可以通过value.与input事件实现v-model功能-->
             <input type="text" value="msg" @input="msg=$event.target.value"/>
             <span>{{msg}}</span>
             <!--深入学习v-model:实现父子组件数据同步（实现父子组件通信）-->
             <hr/>
              <!-- :value?到底是什么？这可是props,父子组件通信
                   @input到底是什么？并非原生DoM的input事件，属于自定义事件-->
             <CustomInput :value="msg" @input="msg=$event"/>
             <CustomInput v-model="msg">
          </div>
      </template>
      <script type="text/ecmascript-6">
         import CustomInput from './CustomInput.vue'
         export default {
             name:'ModelTest',
             components:{
                CustomInput
             },
             data(){
               return {
                  msg:"我爱你塞北的大雪"
                  }
              }
          }
      </script>
      

8. 属性修饰符.sync

   1. 使用场景：父子数据同步

   2. 使用示例：:money.sync,代表父组件给子组件传递props【money】给当前子组件绑定一个自定义事件update:money

      <!--syncTest.vue-->
      <template>
        <div>小明的爸爸现在有{money}元
         <h2>不使用sync修改符</h2>
         <!-- :money父组件给子组件传递props
              @update:money给子组件绑定的自定义事件只不过名字叫做update:money
              目前现在这种操作，起始和v-mode1很相似，可以实现父子组件数据同步-->
         <Child :money="money" @update:money="money=$event"/>
         <h2>使用sync修改符</h2>
            <!-- :money.sync:第一，父组件给字符串传递props：money
                第二，给当前子组件绑定了一个自定义事件，而且事件名称即为update:money-->
          <Child2 ：money.sync="money"/>
         <hr>
        </div>
      </template>
      <script type="text/ecmascript-6">
         import Child from './child.vue'
         import Child2 from './Child2.vue'
         export default{
                name:'SyncTest',
                data(){
                    return{
                       money:10000
                },
                components:{
                    Child,
                    Child2
                }
      </script>
      <!--child1.vue-->
      <template>
       <div style="background:#ccc;height:50px;">
        <span>小明每次花100元</span>
        <button @click="$emit('update:money',money-100)"></button>
         爸爸还剩{money}元
       </div>
      </template>
      <script type="text/ecmascript-6">
           export default{
              name:'Child',
              props:['money']
           }
      </script>
      <!--child2.vue-->
      <template>
       <div style="background:#ccc;height:50px;">
        <span>小明每次花100元</span>
        <button @click="$emit('update:money',money-100)"></button>
         爸爸还剩{money}元
       </div>
      </template>
      <script type="text/ecmascript-6">
           export default{
              name:'Child',
              props:['money']
           }
      </script>
      

9. $attrs与$listeners

   1. 使用场景：父组件→子组件

      • $attrs：组件实例的属性，可以获取到父组件传递的props数据（所接收的数据是子组件没有通过props接收的，已经通过props接收的数据接收不到）

      • $listeners：组件实例的属性，可以获取到父亲传递自定义事件（对象形式呈现）

   2. 使用示例：

      • 直接用上所接受的所有数据、自定义事件，注意此不能简写

        <!--AttrsListenersTest.vue-->
        <template>
          <div>
            <h2>自定义带Hover提示的按钮</h2>
            <!--当用户在使用我们封装的按钮的时候，需要向HintButton组件传递相应的参数(el-button;进行二次封装)-->
            <!--@c1ick,底下这里代表的是自定义事件->
            <HintButton type="success" icon="el-icon-delete" size="mini" title="" @click="handler"</HintButton>
          </div>
        </template>
        <script type="text/ecmascript-6">
          import HintButton from'./HintButton';
          export default{
                 name:'AttrsListenersTest',
                 methods:{
                //点击事件的回调
                    handler(){
                      alert(6666);
                    }
                 }
                 components:{
                    HintButton
                 }
        </script>
        <!--index.vue-->
        <template>
          <div>
           <!--可以巧妙利用a标签实现按钮带有提示功能-->
           <a title="title">
           <!--下面这种写法，不能简写-->
           <el-button v-bind="Sattrs"v-on="$listeners"</el-button>
           </a>
          </div>
        </template>
        <script>
        export default{
            name:
            props:['title'],
            mounted(){
            //$attrs属于组件的一个属性，可以获取到父组件传递过来的props数据
            //对于子组件而言，父组件给的数据可以利用props接受，但是需要注意，如果子组件通过props接受的属性，在$attrs属性当中是获取不到的
            console.log(this.$attrs);
            //$listeners,它也是组件实例自身的一个属性，它可以获取到父组件给子组件传递自定义事件
            console.log(this.$listeners);
            }
        };
        </script>
        <style scoped>
        </style>
        

10. $children与$parent

    1. 使用场景：父子通信
    2. 使用提示：
       • $children:组件实例的属性，可以在父组件内部获取全部的子组件【返回数组】
       • $parent:组件实例的属性，可以在子组件内部获取唯一的父组件【返回组件实例】

11. ref

    1. 使用场景：父组件直接操作子组件数据

2.camputed和watch的区别

1. 计算属性computed：

​ 1.定义：要用的属性不存在，要通过已有属性计算得来。

​ 2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

​ 3.get函数什么时候执行？

​ (1).初次读取时会执行一次。

​ (2).当依赖的数据发生改变时会被再次调用。

​ 4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

​ 5.备注：

​ 1.计算属性最终会出现在vm上，直接读取使用即可。

​ 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

2. 监视属性watch：

​ 1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

​ 2.监视的属性必须存在，才能进行监视！！

​ 3.监视的两种写法：

​ (1).new Vue时传入watch配置

​ (2).通过vm.$watch监视

4.深度监视：

​ (1).Vue中的watch默认不监测对象内部值的改变（一层）。

​ (2).配置deep:true可以监测对象内部值改变（多层）。

​ 备注：

​ (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

​ (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

3. computed和watch之间的区别：
   1.computed能完成的功能，watch都可以完成。
   2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
   3.两个重要的小原则：
   1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
   2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
   这样this的指向才是vm 或 组件实例对象。

3. CSS中居中方法

1. 
2. 补:
   1. line-height
      这是最简单的⼀种使⽂字垂直居中的⽅法，使⽤line-height属性，但是line-height值要和height的值相同⽐如：
   2. padding
      这个只需要设置padding的上下边距相等就可以，⽐如：padding：20px 0；这种适⽤于⼀⾏只有⼀块内容，如果有很多块就不推荐使⽤；
   3. vertical-align
      这个⽅法适⽤于图⽚和⽂字居中的情况

4.数组常用API基本功能

5.字符串常用API基本功能

6. vue生命周期

1. 定义：Vue在关键时刻帮我们调用的一些特殊名称的函数

2. 常用的生命周期钩子：

   1. mounted：发送ajax请求、设置定时器、绑定自定义事件、订阅消息等初始化操作
   2. beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等收尾操作

3. 各个钩子函数介绍：

   1. beforeCreate：
      • 初始化生命周期、事件
      • 数据代理还未开始，所以无法通过vm访问到data中的数据、methods中的方法
   2. created：
      • 初始化数据监测、数据代理
      • 可以通过vm访问到data中的数据、methods中配置的方法
   3. beforeMount：
      • 页面呈现的是未经vue编译的DOM结构
      • 所有对DOM的操作，最终都不奏效
   4. mounted：
      • 将内存中的虚拟DOM转化为真实DOM插入页面
      • 页面中呈现的是经vue编译的DOM
      • 对DOM的操作均有效
   5. beforeUpdate:
      • 数据是新的，但页面是旧的，即页面尚未和数据保持同步
   6. updated:
      • 根据新数据，生成新的虚拟DOM，与旧的虚拟DOM进行比较，最终完成页面更新
   7. beforeDestory:
      • 此时vm中的data、methods、指令等等，都处于可用状态，马上要执行销毁过程
   8. destoryed:
      • 销毁，此时vue实例已经完全销毁，vm中的所有数据、方法、过滤器等都已不可用

7. http和https的区别

1. http是超文本传输协议，信息是明文传输，而https则是具有安全性的SSL/TLS加密传输协议
2. https协议需要到CA申请证书，而免费证书较少，因此时常是需要一定费用
3. http和https使用完全不一样的连接方式，用的端口也不一样，http端口为80，https端口为443、
4. http是简单无状态的连接，而https是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全

8.TCP三次握手

1. 三次握手
   1. 图示：
      • 
   2. 流程：
      1. Client：
         • 置同步标志位SYN为1，表示要建立连接（连接成功后会再次被置为0）
         • 置请求序号seq=x（x值取决于申请发送的所有字节中第一个字节的序号）
         • 将数据包发送Sever，Client进入SYN_SENT状态，等待Server确认
      2. Server:
         • 置确认标志位ACK为1
         • 置确认号ack为：x+1，表示此序号之前的数据Server都收到了
         • TCP是全双工协议，因此Server有可能也会给Client发送数据，因此Server也会向Client建立连接，置同步标志位SYN为1，置请求序号seq=y，y就表示Server给Client发送的数据开始序号
         • 将数据包发送给Client以确认连接请求，Server进入SYN_RCVD状态
      3. Client:
         • 连接是要双向的，Server确认后只是Client到Server连通成功，Client也需要进行相关确认，置确认标志位ACK为1，置确认号ack=y+1
         • 置请求序号seq=x+1
         • 发送数据包到Server，此时两者都进入ESTABLISHED状态
         • 至此完成三次握手，随后Client与Server之间可以开始传输数据
   3. 握手为什么是三次，不是两次、四次？
      1. 首先明确：TCP是一种可靠的传输控制协议，它必须做到两点，一是保证数据的可靠传输，二是尽可能提高传输效率。三次握手正好满足了以上两点
      2. 两次握手时传输时，会产生一个问题，Server没法知到Client是不是已经接受了自己的同步信号。当网络环境复杂，这个同步信号丢失时，Server和Client的初始化序号将无法达成一致
      3. 四次握手传输当然也可以，当考虑到传输效率，节省资源，三次握手是最佳选择

9. TCP网络分层

1. 图示