学习前端面试知识（13）-CSDN博客

本文链接：https://blog.csdn.net/BHDDGT/article/details/141306598

2024-8-20 打卡第十三天学习视频链接

vue2和vue3的区别

重构了响应式 Object.defineProperty -> proxy 不需要另外使用set进行触发
composition api 函数式编程 hooks Vueuse
VDOM diff 从双端比较 -> 最长递增子序列
flow -> ts
tree shaking 方便快速压缩
template compiler

composition api

vue2低成本，没有规范限制，耦合数据越多越难保证唯一性
composition api解决optional api的问题。逻辑代码的封装性
vue2 watch computed methods
hooks refs reactive

视频先过到这里，有一些跳过的因为不了解感觉强行做笔记没有用，下面整理一些面试题目和答案，也是给自己过一遍，不是标准答案，主观意识较强，仅供参考。

vue的双向绑定原理是什么？里面的关键点在哪里？

答：双向绑定在vue2中基于Object.defineProxy，在vue3中基于Proxy，关键点在于数据劫持，即拦截数据的读取和修改进行拦截，在数据更新时自动更新视图。

实现水平垂直居中的方法

flex布局中，justify-content设置主轴水平居中，默认为row，所以设置的是水平居中，align-items设置交叉轴居中，即和主轴垂直的另一条轴，在主轴是row的情况下，交叉轴为纵轴，设置垂直居中，两个一起使用就能达到水平垂直居中的效果

<style>
    .parent{
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100px;
       height: 100px;
       background-color: gray;
    }
    .child{
        width: 50px;
        height: 50px;
        background-color: red;
    }

</style>
<div class="parent">
    <div class="child"/>
</div>

transform相对margin性能上更好一些，因为margin会导致页面的重绘和重排，而transform是合成属性，会创建一个独立的复合层，发生变化的时候在GPU上进行处理，改变时只需要重新复合，相对原始的重绘重排性能优化了很多

<style>
    .test{
       position: absolute;
       top: 50%;
       left: 50%;
       width: 100px;
       height: 100px;
       background-color: gray;
       transform: translateY(-50%) translateX(-50%);
    }
</style>
<div class="test">
</div>

Grid布局，其中place-items和flex布局中的justify-content:center以及align-items:center有相同的作用

<style>
    .parent{
      display: grid;
      place-items: center;
      height: 100vh;
    }
    .child{
        width: 100px;
        height: 100px;
        background-color: gray;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>

使用绝对值和负边距，针对已知的尺寸，就是margin-top和margin-left都不能设置为百分比，而是要知道这个容器宽高的情况下，设置为宽高的一半，比如width是200px，而margin-left就设置为-100px，如果width设置为300px，margin-left就设置为150px

<style>
    .parent{
      position: relative;
      height: 100vh;
    }
    .child{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        margin-top: -100px;
        margin-left: -100px;
        background-color: gray;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>

使用margin:auto和绝对定位，这种方法仅适用于块元素，并且仅当父元素使用相对定位时，子元素使用绝对定位和margin:auto可以实现垂直和水平居中，记得top,bottom,left,right都要设置为0才能实现margin:auto的定位

<style>
    .parent{
      position: relative;
      height: 100vh;
    }
    .child{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 200px;
        height: 200px;
        margin: auto;
        background-color: gray;
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>

常用伪元素

常用的伪元素有before和after

<style>
    li{
      list-style: none;
    }
    .arrow-list li::before{
      content: "->";
      margin-right: 5px;
    }
    .arrow-list li::after{
      content: "·";
      margin-right: 5px;
    }

</style>
<ul class="arrow-list">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

组件通信分类

父子组件：
- 父->子，通过父组件自定义属性props传递给子组件，在子组件中通过props接收数据，注意props是单向绑定的，只能由父组件传递给子组件
- 子->父，通过this.$emit触发自定义事件，传递事件作为参数，父组件中监听这个自定义事件，并在处理函数中接收数据
- 非父子组件：
  - 全局事件总线Bus
    - 通过创建一个空的vue实例作为全局事件总线，实现任意组件间的通信，创建一个vue实例并挂载到原型上，然后在任何组件中可以通过this.$bus.$emit触发事件和this.$bus.%on监听事件来实现通信
  - vuex
    - 在vuex中，所有组件共享同一个状态树store，组件通过提交mutations改变状态，通过getters获取状态
  - provide/inject 主要用于高阶插件/组件库的开发
    - 祖先组件通过provide提供数据或者方法，后代组件通过inject接收数据