前端面试题大全（二）持续更新中

为什么组件保存数据的data是一个函数？

因为组件是用来复用的 ，为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。

如果组件中的data使用对象的话，每个实例（组件）上使用的data数据是相互影响（对象是对于内存地址的引用，直接定义个对象的话组件之间都会使用这个对象，这样会造成组件之间数据相互影响。 ）
如果组件中data选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的data属性值不会互相影响

详细说一下组件的生命周期钩子函数，以及各个声明周期函数可以做什么事情？

vue生命周期共分为四个阶段
一：实例创建
二：DOM渲染
三：数据更新
四：销毁实例

共有八个基本钩子函数:

beforeCreate：在vue实例化之前调用，在这个函数中无法获取数据，同时页面的真实dom节点也没有渲染出来为null
在此阶段可以做的事情：加loading事件

created：在vue实例化之后调用，可以获取到数据页面真实dom
在此阶段可以做的事情：解决loading，请求ajax数据，为mounted渲染做准备

beforeMount：挂载到DOM树之前调用（代表dom马上就要被渲染出来了，但是还没有真正的在页面中渲染出来）可以做ajax与初始化事件的绑定操作
在此阶段可以做的事情：可以做ajax与初始化事件的绑定操作

mounted：挂载到DOM树之后调用，真实的dom也已经渲染出来了
在此阶段可以做的事情：启动定时器、绑定自定义事件、订阅消息等【初始化操作】

beforeUpdate：数据更新之前调用

updated：数据更新之后调用
在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）

beforeDestroy：vue实例销毁前执行，此时仍然可以使用子组件的实例、methods、watch
在此阶段可以做的事情： 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

destroyed：vue实例销毁后执行，无法再使用子组件的实例，methods、watch
在此阶段可以做的事情： 组件销毁时进行提示

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子activated 与 deactivated。

activated ：activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。

activated调用时机：

第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用：

deactivated：组件被停用(离开路由)时调用

注意：使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。

vue中如何获取DOM对象？

方法一、

直接给相应的元素加id，然后再document.getElementById(“id”)获取，然后设置相应属性或样式

注意：要在mounted中使用，因为只有在执行mounted的时候，vue已经渲染了dom节点，这个时候是可以获取dom节点的

方法二、

使用ref，给相应的元素加ref="name"， 然后再this.$refs.name获取到该元素

data改变更新DOM是同步还是异步的?怎么访问到更新后的DOM呢?

异步

当data中某个属性改变时，这个值并不会立即渲染到页面上，而是先放到watcher队列上（异步），所以，导致改变的数据挂载到dom上有延迟，故而我们拿到的还是原来的数据

我们可以使用$nextTick：因为$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调

还可以使用定时器setTimeout

webpack是什么?作用是什么? 默认的入口文件什么?

webpack是什么?

• webpack的诞生之初主要是想解决代码的拆分问题。
• webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。

作用是什么?

代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布

• 模块打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。利用打包，来保证我们项目结构的清晰和可读性。
• 编译兼容。在以前，我们总是要手写一堆浏览器兼容代码，这让人很头皮发麻，而在今天这个问题被大大的弱化了，通过webpack的Loader机制，对代码做polyfill，还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。
• 能力扩展。通过webpack的Plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现如按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量。

默认的入口文件什么?

webpack 默认的入口文件是 src/index.js，我们可以通过在webpack.config.js中去配置 entry 属性来对入口文件进行修改。

module.exports = {
    
    entry: './public/index.js'
}

#默认入口文件
 ./src/index.js
#默认出口文件
./dist/main.js

webpack打包命令是什么? 打包的文件默认存在什么地方?

• 打包命令npm run build

(这个命令会告诉webpack打包工具去执行package.json里面的scripts对象的build的脚本，也就是说实际执行的是webpack --config webpack.prod.js) 。

• 打包的文件默认存在:根路径/dist/main.js

webpack的loader有哪些? 作用是什么? babel的作用是什么?

webpack的loader有哪些?以及作用

在页面开发过程中，我们经常性加载除了 js 文件以外的内容，这时候我们就需要配置响应的 loader 进行加载

常见的 loader 如下：

• sty