19. Vue面试题汇总

Java全栈面试题汇总目录-CSDN博客

1. 什么是MVVM?

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI组件，它负责将数据模型转化成UI展现出来，ViewModel是一个同步View和Model的对象。

在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。

ViewModel通过双向数据绑定把View层和Model层连接起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理

2. MVVM与MVC区别，它和其它框架(jQuery)的区别是什么，哪些场景适用?

MVC和MVVM其实区别并不大，都是一种设计思想。主要就是MVC中Controller演变成MVVM中的ViewModel。MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别：Vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多、频繁的场景，更加便捷。

3. Vue优点?

• 低耦合。视图(View)可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
• 可重用性。可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
• 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计
• 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写

4. 单页面应用及其优缺点?

缺点：

不支持低版本的浏览器，最低只支持到IE9；

不利于SEO的优化(如果要支持SEO，建议通过服务端来进行渲染组件)；

第一次加载首页耗时相对长一些；

不可以使用浏览器的导航按钮需要自行实现前进、后退。

优点：

无刷新体验，提升了用户体验；

前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；

API共享，同一套后端程序代码不用修改就可以用于Web界面、手机、平板等多种客户端

用户体验好、快，内容的改变不需要重新加载整个页面。

5. Vue的双向数据绑定原理是什么？

Vue采用数据劫持+订阅发布模式实现双向绑定。通过Object.defineProperty()方法来为组件中data的每个属性添加get和set方法，在数据变动时，触发set里相应的监听回调函数，将变动信息发布给订阅者。主要有以下步骤：

组件初始化时：

创建一个dep对象作为观察者(依赖收集、订阅发布的载体)；

通过Object.defineProperty()方法对data中的属性及子属性对象的属性，添加getter和setter方法；调用getter时，便去dep里注册函数。调用setter时，便去通知执行刚刚注册的函数。

组件挂载时：

compile解析模板指令，将其中的变量替换成数据。然后初始化渲染页面视图，并将每个指令对应的节点绑定上更新函数、监听函数。后续一旦数据发生变化，便会更新页面。页面发生变化时也会相应发布变动信息；

组件同时会定义一个watcher类作为订阅者，watcher可以视作dep和组件之间的桥梁。其在实例化时会向dep中添加自己，同时自身又有一个update方法，待收到dep的变动通知时，便会调用自己的update方法，触发compile中的相应函数完成更新。

6. 如何动态更新对象或数组的值？

因为Object.defineProperty()的限制，Vue无法监听到对象或数组内部某个属性值的变化，因此在直接设置以上两类数据的值时，页面不会实时更新。此时可以通过this.$set方法来解决

7. Vue模版编译原理知道吗，能简单说一下吗？

简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：

1. 生成AST树
2. 优化
3. code gen

首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。

使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。

Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。

编译的最后一步是将优化后的AST树转换为可执行的代码。

8. Vue如何获取DOM元素？

首先为标签元素设置ref属性，然后通过this.$refs.属性值获取。

9. v-on如何绑定多个事件？

<input type="text" v-on="{input:onInput, focus:onFocus, blur:onBlur}">

10. Vue如何清除浏览器缓存？

1. 项目打包的时候给每个打包文件加上hash值，一般是在文件后面加上时间戳
2. 在html文件中加入meta标签，content属性设置为no-cache
3. 在后端服务器中进行禁止缓存设置

11. 组件之间的传值？

1. 父组件通过标签上:data=data方式定义传值
2. 子组件通过props方法接受数据
3. 子组件通过$emit方法传递参数

12. v-model的原理？

v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

13. 路由之间跳转？

声明式(标签跳转)

通过router-link实现跳转

编程式(js跳转)

通过this.$router.pash实现跳转

14. Vue-router跳转和location.href有什么区别？

使用location.href='/url'来跳转，简单方便，但是刷新了页面；

使用history.pushState('/url')，无刷新页面，静态跳转；

引进router，然后使用router.push('/url')来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。

其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()。

15. $route和$router的区别？

1. $router是用来操作路由，$route是用来获取路由信息
2. $router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象(例如history)
3. $route是一个跳转的路由对象(路由信息对象)，每一个路由都会有一个$route对象，是一个局部的对象

16. vue-router实现路由懒加载(动态加载路由)？

第一种：vue异步组件技术====异步加载，vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。但是，这种情况下一个组件生成一个js文件。

第二种：使用import

第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

17. vue项目是打包了一个js文件，一个css文件，还是有多个文件？

根据vue-cli脚手架规范，一个js文件，一个CSS文件。

18. Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。

19. Vue2中注册在router-link上事件无效解决方法？

使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。

20. RouterLink在IE和Firefox中不起作用(路由不跳转)的问题？

方法一：只用a标签，不适用button标签

方法二：使用button标签和Router.navigate方法

21. axios的特点有哪些？

从浏览器中创建XMLHttpRequests；

node.js创建http请求；

支持Promise API；

拦截请求和响应；

转换请求数据和响应数据；

取消请求；

自动换成json。

axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送

params一般适用于get请求，data一般适用于post put请求。

22. params和query的区别？

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

注意点：query刷新不会丢失query里面的数据

params刷新会丢失params里面的数据。

23. vue.cli中怎样使用自定义组件？遇到过哪些问题？

第一步：在components目录新建组件文件(indexPage.vue)，script一定要export default {}。

第二步：在需要用的页面(组件)中导入：import indexPage from '@/components/indexPage.vue'

第三步：注入到vue子组件的components属性上面,components:{indexPage}

第四步：在template视图view中使用，例如有indexPage命名，使用的时候则index-page。

24. Vue初始化页面闪动问题？

使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。

首先：在css里加上[v-cloak] {display: none;}。

如果没有彻底解决问题，则在根元素加上style="display: none;" style="{display: 'block'}

25. Vue更新数组时触发视图更新的方法？

push()；pop()；shift()；unshift()；splice()；sort()；reverse()

26. 请说出vue.cli项目中src目录每个文件夹和文件的用法？

assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;app.vue是一个应用主组件；main.js是入口文件。

27. assets和static的区别？

相同点：assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点

不相同点：assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。

建议：将项目中template需要的样式文件js文件等都可以放置在assets中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。

28. Vue的两个核心点？

数据驱动、组件系统

数据驱动：ViewModel，保证数据和视图的一致性。

组件系统：应用类UI可以看作全部是由组件树构成的。

29. delete和Vue.delete删除数组的区别？

delete只是被删除的元素变成了empty/undefined其他的元素的键值还是不变。Vue.delete直接删除了数组改变了数组的键值。

30. SPA首屏加载慢如何解决？

安装动态懒加载所需插件；使用CDN资源。

31. vue如何实现按需加载配合webpack设置？

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import这样的方式引入，改为const定义的方式进行引入。

页面不按需加载引入方式：import home from '../../common/home.vue'

页面按需加载引入方式：

const home = r => require.ensure([], () => r (require('../../common/home.vue')))

32. vuex面试相关

1. vuex是什么，怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store注入。新建一个目录store。场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。

2. vuex有哪几种属性

有五种，分别是State、Getter、Mutation、Action、Module。

3. vuex的State特性?

• Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
• state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
• 通过mapState把全局state和getters映射到当前组件的computed计算属性中

4. vuex的Getter特性?

• getters可以对State进行计算操作，它就是Store的计算属性
• 虽然在组件内也可以做计算属性，但是getters可以在多组件之间复用
• 如果一个状态只在一个组件内使用，可以不用getters

5. vuex的Mutation、actions、modules特性?

• mutations=>   提交更改数据的方法，同步
• actions=>     像一个装饰器，包裹mutations，使之可以异步
• modules=>     模块化Vuex

6. 不用Vuex会带来什么问题?

• 可维护性会下降，想修改数据要维护三个地方
• 可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的
• 增加耦合，大量的上传派发，会让耦合性大大增加，Vue用Component本意就是为了减少耦合，现在这么用，和组件化的初衷相背

33. v-show与v-if的区别?

• v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏
• v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果
• 使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理

34. 如何让CSS只在当前组件中起作用?

将当前组件的<style>修改为<style scoped>。

但是也得慎用：样式不易(可)修改，而很多时候，我们是需要对公共组件的样式做微调的

解决办法：

使用混合型的css样式：(混合使用全局跟本地的样式)<style>/*全局样式*/</style><style scoped>/*本地样式*/</style>

深度作用选择器(>>>)如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用>>>操作符：<style scoped> .a >>> .b {/*...*/}</style>

35. keep-alive的作用是什么?

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

36. Vue组件引入步骤?

采用ES6的import ... from ...语法或CommonJS的require()方法引入组件;

对组件进行注册,代码如下

//注册
Vue.component('my-component', {template: 'A custom component!'})

使用组件<my-component></my-component>

37. v-el作用是什么?

提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可以是一个HTMLElement实例。

38. Vue插件使用步骤?

采用ES6的import ... from ...语法或CommonJS的require()方法引入插件。

使用全局方法Vue.use(plugin)使用插件,可以传入一个选项对象Vue.use(MyPlugin, someOption: true})。

39. Vue中常用的生命周期钩子函数?

1. beforeCreate：vue实例的挂载元素el和数据对象data都是undefined，还没用初始化
2. created：vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有
3. beforeMount：vue实例的el和data都初始化了，但是挂载之前未虚拟DOM节点
4. mounted：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点
5. beforeupdated：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动一处已添加的事件监听器
6. updated：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环
7. beforeDestroy：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件
8. destroyed：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁

40. 为什么vue组件中data必须是一个函数?

如果data是一个对象，当复用组件时，因为data都会指向同一个引用类型地址，其中一个组件的data一旦发生修改，则其他重用的组件中的data也会被一并修改。

如果data是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不会出现如上问题。

41. Vue中computed和watch有什么区别?

计算属性computed：

1. 支持缓存，只有依赖数据发生变化时，才会重新进行计算函数；
2. 计算属性内不支持异步操作；
3. 计算属性的函数中都有一个get(默认具有，获取计算属性)和set(手动添加，设置计算属性)方法；
4. 计算属性是自动监听依赖值的变化，从而动态返回内容。

侦听属性watch：

1. 不支持缓存，只要数据发生变化，就会执行侦听函数；
2. 侦听属性内支持异步操作；
3. 侦听属性的值可以是一个对象，接收handler回调，deep，immediate三个属性；
4. 监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情。

42. $nextTick是什么?

Vue实现响应式并不是在数据发生后立即更新DOM，使用vm.$nextTick是在下次DOM更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的DOM。

43. 为什么一个dom元素显示，然后下一步去获取这个元素的offsetWidth，你获取到的会是0？

因为你改变数据把show变成true,元素并不会立即显示，理所当然也不会获取到动态宽度。

正确的做法是先把元素show出来，在$nextTick去执行获取宽度的操作

44. v-for中key的作用是什么？

key是Vue使用v-for渲染列表时的节点标识。使用了key之后，当列表项发生变化时，Vue会基于key的变化而重新排列元素顺序，并且移除key不存在的元素，提升运行效率。

45. active-class是哪个组件的属性?

vue-router模块的router-link组件

46. 如何定义vue-router动态路由以及如何获取传过来的动态参数?

动态路由(页面刷新数据不丢失)

methods: {
    insurance(id) {
        //直接调用$router.push实现携带参数的跳转
        this.$router.push({
            path: `/particulars/${id}`,
        })
    }
}

路由配置

{
    path: '/particulars/:id',
    name: 'particulars',
    component: particulars
}

接收参数是this.$route.query.name

47. vue-router有哪几种导航钩子?

第一种：全局导航钩子：前置守卫、后置钩子(beforeEach，afterEach)beforeResolv，作用：跳转前进行判断拦截。

第二种：组件内钩子；beforeRouteEnter(不能获取组件实例this)、beforeRouteUpdate、beforeRouteLeave

这是因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；

先执行beforRouteEnter，再执行组件周期钩子函数beforeCreate，可以通过next获取组件的实例对象

第三种：单独路由独享组件；beforeEnter

48. 生命周期相关面试题

1. 什么是vue生命周期？

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。

2. 生命周期分为哪几个阶段？

总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后

1. 创建前/后：在beforeCreate阶段，由于还未初始化，vue实例的挂载元素el和数据对象data都为undefined。在created阶段，vue实例的数据对象data有了，el还没有
2. 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但挂载之前还是为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染
3. 更新前/后：当data变化时，会触发beforeUpdate和updated方法
4. 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

3. vue生命周期的作用是什么？

Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。

4. 第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发beforeCreate，created，beforeMount，mounted这几个钩子。

5. DOM渲染在哪个周期中就已经完成?

DOM渲染在mounted中就已经完成了。

49. 简单描述每个周期具体适合哪些场景?

生命周期钩子的一些使用方法：

beforeCreate可以在此阶段加loading事件，在加载实例时触发

created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

mounted：挂载元素，获取到DOM节点

updated：如果对数据统一处理，在这里写上相应函数

beforeDestroy：可以做一个确认停止事件的确认框

nextTick：更新数据后立即操作dom

50. 说出至少4种vue指令和它的用法?

v-if：判断是否隐藏

v-for：数据循环

v-bind:class：绑定一个属性

v-model：实现双向绑定

51. vue-loader是什么？用途有哪些?

解析.vue文件的一个加载器。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

52. scss是什么？在vue.cli中的安装使用步骤？有哪几大特性?

css的预编译语言。

使用步骤：

第一步：先装css-loader、node-loader、sass-loader等加载器模块；

第二步：在build目录找到webpack.base.config.js，在extends属性中加一个拓展.scss；

第三步：在同一个文件，配置一个module属性；

第四步：然后在组件的style标签加上lang属性，例如：lang = “scss”；

特性：

可以用变量，例如($变量名称=值)；

可以用混合器；

可以嵌套；

53. 页面渲染为什么使用key?

当有相同标签名的元素切换时，为避免渲染问题，需要通过key特性设置唯一的值来标记以让  Vue区分它们，否则Vue为了效率只会替换相同标签内部的内容。

54. 为什么避免v-if和v-for一起用?

因为v-for的优先级比v-if的优先级高,所以每次渲染时都会先循环再进行条件判断,而又因为v-if会根据渲染条件为true或false来决定渲染与否的,所以如果将v-if和v-for用在一起会特别消耗性能。

解决方法：

1. 将v-if放在外层嵌套template(页面渲染不生成dom节点)，在这一层进行v-if判断，然后在内部进行v-for循环
2. 如果条件出现在循环内部,不得不放在一起时,可通过计算属性computed提前过滤掉那些不需要显示的项

例如，可以在computed属性中对数据进行筛选：

computed: {
    filteredList() {
        return this.list.filter(item => item.condition); // 根据条件过滤列表项
    }
}

然后，在模板中只使用v-for来遍历过滤后的列表：

<div v-for="item in filteredList" :key="item.id">{{item.name}}</div>

55. VNode是什么？虚拟DOM是什么？

Vue在页面上渲染的节点，及其子节点称为“虚拟节点(Virtual Node)”，简写为“VNode”。“虚拟DOM”是由Vue组件树建立起来的整个VNode树的称呼。

56. slot插槽分类？

1. 单个插槽

当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的DOM位置，并替换掉插槽标签本身。

最初在<slot>标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

2. 命名插槽

slot元素可以用一个特殊的特性name来进一步配置如何分发内容。多个插槽可以有不同的名字。

这样可以将父组件模板中slot位置，和子组件slot元素产生关联，便于插槽内容对应传递

3. 作用域插槽scoped slots

可以访问组件内部数据的可复用插槽(reusable slot)

在父级中，具有特殊特性slot-scope的<template>元素必须存在，表示它是作用域插槽的模板。slot-scope的值将被用作一个临时变量名，此变量接收从子组件传递过来的prop对象。

57. 你都做过哪些Vue的性能优化？

• 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
• SPA页面采用keep-alive缓存组件
• 在更多的情况下，使用v-if替代v-show
• key保证唯一
• 使用路由懒加载、异步组件
• 图片懒加载

58. webpack的编译原理？

1. webpack的作用

(1) 依赖管理：方便引用第三方模块、让模块更容易复用，避免全局注入导致的冲突、避免重复加载或者加载不需要的模块。会一层一层的读取依赖的模块，添加不同的入口；同时，不会重复打包依赖的模块

(2) 合并代码：把各个分散的模块集中打包成大文件，减少HTTP的请求链接数，配合UglifyJS(压缩代码)可以减少、优化代码的体积

(3) 各路插件：统一处理引入的插件，babel编译ES6文件，TypeScript，eslint可以检查编译期的错误

一句话总结：webpack的作用就是处理依赖，模块化，打包压缩文件，管理插件

一切皆为模块，由于webpack只支持js文件，所以需要用loader转换为webpack支持的模块，其中plugin 用于扩张webpack的功能，在webpack构建生命周期的过程中，在合适的时机做了合适的事情

2. webpack工作过程

(1) 解析配置参数，合并从shell(npm install类似的命令)和webpack.config.js文件的配置信息，输出最终的配置信息

(2) 注册配置中的插件，让插件监听webpack构建生命周期中的事件节点，做出对应的反应

(3) 解析配置文件中的entry入口文件，并找出每个文件依赖的文件，递归下去

(4) 在递归每个文件的过程中，根据文件类型和配置文件中的loader找出对应的loader对文件进行转换

(5) 递归结束后得到每个文件最终的结果，根据entry配置生成代码chunk(打包之后的名字)

(6) 输出所以chunk到文件系统

59. Vue修饰符

1. 事件修饰符

.stop      阻止事件继续传播

.prevent   阻止标签默认行为

.capture   使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

.self      只当在event.target是当前元素自身时触发处理函数

.once      事件将只会触发一次

.passive   告诉浏览器你不想阻止事件的默认行为

2. v-model的修饰符

.lazy  默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步

.number自动将用户的输入值转化为数值类型

.trim  自动过滤用户输入的首尾空格

3. 键盘事件的修饰符

.enter

.tab

.delete(捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

4. element的修饰符

对于elementUI的input，我们需要在后面加上.native，因为elementUI对input进行了封装，原生的事件不起作用。