前端面试概要（Vue开发）

2020-08-10  本文已影响0人  高小二的心情

JS 篇

闭包

定义：函数内部定义函数，内部函数持有外部函数参数

作用

副作用：内存管理，可能会内存溢出

内存溢出的常见方式

参考：https://blog.csdn.net/qappleh/article/details/80337630

防抖与节流

请求的取消

WebSocket 与http

其他特点包括：

websocket的api与 心跳机制（重要）

flash 即将过期，有什么代替方案？

Function的命名区别

    var a=function(){ console.log(1) } 与 function  a () { console.log(2)} 的区别

JS类型判断的方法

Promise 的实现原理

参考：http://liubin.org/promises-book/

常见问题

    sendRequest('test1.html', '').then(function(data1) {
        console.log('第一次请求成功, 这是返回的数据:', data1);
        return sendRequest('test2.html', data1);
    }).then(function(data2) {
        console.log('第二次请求成功, 这是返回的数据:', data2);
        return sendRequest('test3.html', data2);
    }).then(function(data3) {
        console.log('第三次请求成功, 这是返回的数据:', data3);
    }).catch(function(error) {
        //用catch捕捉前面的错误
        console.log('sorry, 请求失败了, 这是失败信息:', error);
    });

async 函数

实现异步改为同步的方式有哪些

ES6 新增特性有哪些

常见问题

简述打开一个新页面时，浏览器如何实现页面渲染

HTTP 三次握手简述

https 为什么是安全的（http与https对比着说）？

JS 继承与原型、原型链

this指向问题

对象创建的方式有哪些，有什么区别（对象原型链问题）

第一种： 字面量
var Obj1 = {name:”o1”};
var Obj2 = new Object({name:”o2”});
// var a = {} 其实是 var a = new Object() 的语法糖
// var a = [] 其实是 var a = new Array() 的语法糖
//所以上面 Obj1 与 Obj2 的申明方式等价

第二种：构造函数
var M = function (name) { this.name = name };
var Obj3 = new M(“o3”) ;

第三种：Object.create（继承的原型对象）
var p = {name:”o4”}
var Obj4 = Object.create(p);

参考：https://blog.csdn.net/m0_37585915/article/details/80843945?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param

大体积文件上传（分片上传的实现）

敏捷开发模式（了解其概念）

CSS 篇

css 权重问题

!important>行内样式>id>class,伪类选择，属性选择器>>标签>继承》通配符
link>@important

css @import 与link 引入有什么不同，哪种方式更优？

参考链接：https://www.cnblogs.com/my--sunshine/p/6872224.html

less 与scss 的使用

常见问题

回流与重绘的概念

https://www.cnblogs.com/mdr86553/p/12048742.html

布局

如何实现居中

Css 中的BFC及消除方式

如何实现一个三角形？

如何实现响应式布局？

vm、rem、em 、px的区别

在vue 移动端开发过程中，如何设置字体、文字为响应式

VUE 篇

实现原理；

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Objct.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

参考：https://baijiahao.baidu.com/s?id=1614572521202569483&wfr=spider&for=pc

如何实现数据双向绑定，简述原理和具体实现方式？

参考：https://blog.csdn.net/yun_hou/article/details/86313212

vue的生命周期及先后顺序

如何全局注册组件和过滤器？多个组件和过滤器如何注册？

//全局过滤器统一导出
conset fuction  filter1(){} 
conset fuction  filter2(){} 
conset fuction  filter3(){} 
export {filter1,filter2,filter3}
//统一导入
import * as filters from '@/common/filters' 
//循环生成过滤器
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})
//统一导入组件同理
import * as compontents from '@/common/compontents' 
//循环生成过滤器
Object.keys(compontents).forEach(key => {
    Vue.Compontent(key, compontents[key])
})

传参方式

页面缓存keep-alive 的实现

如何实现组件的强制刷新功能;

vue管理平台鉴权如何设置？

参考：https://www.cnblogs.com/zhengrunlin/p/8981017.html

菜单权限

1、常规系统设计分为菜单、角色、人员；
2、菜单和按钮分配给角色;角色分配给人员；
3、用户登录时获取角色对应的菜单树和按钮集合；通过遍历菜单树形成router树；
4、调用路由addrouters api 动态添加在路由对象中；用户菜单常规是按照路由表对应生成的；

按钮权限

通常后台返回的按钮是存在于菜单树下的；需要单独遍历成一个按钮权限code集合；
通过自定义指令的形式来控制按钮节点的生成与删除
import Vue from 'vue';
import store from '@/vuex/store';
//权限按钮指令
Vue.directive('has', {
    inserted: function(el, binding) {
        if(!store.state.permissionButton[binding.value]){
            el.parentNode && el.parentNode.removeChild(el);
        }
    }
})
//使用 add 权限码判断
<el-button v-has="'add'">新增<el-button/>

Token 的使用

一种前后台权限验证手段；通常在请求的header中进行添加；
当缺少或者过期后，请求会返回401状态码；需要重新获取token或者重新登录；
***特殊业务***
token过期后跳转至登录，重新授权获取登录和再回跳至之前过期页面

//asios Response响应拦截
switch (error.response.status) {
                case 401:
                    // 返回 401 清除token信息并跳转到登录页面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}//保持页面地址
                    })
            }
//登录
methods:{
    login(){
        let redirect=decodeURIComponent(this.$router.query.redirect);
        if(redirect){
            this.$router.push(redirect);
            return 
        }
        this.$router.push('/login')
    }
}

Vue 语法忽略盲区（vue、vue-router、vuex、vue-cli、webpack）

watch 与computed 的区别?

如何在methods 中使用filter的方法？

参考：https://blog.csdn.net/qq_35430000/article/details/92795438

修饰符有哪些？

指令有哪些以及如何实现自定义指令?

参考：https://cn.vuejs.org/v2/guide/custom-directive.html

<transition> 的使用

参考：https://cn.vuejs.org/v2/api/#transition

虚拟dom createElement（）与JSX 写法；

vue-router 的使用

简述 vuex 的构成及各部分功能（state、action、getter、mutation、module、plugins（很少用到））

你还了解哪些状态管理的解决方案

solt 语法的具体实现 ？

vue-router 前置钩子函数中next（）有哪些用法？

简述webpack 的实现原理（基本构成、流程概括）？

webpack 中plugin与loader 的区别？

vue 中v-for 在遍历数组和对象时，循环参数（item、index、value、name、index）代表什么？

//data 
object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
 items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
//循环数组
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>    
//循环对象
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

v-for 中添加key的作用是什么？

v-if 与v-show 的区别及在哪些情况下使用？

set( )、nextTick( ) 的作用是什么？

vue3 与 vue2 相比有哪些改动？

Vue element-ui 键盘回车事件表单自动提交造成页面刷新问题（使用element-ui 有没实际的经验）

项目搭建做哪些工作？（结合实际来说）

上一篇 下一篇

猜你喜欢

热点阅读