• 技术文章 >web前端 >Vue.js

    【整理分享】48个前端高频面试题(附答案解析)

    青灯夜游青灯夜游2023-01-10 20:29:12转载210

    本篇文章给大家总结分享48个前端高频面试题(附答案解析),带你梳理vue、javascript等的基础知识,增强前端知识储备,值得收藏,快来看看吧!

    1.vue双向数据绑定的原理?

    mvvm场景:数据操作比较多的场景,需要大量使用DOM元素时,采用mvvm的开放方式,会更加便捷,让开发者更多的经历放在数据的变化上,解放繁琐的DOM元素

    2.vue的生命周期有哪些

    beforeCreate(创建前)、created(创建后)、beforeMount(载入前)、mounted(载入后)、beforeUpdate(更新前)、updated(更新后)、beforeDestroy(销毁前)、destroyed(销毁后)

    mounted 真实dom挂载完成 updated只要data数据被改变 就会自动更新触发 destroy销毁全局计时器和自定义事件

    如果使用了keep-alive会在多两个:activated、deactivated当组件初次加载会执行前4个生命周期,分别为: beforeCreate、created、beforeMount、mounted

    3.v-if 和v-show有什么区别?

    4.async await 是什么?它有哪些作用?

    async await 是ES7的新增,async用于声明一个函数,await用于等待一个异步方法执行完成。async函数返回的是一个promise对象,可以用.then方法添加回调函数,在函数执行的中,一旦遇到await就回先返回,等到这个异步操作完成之后,它再进行函数体内后面的这个语句

    5、数组常用的方法?哪些方法会改变原数组,哪些不会

    6.什么是原型链?

    每一个实例对象上有一个proto属性,指向的构造函数的原型对象,构造函数的原型对象也是一个对象,也有proto属性,这样一层一层往上找的过程就形成了原型链。

    7.什么是闭包?闭包有哪些优缺点?

    8.es6有哪些新特性?

    9.v-for 循环为什么一定要绑定key ?

    给每个dom元素加上key作为唯一标识 ,diff算法可以正确的识别这个节点,使页面渲染更加迅速!

    10.组件中的data为什么要定义成一个函数而不是一个对象?

    每个组件都是 Vue 的实例。组件共享 data 属性,当 data 的值是同一个引用类型的值时,改变其中一个会影响其他

    11.常见的盒子垂直居中的方法有哪些请举例3种?

    利用子绝父相定位方式来实现

        <style>
            .container{
                width: 300px;
                height: 300px;
                position: relative;
            }
            .conter{
                width: 100px;
                height: 100px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -50px;
                margin-left: -50px;
            }
        </style>

    利用Css3的transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。

       <style>
            .container{
                position: relative;
            }
            .conter{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        </style>

    flex

       <style>
            .container{
             display: flex;
             justify-content: center;
             align-items: center;
            }
            .conter{
                
            }
        </style>

    12.js数据类型有哪些,区别是什么

    13.什么是symbol

    是es6引入新的原始数据类型Symbol,表示独一无二的值

    14.什么是同源策略

    所谓同源策略就是浏览器的一种安全机制,来限制不同源的网站不能通信(域名、协议、端口号相同)

    15.promise是什么,有什么作用

    16.什么是递归,递归有哪些优缺点?

    17.let和const 的区别是什么

    18.vue性能优化

    19..mvvm和mvc

    20.路由模式:hash和history

    21.常用的块与行属性内标签有哪些?有什么特征

    22.== 和 ===的区别

    23.严格模式的限制

    24.git

    25.tcp和udp协议

    26.vuex的五种状态

    传递过程

    页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation,mutation会修改state中对应的值。 最后通过getter把对应值跑出去,在页面的计算属性中,通过,mapGetter来动态获取state中的值

    27.什么是防抖和节流,js 如何处理防抖和节流

    28.什么是重绘和回流

    29.Css优先级

    !importent>行内> id> 类,伪类,属性>标签,伪元素选择器 > 继承和通配符

    30.如何解决盒子塌陷

    31.清楚浮动的方法

    一共有5中方法

    32.Split()和 join()的区别?

    33.数组去重

    1.利用双重for循环,再利用数组方法splice方法去重(es5常用)

    2.set去重:准备一个数组,数组解构newset,再准备一个函数存放数组的变量作为函数的判断值,return Array.from(new set(arr))即可

    3.数组方法indexof

    4.数组方法sort Obj[a]-Obj[b]

    34.什么原因会造成内存泄露

    35.第一次加载页面会触发哪几个钩子函数?

    36.Vuex 的 5 个核心属性是什么?

    37.get和post区别

    相同点
    get请求和post请求底层都是基于TCP/IP协议实现的,使用二者中的任意一个,都可以实现客户端和服务器端的双向交互

    最本质的区别

    非本质区别

    38.跨域

    39.三种存储的区别

    存储大小:

    40.dom如何实现浏览器内多个标签页之间的通信

    41.请说出vue.cli项目中src目录每个文件夹和文件的用法?

    42.$route和$router的区别

    router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如history对象。。。经常用的跳转链接就可以用this.$router.push,和router-link跳转一样。

    route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等

    43.虚拟dom实现原理

    44.普通函数和箭头函数的区别

    45.怎样理解vue单项数据流

    数据总是从父组件传到子组件,子组件没有权利修改父组件传过来的数据,只能请求父组件对原数据进行修改

    46.slot插槽

    47.vue常见指令

    • v-model 多用于表单元素实现双向数据绑定
    • v-bind:简写为:,动态绑定一些元素的属性,类型可以是:字符串、对象或数组。
    • v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods里面
    • v-for 格式: v-for="字段名 in(of) 数组json" 循环数组或json
    • v-show 显示内容
    • v-else指令:和v-if指令搭配使用,没有对应的值。当v-if的值false,v-else才会被渲染出来
    • v-if指令:取值为true/false,控制元素是否需要被渲染
    • v-else-if 必须和v-if连用
    • v-else指令:和v-if指令搭配使用,没有对应的值。当v-if的值false,v-else才会被渲染出来
    • v-text 解析文本
    • v-html 解析html标签
    • v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
    • v-once 进入页面时 只渲染一次 不在进行渲染
    • v-cloak 防止闪烁
    • v-pre 把标签内部的元素原位输出

    48.vue中keep-alive 的作用

    (学习视频分享:vuejs入门教程编程基础视频

    以上就是【整理分享】48个前端高频面试题(附答案解析)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    上一篇:深入聊聊vue3中的reactive() 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • vue不刷新当前页面怎么办• vue能显示源码吗• vue怎么实现转换id• vue工程编译sass错误怎么办• 一文带你详解Vue中的组件化编程• 一文详解vue怎么实现v-model(附代码示例)
    1/1

    PHP中文网