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 不能检测以下数组的变动：

1. 利用索引直接设置一个数组项时
2. 修改数组的长度时

因为这样的操作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：

1. props和$emit
2. $parent 和 $children （另有：$root：获取根实例）
3. provide / inject
4. ref / refs
5. vuex（状态管理器）
6. 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 = val
	Object.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()();//11

var closure = aa();
closure();//11
closure();//12
closure();//13

详细参考：https://marco-hui.github.io/JavaScript-outline/guide/advanced/closure.html

Q：用过哪些ES6语法？

A：

1. 变量声明：let、const
2. 解构赋值
3. 字符串扩展：includes、startsWith/endsWith、repeat(n)、字符串模板
4. 数组遍历：for…of
5. 合并对象：Object.assign(obj1,obj2,…objN)
6. 箭头函数
7. Symbol数据类型
8. Set集合
9. 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前端面试重点难点问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。