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 = 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：
- 变量声明：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：项目开发中遇到哪些比较难的问题？