web前端面试重点难点问题
一、vue相关
Q:vue的底层原理?
A:Vue是采用数据劫持配合发布者-订阅者模式,通过Object.defineProperty()来劫持各个属性的getter和setter。
在数据发生变化的时候,发布消息给依赖收集器,去通知观察者,做出对应的回调函数去更新视图。
Q:vue3.0的新特性?
A:
1.代码结构更清晰
2.压缩包体积更小
3.Object.defineProperty 替换为es6的 Proxy。 将原本对对象属性的操作变为对整个对象的操作,可优化性增强
4.启用 TypeScript 语法,大大的简化了代码
详细参考:https://zhuanlan.zhihu.com/p/92143274
Q:vue中computed和watch的区别
A:computed是通过几个数据的变化,来影响一个数据,而watch,则是一个数据的变化,去影响多个数据。
详细参考:https://blog.csdn.net/u011423258/article/details/88641870
Q:vue里data为什么是函数而不是对象
A:如果写成对象,当组件被复用时,那么多个组件实例就会共用同一个data对象,这样改变其中一个实例的data,就会改变所有的。
因此写成函数返回值的形式,使每个组件实例都拥有自己的私有数据空间,不会造成混乱。
vue官方解释:https://cn.vuejs.org/v2/api/#data
Q:vue里数组改变为什么有的会渲染,有的不会渲染
A:对用数组的变异方法(push、pop、sort等)进行数组操作时可以达到视图的重新渲染,因为vue对这些方法进行了包裹。
vue 不能检测以下数组的变动:
- 利用索引直接设置一个数组项时
- 修改数组的长度时
因为这样的操作vue根本没法做一个Object.defineProperty处理。
解决方法:vm.$set(vm.items, indexOfItem, newValue)
vue官方说明:https://cn.vuejs.org/v2/guide/list.html#数组更新检测
Q:update里去改变data值会有问题吗?
A:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用update钩子。应避免在此期间更改状态,否则可能导致死循环。
Q:加载数据在created好还是在mounted好,两者区别?
A:
在created比较好,如果在mounted钩子函数中请求数据可能导致页面闪屏问题。
两者区别:
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
Q:vue通信的几种方式
A:
- props和$emit
- $parent 和 $children (另有:$root:获取根实例)
- provide / inject
- ref / refs
- vuex(状态管理器)
- localstorage和sessionStorage
Q:vue单向数据流
A:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。
Q:vue虚拟DOM的作用
A:速度快,减小了页面渲染过程的次数
详细参考:https://www.jianshu.com/p/af0b398602bc
Q:vue服务端渲染
A:Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
vue官方文档:https://ssr.vuejs.org/zh/
Q:vue项目性能优化
A:
参考:https://blog.csdn.net/q3254421/article/details/89193166
Q:vue中不用vuex如何实现在任意子组件都可以访问一个全局的变量?
A:通过 $root 访问根实例可实现。
vue官方说明:https://cn.vuejs.org/v2/guide/components-edge-cases.html#访问根实例
二、js相关
Q:es5实现const变量申明方法
A:利用Object.defineProperty
function myConst (key, val) {window.key = valObject.defineProperty(window, key, {enumerable: false,configurable: false,get: function () {return val},set: function (value) {if (value !== val) {throw new TypeError('不能重复定义')} else {return val}}})
}
详细参考:https://blog.csdn.net/weixin_34362875/article/details/87941318
Q:async/await 如何做异常处理
A:
参考:https://blog.csdn.net/q3254421/article/details/88878288
Q:对闭包的理解
A:闭包是这样一种机制: 函数嵌套函数, 内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制所收回。
举个简单的例子:
function aa(){var num=10;function bb(){num++console.log(num);}return bb;
}
//bb(); //无法直接访问函数内部的函数aa()();//11
aa()();//11
aa()();//11var closure = aa();
closure();//11
closure();//12
closure();//13
详细参考:https://marco-hui.github.io/JavaScript-outline/guide/advanced/closure.html
Q:用过哪些ES6语法?
A:
- 变量声明:let、const
- 解构赋值
- 字符串扩展:includes、startsWith/endsWith、repeat(n)、字符串模板
- 数组遍历:for…of
- 合并对象:Object.assign(obj1,obj2,…objN)
- 箭头函数
- Symbol数据类型
- Set集合
- Map映射
详细参考:https://marco-hui.github.io/JavaScript-outline/guide/advanced/es6.html
Q:这是一道考察面试者包含变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级等知识的JavaScript综合能力题。请看题:
function Foo() {getName = function () { alert (1); };return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}//请写出以下输出结果:
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();
A:
Foo.getName(); //2
getName(); //4
Foo().getName(); //1
getName(); //1
new Foo.getName(); //2
new Foo().getName(); //3
new new Foo().getName(); //3
详细解答:https://github.com/Wscats/articles/issues/85
其他问题
这些是开放性的问题,根据自己的实际与经验回答
Q:开发过程需注意的地方?
Q:有在学习或了解什么新的技术吗?
Q:对自己的职业规划?
Q:你在项目团队中是什么角色?
Q:项目开发中遇到哪些比较难的问题?
web前端面试重点难点问题相关推荐
- web前端面试-10大经典题(HTML基础)
HTML基础 1. HTML 文件中的 DOCTYPE 是什么作用? HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type,网页文件的文档类型 ...
- web前端面试宝典——带你直击面试重难点(40个经典题目,涵盖近90%的考点,码字2w,干货满满!)
系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上 的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容 参考链接 HTML & CSS 篇 ...
- web前端面试总结(自认为还算全面哈哈哈哈哈!!!!)
web前端面试总结(自认为还算全面哈哈哈哈哈!!!!) 一.CSS问题 1.flex布局 display:flex; 在父元素设置,子元素受弹性盒影响,默认排成一行,如果超出一行,按比例压缩 flex ...
- Web前端面试自我介绍对话技巧注意事项
大家在学会了web前端技术后,当然是要准备找一个适合自己的web前端工作了,那么面试环节是必不可少的,有一个良好的自我介绍表述,在HR心中也能加分不少,接下来小编就为大家介绍一下Web前端面试自我介绍 ...
- 【持续..】WEB前端面试知识梳理 - CSS部分
传送门: WEB前端面试知识梳理 - CSS部分 WEB前端面试知识梳理 - JS部分 最近在看大厂的一些面试题,发现很多问题都是平时没有在意的,很多知识都是知道一点但又很模糊说不出个所以然来,反思自 ...
- web前端面试问答_Web服务面试问答
web前端面试问答 在这篇文章中,我们涵盖了您需要熟悉的Web服务概念的几乎所有部分,以回答任何层级问题. 您还将在分类中找到最佳的Web服务面试问题和答案,因此只有在必要时才可以使用特定条款. 今天 ...
- 2018web前端不好找工作之web前端面试简历补救篇
web前端面试简历算是第一张脸,给HR/CTO的第一印象,弄好啦,就有面试的机会!? 关于前端面试简历简单的介绍几点吧. 1.关于简历如何写.首先可以去招聘网站上面看看.那么可以看哪些呢.比如在拉钩上 ...
- web前端不好找工作之web前端面试简历补救篇
web前端面试简历算是第一张脸,给HR/CTO的第一印象,弄好啦,就有面试的机会!? 关于前端面试简历简单的介绍几点吧. 1.关于简历如何写.首先可以去招聘网站上面看看.那么可以看哪些呢.比如在拉钩上 ...
- Web前端面试指导(完结)
首先感谢网友对我的关注,对智学无忧的关注!历经个多月,终于将web前端面试指导的课程全部更新完毕!希望对学习前端和面试前端的同学有帮助.智学无忧祝大家前程无忧! 面试真题学习地址 1. Web前端面 ...
最新文章
- Dom4j 解析Xml文档及XPath查询 学习笔记
- 建立asp.net应用程序提示:无法与服务器建立连接
- 机智云明星开发者 | 董程森
- 热议:这样的开源项目,你会支持吗?
- 光子 量子 DNA计算机的发展情况,科研萌新关于非冯诺依曼结构计算机的一些知识mewo~~...
- php mysql连续签到跨月_PHP连续签到功能实现方法详解
- 持续交付之软件包管理maven篇
- 华为鸿蒙系统和苹果系统哪个更好,华为鸿蒙OS和安卓、IOS相比有哪些特色 关于鸿蒙OS不得不知的十个问题...
- 使用git在本地电脑与远程GitHub/gitlub库中clone别人的github上的远程仓库代码,找资源
- 成长的勇气:一位IT人的辞职
- Linux -- file 命令
- java常用英语词汇翻译_JAVA 一些常用的英文及翻译
- python提取图片文字_怎样用Python提取图片中的文字
- 思科实验4.网络层:路由器IP地址配置
- (七)DAC0832 数模转换芯片的应用 以及运算放大器的学习 01
- QQ怎么样设置透明头像?2020最新方法!一个小工具快速搞定!
- 【Ablation Studies 理解】深度学习模型组件的对比实验/性能分析
- 俞敏洪老师谈英语单词记忆方法——转
- conda的一个坑。channels: - https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/pytorch - https://mirro
- 高通平台Linux kernel死机解题心得-trace32的使用
热门文章
- /lib/x86_64-linux-gnu/libcrypto.so.1.1: undefined symbol: EVP_CIPHER_CTX_cleanup解决方案
- [Android学习] 1. 简易登录界面设计
- AES 加密算法的原理详解
- CAD2010安装和小白的使用
- SaaS:光环难掩四大隐患 先驱者或成捐躯者
- R语言差异检验:t检验
- Ettercap	进行arp嗅探密码
- Python守护进程 daemon
- supervisor安装总结
- 仿简书APP富文本编辑器实现