Vue面试

1、什么是webpack（必会）
webpack是一个javascript的静态模块打包工具
webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子
最后输出由多个模块组合成的文件，webpack专注构建模块化项目
2、webpack的优点是什么？（必会）
专注于处理模块化的项目，能做到开箱即用，一步到位
通过plugin扩展，完整好用又不失灵活
通过loaders扩展, 可以让webpack把所有类型的文件都解析打包
区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展
3、webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全（必会）
webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
初始化参数：从配置文件读取与合并参数，得出最终的参数
开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，开始执行编译
确定入口：根据配置中的 entry 找出所有的入口文件
编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
在以上过程中，webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 webpack 提供的 API 改变 webpack 的运行结果
4、说一下 webpack 的热更新原理(必会)
webpack 的热更新又称热替换（Hot Module Replacement），缩写为 HMR。这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
HMR的核心就是客户端从服务端拉去更新后的文件，准确的说是 chunk diff (chunk 需要更新的部分)，实际上 WDS(webpack-dev-server) 与浏览器之间维护了一个 Websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发请求来获取更改内容(文件列表、hash)，这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该chunk的增量更新。
后续的部分(拿到增量更新之后如何处理？哪些状态该保留？哪些又需要更新？)由 HotModulePlugin 来完成，提供了相关 API 以供开发者针对自身场景进行处理，像react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。
5、webpack与grunt、gulp的不同？（必会）

1. 三者之间的区别
   三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。
   grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。
   webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。
2. 从构建思路来说
   gulp和grunt需要开发者将整个前端构建过程拆分成多个Task，并合理控制所有Task的调用关系 webpack需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader做何种解析和加工
3. 对于知识背景来说
   gulp更像后端开发者的思路，需要对于整个流程了如指掌 webpack更倾向于前端开发者的思路
   6、有哪些常见的Loader？他们是解决什么问题的？（必会）
   1、 file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
   2、 url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
   3、 source-map-loader：加载额外的 Source Map 文件，以方便断点调试
   4、 image-loader：加载并且压缩图片文件
   5、 babel-loader：把 ES6 转换成 ES5
   6、 css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
   7、 style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
   8、 eslint-loader：通过 ESLint 检查 JavaScript 代码
   7、Loader和Plugin的不同？（必会）
4. 不同的作用
   loader直译为"加载器"。webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
   Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。
5. 不同的用法
   Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
   Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。

1. Vue的最大优势是什么?
   简单易学, 轻量级整个源码js文件不大, 双向数据绑定, 数据驱动视图, 组件化, 数据和视图分离,
   Vue负责关联视图和数据, 作者中国人(尤雨溪), 文档都是中文的, 入门教程非常多, 上手简单.
   相比传统网页, Vue是单页面可以只刷新某一部分
2. Vue和jQuery区别是什么?
   jQuery应该算是一个插件, 里面封装了各种易用的方法, 方便你使用更少的代码来操作dom标签
   Vue是一套框架, 有自己的规则和体系与语法, 特别是设计思想MVVM, 让数据和视频关联绑定, 省略了很多DOM操作. 然后指令还给标签注入了更多的功能
3. MVVM和MVC区别是什么?
   MVC: 也是一种设计模式, 组织代码的结构, 是model数据模型, view视图, Controller控制器, 在控制器这层里编写js代码, 来控制数据和视图关联
   MVVM: 即Model-View-ViewModel的简写。即模型-视图-视图模型, VM是这个设计模式的核心, 连接v和m的桥梁, 内部会监听DOM事件, 监听数据对象变化来影响对方. 我们称之为数据绑定
4. Vue常用修饰符有哪些?
   .prevent: 提交事件不再重载页面；
   .stop: 阻止单击事件冒泡；
   .once: 只执行一次这个事件
5. Vue2.x兼容IE哪个版本以上
   不支持ie8及以下，部分兼容ie9 ，完全兼容10以上， 因为Vue的响应式原理是基于es5的Object.defineProperty(),而这个方法不支持ie8及以下。
6. 对Vue渐进式的理解
   渐进式代表的含义是：主张最少, 自底向上, 增量开发, 组件集合, 便于复用
7. v-show和v-if的区别
   v-show和v-if的区别? 分别说明其使用场景?
   v-show 和v-if都是true的时候显示，false的时候隐藏
   但是：false的情况下，
   v-show是采用的display:none
   v-if采用惰性加载
   如果需要频繁切换显示隐藏需要使用v-show
8. 说出至少4个Vue指令及作用
   v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签
   v-show 显示内容
   v-if 显示与隐藏
   v-else 必须和v-if连用 不能单独使用 否则报错
   v-bind 动态绑定 作用： 及时对页面的数据进行更改, 可以简写成:分号
   v-on 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
   v-text 解析文本
   v-html 解析html标签
9. 为什么避免v-for和v-if在一起使用
   Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.
10. Vue 中怎么自定义过滤器
    Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式
    全局的用Vue.filter()
    局部的用filters属性
11. Vue中:key作用, 为什么不能用索引
    :key是给v-for循环生成标签颁发唯一标识的, 用于性能的优化
    因为v-for数据项的顺序改变，Vue 也不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素
    :key如果是索引, 因为索引是连续的, 如果删除其中某一个, 会导致最后一个被删除
    当我们再删除的时候, :key再根据数据来把新旧的dom对比时, 删除:key不存在的对应的标签(添加也是一样的插入到指定位置, 别的都不会动)
12. 数组更新有的时候v-for不渲染
    因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()
13. 请说下封装 vue 组件的过程
    首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
    分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能，单独抽离成一个组件，实现复用
    具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法。
14. Vue组件如何进行传值的
    父向子 -> props定义变量 -> 父在使用组件用属性给props变量传值
    子向父 -> $emit触发父的事件 -> 父在使用组件用@自定义事件名=父的方法 (子把值带出来)
15. Vue 组件 data 为什么必须是函数
    每个组件都是 Vue 的实例, 为了独立作用域, 不让变量污染别人的变量
16. 讲一下组件的命名规范
    给组件命名有两种方式(在Vue.Component/components时)，一种是使用链式命名"my-component"，一种是使用大驼峰命名"MyComponent"，
    因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突
17. 请说下封装 vue 组件的过程
    首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
    分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能，单独抽离成一个组件，实现复用
    具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法。
18. Vue组件如何进行传值的
    父向子 -> props定义变量 -> 父在使用组件用属性给props变量传值
    子向父 -> $emit触发父的事件 -> 父在使用组件用@自定义事件名=父的方法 (子把值带出来)
19. Vue 组件 data 为什么必须是函数
    每个组件都是 Vue 的实例, 为了独立作用域, 不让变量污染别人的变量
20. 讲一下组件的命名规范
    给组件命名有两种方式(在Vue.Component/components时)，一种是使用链式命名"my-component"，一种是使用大驼峰命名"MyComponent"，
    因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突
21. 请说下封装 vue 组件的过程
    首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
    分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能，单独抽离成一个组件，实现复用
    具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法。
22. Vue组件如何进行传值的
    父向子 -> props定义变量 -> 父在使用组件用属性给props变量传值
    子向父 -> $emit触发父的事件 -> 父在使用组件用@自定义事件名=父的方法 (子把值带出来)
23. Vue 组件 data 为什么必须是函数
    每个组件都是 Vue 的实例, 为了独立作用域, 不让变量污染别人的变量
24. 讲一下组件的命名规范
    给组件命名有两种方式(在Vue.Component/components时)，一种是使用链式命名"my-component"，一种是使用大驼峰命名"MyComponent"，
    因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突
    1、Vue 的 nextTick 的原理是什么? （高薪常问）
    \1. 为什么需要 nextTick ，Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改–刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。
    \2. 理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;
    \3. 理解 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。
    2、vue生命周期总共分为几个阶段？（必会）
    Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
    1**）beforeCreate**
    在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    2**）created**
    在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
    3**）beforeMount**
    在挂载开始之前被调用：相关的 render 函数首次被调用。
    4**）mounted**
    el 被新创建的 vm.替换，并挂载到实例上去之后调用该钩子。如果实例挂载了一个文档内元素，当被调用时el 也在文档内。
    5**）beforeUpdate**
    数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
    6**）updated**
    由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    7**）activated**
    keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
    8**）deactivated**
    keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
    9**）beforeDestroy**
    实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
    10**）destroyed**
    Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
    11**）errorCaptured（2.5.0+ 新增）**
    当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
    3、第一次加载页面会触发哪几个钩子函数？（必会）
    当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数
25. 路由之间是怎么跳转的？有哪些方式
    1、
    2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面
    4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数
26. vue-router怎么配置路由
    在vue中配置路由分为5个步骤，分别是：
    引入vue-router.js
    配置路由path和组件, 和生成路由对象
    把路由对象配置到new Vue中router选项下
    页面使用 承载路由
    设置路由导航(声明式导航方式/编程式跳转)
27. vue-router的钩子函数都有哪些
    关于vue-router中的钩子函数主要分为3类
    全局钩子函数要包含beforeEach
    beforeEach函数有三个参数,分别是:
    to:router即将进入的路由对象
    from:当前导航即将离开的路由
    next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed （确认的）否则为false,终止导航。
    单独路由独享组件
    beforeEnter,
    组件内钩子
    beforeRouterEnter，
    beforeRouterUpdate,
    beforeRouterLeave
28. 路由传值的方式有哪几种
    Vue-router传参可以分为两大类，分别是编程式的导航 router.push和声明式的导航
    router.push
    字符串：直接传递路由地址，但是不能传递参数
    this.$router.push("home")对象：命名路由这种方式传递参数，目标页面刷新会报错-name+paramsthis.$router.push({name:“news”,params:{userId:123})
    查询参数 和path配对的是query
    this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …23}) 接收参数 this.route.query
    声明式导航
    字符串 <router-link to:“news”>
    命名路由 <router-link :to:"{name:‘news’,params:{userid:1111}}">
    还可以to="/path/值" - 需要提前在路由 规则里值 /path/:key
    查询参数
    还可以to="/path?key=value
29. 怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
    动态路由指的就是path路径上传智, 前提需要路由规则了提前配置/path/:key名, 可以写多个用/隔开, 获取使用$route.params.key名来提取对应用路径传过来的值
30. Vue的路由实现模式：hash模式和history模式（必会）
    hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
    history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更
31. 请说出路由配置项常用的属性及作用（必会）
    路由配置参数：
    path : 跳转路径
    component : 路径相对于的组件
    name:命名路由
    children:子路由的配置参数(路由嵌套)
    props:路由解耦
    redirect : 重定向路由
32. 编程式导航使用的方法以及常用的方法（必会）
    路由跳转 ： this.$router.push()路由替换:this.$router.replace()
    后退： this.$router.back()前进：this.$router.forward()
33. Vue如何去除URL中的#（必会）
    vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 URL 会自带 “#”。如果不想使用 “#”， 可以使用 vue-router 的另一种模式 history：new Router ({ mode : ‘history’, routes: [ ]})
    需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 “404” 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 “index.html” 页面。
34. 说一下你在vue中踩过的坑（必会）
    1、第一个是给对象添加属性的时候，直接通过给data里面的对象添加属性然后赋值，新添加的属性不是响应式的
    【解决办法】通过Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的
    2、 在created操作dom的时候，是报错的，获取不到dom，这个时候实例vue实例没有挂载
    【解决办法】通过：Vue.nextTick(回调函数进行获取)
35. 和router的区别？
    $route是路由信息对象，包括‘path，hash，query，fullPath，matched，name’等路由信息参数；
    $router是路由实例对象，包括了路由的跳转方法，实例对象等
36. 跟keep-alive有关的生命周期是哪些？（必会）
    1**）前言：在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染，在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染
    2）生命周期函数：在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。
    1、activated钩子：在在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。
    2、Activated钩子调用时机：** 第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用，并且给因为组件被缓存了，再次进入缓存路由、组件时，不会触发这些钩子函数，beforeCreate created beforeMount mounted 都不会触发
    1**、deactivated钩子：组件被停用（离开路由）时调用。
    2、deactivated钩子调用时机**：使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了，这个钩子可以看作beforeDestroy的替代，如果你缓存了组件，要在组件销毁的的时候做一些事情，可以放在这个钩子里，组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)