基于最近面试，一点点常问前端问题汇总

/ 0评 / 0赞

常问的一些问题，可能比较简单，没有深入到底层或者原理等。

正文

  1. 箭头函数和普通函数区别

    箭头函数一般是匿名函数，箭头函数不能使用new关键字也不具备this等构造函数方法

  2. 对flex布局的了解

    传统的css布局都是基于盒子模型，flex弹性盒子模型是弹性布局，用来为盒子模型提供最大的灵活性

    使用flex时，float等样式会自动失效

     

  3. es6提供了哪些新的语法

    • 提供了新的数据类型 symbol 用来表示独一无二的，我们可以使用它实现私有变量

    • 提供了异步语法，从原本的回调地狱中脱离出来，可以使用Promise链式调用，也可以使用await每一句单独一行

    • 提供了Proxy函数，允许我们修改默认行为，而vue3对数组和对象的监听就是使用proxy

    • 提供了let和const关键字，解决了原本var的变量提升和作用域问题

    • 提供了新的数据结构set和map

      • set不允许添加重复的值
      • map提供了”值对值“的对应，是一种更完善的hash结构，相对于obejct更适合于”键值对“的数据结构

    • 提供了变量的解构赋值

  4. vue父子组件通信、兄弟组件通信

    • 父组件到子组件 通过prop 传输属性 可以通过ref获取对象直接调用子组件方法
    • 子组件到父组件 发布订阅模式 父组件发布$on发布事件 子组件使用$emit调用
    • 兄弟组件通信 通过父组件做中间层

  5. webpack有哪些配置项

  6. 前端有哪些储存方式，他们有什么区别

    • cookie 最大存储数据一般10kb以内，一般自定义失效时间
    • localStorage 最大存储数据一般在2.5MB-10MB， 用户数据一般一直存在
    • sessionStorage 存储数据量同上， 在用户关闭浏览器后数据失效
    • websql 在新的标准中已废弃
    • indexdb 浏览器提供的本地数据库，用于大量数据存储，没有使用过

  7. v-model的实现原理

     

  8. 移动端一般如何适配

    用vw和rem

     

  9. 怎么画一个三角形

    div宽度和高度为0时，border设置宽度和颜色，其中留一边为固定颜色，其他为透明

  10. js文件怎么异步加载或者延迟加载

    • script标签的 defer属性和async属性

    • async并不会按照脚本的顺序执行，而是谁先加载完谁先执行

    • 在js的onload时向DOM追加script标签

       

  11. nextTick()

    用于接受vue页面渲染回调

     

  12. Object.defineProperty

    可以用于拦截对object的属性修改做监听，vue的双向绑定就是基于对data的Object.defineProperty的循环

     

  13. vue为什么使用异步渲染策略 vue采用的是组件级更新，如果不异步更新组件页面的任何更改都会触发整个页面的重新渲染，导致性能问题

     

  14. 前端攻击有哪几种方式

    • sql注入 后端依赖前端返回的参数直接做sql查询，导致sql不正常拼接造成安全问题

    • xss跨站脚本攻击 通过表单提交等方式向代码中注入JS脚本，因为这些代码拥有与正常代码的等同权限，所以比较危险，解决方法是对提交内容语义化转换

    • CSRF 跨站请求伪造

    • 网站嵌套攻击

    • 中间人攻击

       

  15. css文字两端对齐

    • text-align: justify
    • text-align-last: justify

     

  16. 重绘和重排(回流)

    • 网页的优化就是要减少重绘和回流
    • 回流必定引起重绘，重绘不一定会引起回流
    • 回流导致渲染树重新计算，开销比重绘大，所以我们应该尽量避免回流的产生

     

  17. vue中key的原理

    便于diff算法的更新，key的唯一性，能让算法更快的找到需要更新的dom，需要注意的是，key要唯一，不然会出现很隐蔽性的更新问题。

     

  18. vue双向绑定的原理是什么？

    双向数据绑定是基于Object.defineProperty()重新定义get和set方法实现的。修改触发set方法赋值，获取触发get方法取值，并通过数据劫持发布信息。

  19. vue中是如何检测数组变化的？

    vue2.0中使用Object.defineProperty()重新定义数组中的每一项，对常用数组方法进行重写
    vue3.0中使用proxy

     

  20. vue优化手段

    1. 图片资源使用cdn

    2. 图片太多应该使用懒加载

    3. 路由应该使用懒加载

    4. 采用ssr服务端渲染

    5. 开启gzip

       

  21. mvvm

    MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。

    在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

    ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

  22. MVVM和MVC的区别

    mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到 View 。

  23. vue路由守卫

    • 全局守卫

      • 前置守卫 beforeEach
      • 后置守卫 afterEach

    • 组件内守卫

      • 进入组件 beforeRouteEnter
      • 离开组件 beforeRouteLeave

    • 路由独享守卫

      beforeEnter 与全局守卫一致，写在该路由对象下

     

  24. watch和computed区别

    • watch支持异步，computed不支持异步操作
    • watch不支持缓存，数据变化会直接触发操作 computed支持缓存，只有依赖数据改变才会计算，主要当作属性使用
    • watch回调中会有新旧值，computed一般是简单计算

  25. vue的生命周期

    • beforeCreate
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • beforeDestroy
    • destroyed

  26. 小程序Page的生命周期

    • onload 页面加载完成
    • onshow 页面每次显示，如从别的页面返回回来也会触发
    • onready 页面初次渲染完成
    • onhide 页面隐藏
    • onunload 页面注销

  27. 小程序中bindtap和catchtap的区别

    他们的不同点主要是bindtap是冒泡的，catchtap是非冒泡的

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注