前端面试总结题目和答案之一

356 阅读5分钟

1. 数组哪些方法会触发Vue监听,哪些不会触发监听

    触发Vue监听的数组方法
        push , pop,unshift,shift,reverse,splice,sort
    不会触发Vue监听的数组方法
        通过索引设置元素,
        修改length属性,
        使用非vue响应式方法,如,array.forEach,array.map
    可以通过使用this.$set()或者Vue.set()方法

2. position有哪些属性

    static: 这是 position 的默认值
    absolute:绝对定位,会脱离文档流
    relative: 相对定位,不会是元素脱离文档流
    fixed: 固定定位,会脱离文档流
    sticky: 粘性定位,它的行为就像 position: relative 而当页面滚动超出目标区域时,
        他的表现就像position:fixed,他会固定在目标位置。当粘性定位生效时会脱离文档流

3. vue中watch和 computed的区别,computed和method的区别

1. watch:
    
        它不支持缓存,数据变化时,他就会触发相应的操作
        它支持异步操作
        监听的函数接收两个参数,第一个参数是最新的值,第二个是变化之前的值
            当一个属性发生变化时,就需要执行相应的操作
        监听的数据必须是data中声明的或者父组件传递过来的props中的数据,
            当发生变化时,会触发其他操作,函数有两个参数:
            immediate: 组件加载立即触发回调函数
            deep: 深度监听,发现数据内部的变化,在复杂数据类型中,
            例如数据中的对象发生变化,需要注意的是,deep无法监听到数组和对象内部的变化
        当想要执行异步或者昂贵的操作以相应不断地变化时,就需要使用watch
    
2. computed:
    
        它支持缓存,只有依赖的数据发生了变化,才会重新计算
        不支持异步,当computed中有异步操作时,无法监听数据的变化
        computed 的值会默认走缓存,计算属性是基于他们的响应式依赖进行缓存的,
            也就是基于data声明过,或者父组件传递过来的props中的数据进行计算的
        如果一个属性是由其他属性计算而来的,这个属性依赖其他的属性,一般会使用 computed
        如果computed属性的属性值是函数,那么默认使用get方法,函数的返回值就是属性的属性值;
            在computed中,属性有一个get方法和一个set方法,当数据发生变化时,会调用set方法
    
3. method和computed
     
         可以将同一个函数定义为一个method或者一个computed.对于最终的结果两者都是一样的,
         computed: 计算属性是基于他们的依赖进行缓存的,只有在他的依赖项发生改变时才会重新计算
         method:每次调用都会执行
    

4. vue的watch是否可以取消?怎么取消

vue中,watch监听器无法直接在监听一次之后自动销毁,然而可以通过在监听器内部手动注销监听器来达到类似的效果。 image.png 在data中创建valueToWatch定义需要监听的数据;hasWatchedOnce,标志位用于记录是否已经监听过一次;watcher用于存储watcher对象 zhuanlan.zhihu.com/p/642714205 blog.csdn.net/xinTianou12… blog.csdn.net/xhc6666/art…

5. 如何获取到promise多个then 之后的值

1. promise.all可以实现
2. async/ await
3. 直接链式调用中传递值

6. 常见的http状态码

101: ws升级协议中
200: 请求成功
201:请求已经被实现,并因此创建了一个新的资源
203: 请求成功什么都没有返回
301: 永久重定向
302: 临时重定向
304: 协商缓存资源没有修改
400: 服务器不理解
401: 请求要求进行身份验证
403: 服务器理解了,不予解决
404: 找不到资源
405: 请求中指定的方法不被允许
500: 服务器出现问题
501: 服务器不支持当前请求所需要的某个功能
503: 由于临时服务器维护或者过载,服务器当前无法处理请求

7. 谈谈你对display:flex 弹性盒子属性的了解

    弹性盒子(display:flex)
    容器属性:
        justify-content: flex-start,flex-end,center, space-between,space-around
        align-items: flex-start,flex-end,center,baseline, stretch
        flex-direction: (主轴的方向)row, row-reverse,column,column-reverse
        flex-wrap:(换行) nowrap, wrap,wrap-reverse
        
        flex-grow: item的放大比例
        flex-shrink: 项目的缩小比例
        flex-basis:auto,默认项目的本来大小
        flex: auto(1,1,auto)或者none(0,0,auto),item中使用

8. 如何判断一个值是否是数组

    arr instanceof Array    // true
    arr.constructor == Array  // true
    Array.isArray(arr)  // true
    Array.prototype.isPrototypeof(arr)   // true  判断一个对象是否存在另一个对象原型链上
    Object.getPrototypeof(arr) == Array.prototype    // true  返回指定对象的原型
    Object.prototype.toString.call(arr) = '[object Array]'   // true

9. typeof和instance的区别

    都是用来检测数据类型的
    typeof[value]
        底层机制是按照数据的二进制的值进行检测的
        除了null以外的其他原始值类型的检测
        除了能区分函数对象,其他对象无法细分
    [value] instanceof Array
        无法处理原始值类型,返回的结果都是false
        任何对象基于 instanceof 检测是否为Object实例,结果都是true,无法区分是否为标准普通对象
        一旦原型链被重构,检测的结果是不准确的
        真实项目中一般用来检测是否为特殊对象
    

10. es6-es10新增哪些东西

    letconst 关键字
    函数参数默认值
    箭头函数
    模版字符串
    扩展操作符
    解构赋值
    promise/finally/any
    async/await
    iterator
    Generator
    Symbol,BigInt
    import()
    Reflect,flat,proxy
    Map/WeakMap/Set/WeakSet
    Object.entries/value