前端面试题2023

1.vuex运用的场景,用于什么地方?

  1.1 什么时候什么情况下使⽤vuex?

  1.1.1 构建⼀个中⼤型单页应⽤,需要考虑到如何更好地在组件外部管理状态。

注意:如果不是开发⼤型单页应⽤,使⽤vuex可能是繁琐冗余的,也就是本来很快就可以开发完成的项⽬,⽤了vuex,结果却复杂了。⼀般简单

的store模式就可以了。

1.1.2公共数据(多个页面都会用到的的公共数据。例如用户的token,用户信息等)

1.1.3 非父子组件间的通信(跨组件、毫无关系的N个页面)

1.2 vuex有哪几种属性?

五种种属性:state、getters、mutations、actions、modules

state、getters、mutations、actions、modules这五个属性,以如下三行代码来开始进行解释

1、state

state : 数据源(相当于数据库)

2、getters

getters : 按需取出数据源中的数据

3、mutations

mutations: 前面两个state和getters都是状态值本身,mutations才是改变状态的执行者。

不经过mutations不能直接修改state中的数据,因为state是实时更新的,如果直接修改state中的数据是异步操作,当state异步还没有执行完,state的数据就有可能发生变化,会导致程序出问题,所以必须通过mutations限制state不允许异步操作

4、actions

actions: 和mutations的不同的是,actions支持异步和同步的操作,mutations只支持同步的操作。

css3新特性

css3新增了三个边框属性,分别是:

border-radius:创建圆角边框

box-shadow:为元素添加阴影

border-image:使用图片来绘制边框

transition 过渡,多个属性之间用逗号进行分隔

transform 转换,缩放,倾斜或平移给定元素

文字

text-shadow 阴影

颜色

css3新增了新的颜色表示方式rgba与hsla

rgba分为两部分,rgb为颜色值,a为透明度

es6新特性

扩展元素符...(好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列)

构造函数新增的方法

关于构造函数,数组新增的方法有如下:

Array.from() 将两类对象转为真正的数组

Array.of() 用于将一组值,转换为数组

属性的简写

less sess  的区别

sess:是一种对css的一种扩展提升,增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写,然后编译成css。

less:LESS保留了css的任何功能,同时提供了多种方式将写好的代码转化成标准的CSS代码,可以在任何使用随时切换到css的语法进行书写。

两个div盒子 同时设置margin:10px 会出现啥效果?

上下垂直,之间相隔10px

rem的作用?

px:绝对单位,页面按精确像素展示

em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值

rem:相对单位,可理解为root em, 相对根节点html的字体大小来计算,是指相对于根元素的字体大小的单位

说说自适应布局?

自适应布局:自适应布局:如果屏幕太小会发生内容过于拥挤。 响应式布局:可以自动识别屏幕宽度并做出相应调整的网页设计。如果屏幕太小会发生内容过于拥挤。用浮动和ie盒子

响应式布局:可以自动识别屏幕宽度并做出相应调整的网页设计。


说说生命周期和生命周期到哪一步执行什么?

常用的生命周期有哪些?

Vue生命周期总共可以分为8个阶段:创建前后, 载入前后,更新前后,销毁前销毁后,以及一些特殊场景的生命周期

生命周期描述:

beforeCreate  组件实例被创建之初

created 组件实例已经完全创建

beforeMount 组件挂载之前

mounted 组件挂载到实例上去之后

beforeUpdate 组件数据发生变化,更新之前

updated 组件数据更新之后

beforeDestroy 组件实例销毁之前

destroyed 组件实例销毁之后


activatedkeep-alive 缓存的组件激活时

deactivatedkeep-alive 缓存的组件停用时调用

errorCaptured捕获一个来自子孙组件的错误时被调用

#

get 和 post 的区别?都是什么

get请求可以被浏览器缓存,而post请求不能被缓存。
get是从服务器获取数据,而post是向服务器传送数据。

node.js

html中的<iframe></iframe>标签

iframe标签是一个双标签/围堵式标签<iframe></iframe>,是一个内联框架

iframe标签的作用?

      用于在当前的HTML页面中嵌入另一个文档,比如当好几个页面都有大部分的相同内容(相同的页面头部和底部),那么这些相同的页面部分可以放在新的页面中,然后就可以使用<iframe>标签将重复的内容嵌入到各个页面中。

iframe标签的优点?

      使用iframe标签的好处是可以减少代码的重复率,减轻代码量,并且页面的url还是你当前的url,不会被嵌入的页面的url所影响

基本语法

      <iframe  src = "..." ></iframe>

iframe标签常用属性

        height 、width — 设置框架显示的高度、宽度

        name — 可以定义框架的名称

        frameborder — 定义框架是否需要显示边框,取值为1表示需要边框

        scrolling — 用于设置框架是否需要显示滚动条,取值可以是yes/no/auto

        src — 设置可以使用的页面的地址,也可以是图片地址

        align — 设置元素对齐方式,取值可以是left/right/top/middle/bottom

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容