前端面试

123 阅读6分钟

Get 和 post 不同

  • Get 是从服务器上获取数据,post 是向服务器传送数据在客户端,get 通过 url 提交数据,数据在 url 中可以看到,post 方式,数据放在 html header 中提交安全性问题

  • Get 提交数据最多只能有 1024 字节,post 没有限制

什么是 csrf 攻击

  • Csrf(跨站点请求伪造) 攻击者在用户已经登录目标网站之后,诱使用户访问一个攻击页面,利用目标网站对用户的信任,以用户身份再攻击页面对目标网站发起伪造用户操作的请求,达到攻击目的

  • Js 中手写一个深拷贝

##什么时候用深拷贝 / 浅拷贝 无论深浅,都是需要的,当深拷贝发生时通常表明存在着一个聚合关系,当浅拷贝发生时,通常表明存在着相识关系

举个简单例子:当实现一个组合模式 Composite  Pattern 时通常都会实现深拷贝

当实现一个观察者模式 Observer  Pattern,时,就需要实现浅拷贝

1. Vue 的核心是什么

Vue 是一套构建用户界面的渐进式自底向上增量开发的 MVVM 框架, vue 的核心只关注视图层,核心思想:数据驱动(视图的内容随着数据的改变而改变)组件化(可以增加代码的复用性,可维护性,可测试性,提高开发效率,方便重复使用,体现了高内聚低耦合)

2. 请简述你对 vue 的理解

Vue 是一套构建用户界面的渐进式的自底向上增量开发的 MVVM 框架,核心是关注视图层,vue 的核心是为了解决数据的绑定问题,为了开发大型单页面应用和组件化,所以 vue 的核心思想是数据驱动和组件化,这里也说一下 MVVM 思想,MVVM 思想是 模型 视图 vm 是 v 和 m 连接的桥梁,当模型层数据修改时,VM 层会检测到,并通知视图层进行相应修改

3. 请简述 vue 的单向数据流

父级 prop 的更新会向下流动到子组件中,每次父组件发生更新,子组件所有的 prop 都会刷新为最新的值

数据从父组件传递给子组件,只能单向绑定,子组件内部不能直接修改父组件传递过来的数据,(可以使用 data 和 computed 解决)

4. Vue 常用的修饰符有哪些

修饰符:.lazy 改变后触发,光标离开 input 输入框的时候值才会改变

.number 将输出字符串转为 number 类型

.trim 自动过滤用户输入的首尾空格事件修饰符:

.stop 阻止点击事件冒泡,相当于原生 js 中的 event.stopPropagation() .prevent 防 止 执 行 预 设 的 行 为 , 相 当 于 原 生 js 中 event.preventDefault()

.capture 添加事件侦听器时使用事件捕获模式,就是谁有该事件修饰符,就先触发谁

.self  只会触发自己范围内的事件,不包括子元素

.once 只执行一次键盘修饰符:

.enter 回车键键.tab 制表键.esc 返回键.space 空格
.up 向上键.down 向下键.left 向左建.right 向右键

系统修饰符:.ctrl .alt    .shift  .meta

Vue 路由的实现

前端路由就是更新视图但不请求页面,

利用锚点完成切换,页面不会刷新

官网推荐用 vue-router.js 来引入路由模块定义路由组件

定义路由,使用 component 进行路由映射组件,用 name 导航到对应路由

创建 router 实例,传入 routes 配置创建和挂载根实例

用 router-link 设置路由跳转

Vue 路由模式 hash 和 history,简单讲一下

Hash 模式地址栏中有#,history 没有,history 模式下刷新,会出现 404 情况,需要后台配置

使用 JavaScript 来对 loaction.hash 进行赋值,改变 URL 的 hash 值

可以使用 hashchange 事件来监听 hash 值的变化

HTML5 提供了 History API 来实现 URL 的变化。其中最主要的 API 有以下两个:history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下,操作浏览器的历史纪录。唯一不同的是,前者是新增一个历史记录,后者是直接替换当前的历史记录。

Vue 路由传参的两种方式,params 和 query 方式与区别

动态路由也可以叫路由传参,就是根据不同的选择在同一个组件渲染不同的内容

用法上:query 用 path 引入,params 用 name 引入,接收参数都是类

似的,分别是 this.route.query.namethis.route.query.name 和 this.route.params.name

url 展示上:params 类似于 post,query 类似于 get,也就是安全问题, params 传值相对更安全点,query 通过 url 传参,刷新页面还在,params 刷新页面不在了

对 vue 中 keep-alive 的理解

概念:keep-alive 是 vue 的内置组件,当它动态包裹组件时,会缓存不活动的组件实例,它自身不会渲染成一个 DOM 元素也不会出现在父组件链中作用:在组件切换过程中将状态保留在内存中,防止重复渲染 DOM,减少加载时间以及性能消耗,提高用户体验。

生命周期函数:Activated 在 keep-alive 组件激活时调用,deactivated 在 keep-alive 组件停用时调用

如何让组件中的 css 在当前组件生效

在 styled 中加上 scoped

Vue 首屏加载慢的原因,怎么解决的,白屏时间怎么检测,怎么解决白屏问题

首屏加载慢的原因:第一次加载页面有很多组件数据需要渲染解决方法:

1.路由懒加载    component:()=>import(“路由地址”)

2.ui 框架按需加载

3.gzip 压缩

白屏时间检测:

????

解决白屏问题:

①使用 v-text 渲染数据

②使用{{}}语法渲染数据,但是同时使用 v-cloak 指令(用来保持在元素上直到关联实例结束时候进行编译),v-cloak 要放在什么位置呢, v-cloak 并不需要添加到每个标签,只要在 el 挂载的标签上添加就可以

原型链 ES6之前,JS没有类和继承的概念,JS是通过原型来实现继承的,在JS中一个构造器函数默认带有一个prototype属性,这个属性值是一个对象,同时这个prototype对象自带一个constructor属性,这个属性指向这个构造函数,同时每一个_proto_属性指向这个prototype对象,我们可以把这个叫做隐式原型,我们在使用一个实例的方法的时候会先检查这个实例中是否有这个方法,没有的话就会检查这个prototype对象是否有这个方法,