前端面试汇总

江河i

已于 2024-04-22 09:46:26 修改

阅读量109

点赞数

分类专栏： Js 文章标签：前端 css css3 1024程序员节

于 2023-06-01 15:47:41 首次发布

本文链接：https://blog.csdn.net/z18237613052/article/details/130989019

版权

Js 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

元素居中的方式

定位+margin: auto

<style>
    .box {
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid teal;
    }
    .text {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 40px;
        height: 40px;
        background-color: rgb(71, 85, 85);
    }
</style>

行内块元素(父元素 line-height:总高度;text-align: center;)

<style>
    .box {
        width: 300px;
        height: 300px;
        border: 1px solid teal;
        line-height: 300px;
        text-align: center;
    }

    .text {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: rgb(71, 85, 85);
    }
</style>

<body>
    <div class="box">
        <div class="text"></div>
    </div>
</body>

弹性盒子

.box {
        width: 300px;
        height: 300px;
        border: 1px solid teal;
        display: flex;
        justify-content: center;主轴居中
        align-items: center;侧轴居中
    }

在这里插入图片描述

css引入 link @import的区别

link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link引入的样式权重大于@import引入的样式。
link支持使用Javascript控制DOM去改变样式；而@import不支持。
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

v-for中key值作用

在使用v-for进行循环时,他默认使用就地更新的策略,这样就会出问题

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，为每项提供一个唯一 key attribute(属性)

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

然后注意:不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

v-for和v-if同时使用时:
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中,所以，不推荐v-if和v-for同时使用

vue2 的响应式与Vue3 的响应式区别

vue2 的响应式

核心:
    对象: 通过 defineProperty 对对象的已有属性值的读取和修改进行劫持(监视/拦截)
    
    数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

Object.defineProperty(data, 'count', {
  get() {},
  set() {}
})

问题

 对象直接新添加的属性或删除已有属性, 界面不会自动更新
 直接通过下标替换元素或更新 length, 界面不会自动更新 arr[1] = {}

Vue3 的响应式

核心:
    通过 Proxy(代理): 拦截对 data 任意属性的任意(13 种)操作, 包括属性值的读写, 属性的添加, 属性的删除等...
    
    通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

new Proxy(data, {
  // 拦截读取属性值
  get(target, prop) {
    return Reflect.get(target, prop)
  },
  // 拦截设置属性值或添加新属性
  set(target, prop, value) {
    return Reflect.set(target, prop, value)
  },
  // 拦截删除属性
  deleteProperty(target, prop) {
    return Reflect.deleteProperty(target, prop)
  }
})

proxy.name = 'tom'

defineProperty和proxy区别

页面刷新的几种方法

location.reload() (页面短暂空白)

vue中this.$router.go(0) (页面短暂空白)

改变组件的key值重新渲染组件
 <ComponentToReRender
    :key="componentKey"
  />

provide/inject组合方式 

<router-view v-if="isRouterAlive" />

// 通过 this.isRouterAlive 控制 router-view 达到刷新效果
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
F:\练习正式\Vue例子\页面刷新