Vue面试题（持续更新～）

1.Vue 框架的优点是什么？

（1）轻量级框架：只关注视图层，大小只有几十Kb；
（2）简单易学：文档通顺清晰，语法简单；
（3）数据双向绑定，数据视图结构分离，仅需操作数据即可完成页面相应的更新；
（4）组件化开发：工程结构清晰，代码维护方便；
（5）虚拟 DOM加载 HTML 节点，运行效率高。

2.什么是 MVVM

MVVM 是Model-View-ModelView的缩写，是一种脱胎于 MVC 模式的设计模式。
Model 代表数据层，负责存放业务相关的数据；
View 代表视图层，负责在页面上展示数据；
ViewModel 是的作用是同步 View 和 Model 之间的关联，其实现同步关联的核心是DOM Listeners和 Data Bindings两个工具。DOMListeners 工具用于监听 View 中 DOM 的变化，并会选择性的传给 Model；Data Bindings 工具用于监听 Model 数据变化，并将其更新给 View。

3.Vue 中组件之间传值的方法有哪些

获取父子组件实例 $ parent、$ children
父组件向子组件传值：props
子组件向父组件传值：this.$emit()方法触发自定义事件
兄弟组件之间传值：
（1）共同传给父组件，再由父组件分发（状态提升）；
（2）使用Vuex；
（3）利用bus 事件总线:

vue.prototype.$bus=new Vue()
A组件：methods :{ 函数{this.$bus.$emit(‘自定义事件名’，数据)} //发送 
B组件：created(){this.$bus.$on(‘A发送过来的自定义事件名’，函数)} //进行数据接收

4.Vue 中常见的生命周期钩子函数有哪些？

（1）创建阶段
BeforeCreate（创建前）：该函数在 Vue 实例初始化后，组件创建、数据监测(data observer)、watch/event 事件配置前调用。此时不能访问 data、ref，Vue 实例对象上仅有生命周期函数及部分默认事件。

Created（创建后）：该函数在 Vue 组件创建完成后调用。此时数据监测、事件配置已完成，data 对象已可访问，但组件尚未被渲染成 HTML 模板，ref 仍为 undefined，$el 尚不可用。
如此阶段要对 DOM 进行操作，就应将操作放在 Vue.nextTick 的回调函数中。因为此阶段 DOM 尚未被渲染，无法执行 DOM 操作。Vue.nextTick 会在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后可以获取更新后的 DOM。

（2）挂载阶段
BeforeMount（挂载前）：该函数在组件挂载前调用，此时 HTML 模板编译已完成，虚拟 DOM 已存在，el 为可用状态，但 ref 仍不可用。
一般在此阶段进行初始数据的获取操作。

Mounted（挂载后）：该函数在组件挂载完成后调用。此时el元素已被vm.el替代，ref可进行操作。
一般在此阶段进行异步请求的发送操作。mounted 不会保证所有的子组件也都一起被挂载。如果希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm. nextTick。

（3）更新阶段
BeforeUpdate（更新前）：该函数在数据更新、虚拟 DOM 打补丁前调用。
此阶段适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

Updated（更新后）：该函数在数据更新、虚拟 DOM 打补丁完成后调用。
获取到最新的dom数据el ref数据

（4）卸载阶段
BeforeDestory( 卸载前) 该函数在实例销毁前调用，此时实例完全可用，ref 仍然存在。
一般在此阶段进行性能优化操作，如清除定时器，防止内存泄露。

Destroyed（卸载后）：该函数在实例销毁后调用，此时 Vue 里的所有指令均被解绑，所有事件监听器已被移除，ref 状态为 undefined。
组件销毁时，先销毁父组件，再销毁子组件。

针对 keep-alive 组件还有两个钩子函数：
activated：在被 keep-alive 缓存的组件激活时调用。
deactivated：在被 keep-alive 缓存的组件停用时调用。

还有一个错误处理捕获函数：
errorCaptured：在捕获到一个来自子孙组件的错误时调用。

5.为什么 Vue 组件中 data 必须是一个函数？

如果 data 是一个对象，当复用组件时，因为 data 都会指向同一个引用类型地址，其中一个组件的 data 一旦发生修改，则其他重用的组件中的 data 也会被一并修改。
如果 data 是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不会出现如上问题。

6.Vue 中 v-if 和 v-show 有什么区别？

v-if 在进行切换时，会直接对标签进行创建或销毁，不显示的标签不会加载在 DOM 树中。v-show 在进行切换时，会对标签的 display 属性进行切换，通过 display 不显示来隐藏元素。
一般来说，v-if 的性能开销会比 v-show 大，切换频繁的标签更适合使用 v-show。

7.Vue 中 computed 和 watch 有什么区别？

计算属性 'computed'：
 （1）支持缓存，只有依赖数据发生变化时，才会重新进行计算函数；
 （2）计算属性内不支持异步操作；
 （3）计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；
 （4）计算属性是自动监听依赖值的变化，从而动态返回内容。
侦听属性 'watch'：
 （1）不支持缓存，只要数据发生变化，就会执行侦听函数；
 （2）侦听属性内支持异步操作；
 （3）侦听属性的值可以是一个对象，接收 handler 回调，deep （深度监听），immediate （）三个属性；
 （3）监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情.
 
 watch: { 
	obj: { 
    	//handler接收两个参数（newVal：新值，oldVal：旧值 
    	handler: function(newVal, oldVal){ 
    		console.log(newVal); 
		}, 
	deep: true,//设置为true时会监听对象内部值的变化； 
	immediate: true//设置为true时会立即以表达式的当前值触发回调； 
	} 
}

使用 immediate 可以优化以下场景：组件创建的时候立即获取一次列表的数据，同时监听框，每当发生变化的时候重新获取一次筛选后的列表。

//优化前 
created(){ 
	this.fetchPostList() 
	}, 
watch: { 
	searchInputValue(){ this.fetchPostList() } 
	}
//优化后 
watch: { 
	searchInputValue:{ handler: 'fetchPostList', immediate: true } 
	}

8.$nextTick 是什么？

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

在下次 DOM 更新循环结束之后执行延迟回调。nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用

PromiseMutationObserversetImmediate如果以上都不行则采用setTimeout
定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列。

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

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

10.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 中的相应函数完成更新。
    

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

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

this.$set(要改变的数组/对象，要改变的位置/key，要改成的value) 
改变数组this.$set(this.arr, 0, "OBKoro1");
改变对象this.$set(this.obj, "c", "OBKoro1");

数组原生方法造成的数据更新，可以被 Vue 监听到。如 splice()push()pop()等。

12.常用的事件修饰符有哪些？

.stop：阻止冒泡；
.prevent：阻止默认行为；
.self：仅绑定元素自身可触发；
.once：只触发一次…

13.Vue 如何获取 DOM 元素？

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

<div ref="test"></div>
const dom = this.$refs.test

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

可以通过 v-on 传入对象来绑定多个事件：

<!--单事件绑定-->
<input type="text" @click="onClick">
<!--多事件绑定-->
<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur }">

15. Vue 初始化页面闪动问题如何解决？

出现该问题是因为在 Vue 代码尚未被解析之前，尚无法控制页面中 DOM 的显示，所以会看见模板字符串等代码。
解决方案是，在 css 代码中添加 v-cloak 规则，同时在待编译的标签上添加 v-cloak 属性：

[v-cloak] { display: none; }
<div v-cloak>
  {{ message }}
</div>

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

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

17. Vue-router 路由有哪些模式？

一般有两种模式：
（1）hash 模式：后面的 hash 值的变化，浏览器既不会向服务器发出请求，浏览器也不会刷新，每次 hash 值的变化会触发 hashchange 事件。
（2）history 模式：利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

18.Vuex 是什么？有哪几种属性？

Vuex 是专为Vue设计的状态管理工具，采用集中式储存管理 Vue 中所有组件的状态。
（1）state属性：基本数据；
（2）getters属性：从 state 中派生出的数据；
（3）mutation属性：**更新 store 中数据的唯一途径，**其接收一个以 state 为第一参数的回调函数；
（4）action 属性：提交 mutation 以更改 state，其中可以包含异步操作；
（5）module 属性：用于将 store分割成不同的模块。

19.你能讲一讲MVVM吗？

MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。

20.你知道Vue3.x响应式数据原理吗？

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？
（很简单啊）
判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。
监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？
我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

21.你的接口请求一般放在哪个生命周期中？

接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted，需要放到created中。

22.说一下v-model的原理

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

23.Vue事件绑定原理说一下

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。

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

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

生成AST树
优化
codegen(转换为可执行的代码)

首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。
使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。
Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。
编译的最后一步是将优化后的AST树转换为可执行的代码。

25.Vue2.x和Vue3.x渲染器的diff算法分别说一下

简单来说，diff算法有以下过程

同级比较，再比较子节点先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)比较都有子节点的情况(核心diff)递归比较子节点
正常Diff两个树的时间复杂度是O(n^{3)，但实际情况下我们很少会进行跨层级的移动DOM，所以Vue将Diff进行了优化，从O(n}3) -> O(n)，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。
Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。
Vue3.x借鉴了
ivi算法和 inferno算法
在创建VNode时就确定其类型，以及在mount/patch的过程中采用位运算来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提升。(实际的实现可以结合Vue3.x源码看。)
该算法中还运用了动态规划的思想求解最长递归子序列。

26.再说一下虚拟Dom以及key属性的作用

由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。这就是虚拟Dom的产生原因。
Vue2的Virtual DOM借鉴了开源库snabbdom的实现。
Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。(也就是源码中的VNode类，它定义在src/core/vdom/vnode.js中。)
VirtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段。
「key的作用是尽可能的复用 DOM 元素。」
新旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的。
需要在新旧 children 的节点中保存映射关系，以便能够在旧 children 的节点中找到可复用的节点。key也就是children中节点的唯一标识。

27.keep-alive了解吗

keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。
常用的两个属性include/exclude，允许组件有条件的进行缓存。
两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。
keep-alive的中还运用了LRU(Least Recently Used)算法。

28.Vue中组件生命周期调用顺序说一下

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。

组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父 beforeUpdate -> 父 updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

29.SSR了解吗？

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。
SSR有着更好的SEO、并且首屏加载速度更快等优点。不过它也有一些缺点，比如我们的开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境。还有就是服务器会有更大的负载需求。

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

编码阶段

• 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
• v-if和v-for不能连用
• 如果需要使用v-for给每项元素绑定事件时使用事件代理
• SPA 页面采用keep-alive缓存组件
• 在更多的情况下，使用v-if替代v-show
• key保证唯一
• 使用路由懒加载、异步组件
• 防抖、节流
• 第三方模块按需导入
• 长列表滚动到可视区域动态加载
• 图片懒加载

SEO优化

• 预渲染
• 服务端渲染SSR

打包优化

• 压缩代码
• Tree Shaking/Scope Hoisting
• 使用cdn加载第三方模块
• 多线程打包happypack
• splitChunks抽离公共文件
• sourceMap优化

用户体验

• 骨架屏
• PWA

31.hash路由和history路由实现原理说一下

location.hash的值实际就是URL中#后面的东西。

history实际采用了HTML5中提供的API来实现，主要有history.pushState()和history.replaceState()。

32.active-class是哪个组件的属性？

vue-router模块的router-link组件。

33.嵌套路由怎么定义？

在 VueRouter 的参数中使用 children 配置

34.怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

对path属性加上**/:id**。
使用router对象的params.id。

35.vue-router有哪几种导航钩子？

路由钩子函数有三种：

1：全局钩子： beforeEach(to,form,next)、 afterEach(to,form)

2：路由独享钩子：  beforeEnter(to,form,next)、 beforeLeave(to,form)

3:组件路由： beforeRouteEnter(to,form,next){
   this 不指向实例 组件还没创建
   next((vm) =>{
        vm就是实例
   })
}、 
beforeRouteUpdate(to,form,next){
路由改变 组价被复用的时候被调用
}、 
beforeRouteLeave(to,form,next){
离开的时候被调用
}

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

css的预编译
使用步骤：
第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：还是在同一个文件，配置一个module属性
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”
有哪几大特性:
1、可以用变量，例如（$变量名称=值）；
2、可以用混合器，例如（）
3、可以嵌套

37.v-model是什么？怎么使用？ vue中标签怎么绑定事件？

可以实现双向绑定:

//template
<input v-model='val' />
//data
data(){
	return {
	val:''
	}
}

指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。

绑定事件：
<div @click='click'/>

38.自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding

39.说出至少4种vue当中的指令和它的用法？

v-if：判断是否隐藏；
v-for：数据循环出来；
v-bind:class：绑定一个属性
v-model：实现双向绑定
v-on:绑定事件
v-once:只渲染一次不会随着数据的改变而改变
v-html：解析html代码
v-cloak：当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
v-text：就是{{}}

40.请说下封装 vue 组件的过程？

使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

41.vue-loader是什么？使用它的用途有哪些？

解析.vue文件的一个加载器，跟template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等

42.vue 混入

抽离公共的代码 提高复用性
当组件和混入对象含有同名选项时，并在发生冲突时以组件数据优先。
值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

43.vue中怎样使用自定义的组件？有遇到过哪些问题吗？

第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {
第二步：在需要用的页面（组件）中导入：import smithButton from ‘…/components/smithButton.vue’
第三步：注入到vue的子组件的components属性上面,components:{smithButton}
第四步：在template视图view中使用， 问题有：smithButton命名，使用的时候则smith-button。

44.vue过滤器

在页面展示时需要对一些数据做一些格式化操作，然后再渲染在页面上，而不改变数据本身。

<template>
	<div class="hello">
		<!-- 页面显示200元 -->
		<p>价格：{{price | addPriceTitle}}</p> 
	</div>
</template>
<script>
export default {
	name: 'HelloWorld',
	data(){
		return{
			price:200,
		}
	},
	filters:{
		addPriceTitle(value){
			return value + "元"
		}
	},
	mounted() {
		console.log(this.price) // 这里打印还是 200
	}
}
</script>

45.vue-router实现路由懒加载

const Home=() = import('../views/home')

46.v-for和v-if同时出现，谁的优先级更高

显然for的优先级高于if，因为genElement函数中，for比if更早判断

47.父子组件的生命周期

执行顺序：

• 父组件开始执行到beforeMount 然后开始子组件执行，最后是父组件mounted。
• 如果有兄弟组件，父组件开始执行到beforeMount，然后兄弟组件依次执行到beforeMount，然后按照顺序执行mounted，最后执行父组件的mounted。
• 当子组件挂载完成后，父组件才会挂载。
• 当子组件完成挂在后，父组件会主动执行一次beforeUpdated/updated钩子函数（仅首次）
• 父子组件在data变化中是分别监控的，但是更新props中的数据是关联的。
• 销毁父组件时，先将子组件销毁后才会销毁父组件。
• 兄弟组件的初始化（mounted之前）是分开进行，挂载是从上到下依次进行
• 当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的

48.指令v-el的使用

有时候我们想就像使用jquery那样去访问一个元素，此时就可以使用v-el指令，去给这个元素注册一个索引，方便通过所属实例的$el访问这个元素。

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent// -> "world"
this.$els.msg//-><span>hello</span>

49.Vue.js特点

简洁：页面由HTML模板+Json数据+Vue实例组成

数据驱动：自动计算属性和追踪依赖的模板表达式

组件化：用可复用、解耦的组件来构造页面

轻量：代码量小，不依赖其他库

快速：精确有效批量DOM更新

模板友好：可通过npm，bower等多种方式安装，很容易融入

50.vue常用的修饰符？

事件

• .prevent: 提交事件不再重载页面；
• .stop: 阻止单击事件冒泡；
• .self: 当事件发生在该元素本身而不是子元素的时候会触发；
• .capture: 事件侦听，事件发生的时候会调用,
• .once:点击事件将只会触发一次

按键

• .enter => // enter键
• .tab => // tab键
• .delete (捕获“删除”和“退格”按键) => // 删除键
• .esc => // 取消键
• .space => // 空格键
• .up => // 上
• .down => // 下
• .left => // 左
• .right => // 右

keyCode

<input v-on:keyup.13="submit">
自定义按键修饰符别名 
可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112

51.v-on 可以绑定多个方法吗？

v-on绑定多个方法：
<p v-on="{click:dbClick,mousemove:MouseClick}"></p>
一个事件绑定多个函数：
<p @click="one(),two()">点击</p>

52.vue组件添加事件

@click.native
给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件
等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn)