Vue知识整理

Vue知识整理

内容目录

1. Vue中computed和watch?
2. 什么是Vue的计算属性
3. 谈谈对vue中插槽的理解?
4. Vue中key值的作用是什么?
5. 你是怎么认识vuex的?
6. Vuex的5个核心属性是什么?
7. vuex的出现解决了什么问题?
8. 简述Vuex的数据传递流程
9. vue-Router是干什么的，原理是什么?
10. 路由之间是怎么跳转的?有哪些方式?
11. Vue-Router怎么配置路由
12. vue-Router有哪几种路由守卫?
13. Vue-Router的钩子函数都有哪些?
14. $route和$router的区别是什么?
15. 请说出路由配置项常用的属性及作用
16. 编程式导航使用的方法以及常用的方法
17. Vue如何去除URL中的#
18. Vue项目优化的解决方案都有哪些?
19. 怎样理解Vue的单向数据流?
20. v-for与v-if优先级
21. watch.methods 和computed 的区别?
22. v-show和v-if在隐藏一个元素的时候有什么不同,应该如何来选择?
23. 什么是Vuex,在那种场景下使用?
24. 你所了解到的常见Vue组件库有哪些?
25. 谈谈对于MVVM的理解?
26. Vue的生命周期?
27. Vue实现数据双向绑定的原理?
28. Vue创建组件的时候,data为什么要使用匿名函数return一个对象?
29. Vue中实现父组件向子组件传递数据?
30. Vue中如何实现子组件向父组件传递数据?
31. Vue中实现兄弟组件间的传递数据?
32. Vue中有几种路由模式?
33. Vue路由导航守卫是什么,以及应用场景
34. Vue如何自定义一个过滤器？
35. Vue如何自定义一个vue指令？
36. 怎么定义vue-router的动态路由?怎么获取通过路由传过来的参数?
37. Vue路由模块中$route和$router的区别?
38. vue中v-for指令循环遍历中key属性的作用？
39. Vue和react有哪些不同的地方?
40. Vue有哪些常用的事件修饰符?
41. 列举Vue中常用的指令
42. Vue中如何解决插值表达式闪烁问题?
43. Vue路由中如何实现通过锚点值的改变切换组件?
44. vue中如何实现给样式添加作用域?
45. Vue中如何动态添加一个路由规则?
46. Vue中有何优化页面的加载效率?
47. 什么是路由懒加载?
48. Vue中如何触发一个自定义事件?
49. Vue中如何监听自定义事件的执行?
50. Vue中如何移除自定义事件?
51. vm.$mount(selector)方法的作用是什么?
52. Vue中keep-alive组件的作用是什么?
53. Vue中如何手动销毁一个vue实例?
54. Vue中有哪些内置的组件?
55. vue实例中有哪些属性?
56. Vue.use(plugin)的作用是什么,使用的时候需要注意什么问题?
57. vm.$nextTick(fn)的作用是什么?
58. vue中的混入(mixin)有什么作用?
59. 什么是虚拟 DOM?

1、Vue中computed和watch?

1、computed是计算属性,可以根据data中的数据成员,动态计算出一个新的数据成员(这个数据成员在data中并不存在),计算属性的函数必须有返回值;

2、watch是监视器,可以监视data中某一个数据成员的改变或路由中的某些属性的改变,可以根据这个改变,做一些其他操作(不仅仅局限于更新其他相关数据)

Watch监听器:

var vm = new
Vue({ el:
'#demo', data:
{
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
})

计算属性:

var vm = new
Vue({ el:
'#demo', data:
{
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}

2、什么是Vue的计算属性

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式，好处:使得数据处理结构清晰;
1、依赖于数据。数据更新，处理结果自动更新;
2、计算属性内部this指向vm 实例;
3、在template调用时，直接写计算属性名即可;
4、常用的是getter方法，获取数据，也可以使用set方法改变数据;
5、相较于methods，不管依赖的数据变不变,methods都会重新计算，但是依赖数据不变的时候computed 从缓存中获取。不会重新计算。

3、谈谈对vue中插槽的理解?

Vue中的插槽分为三种,匿名插槽,具名插槽,作用域插槽.

通过插槽可以动态指定某一个组件模板部分的渲染,我们在调用组件的时候,在组件的调用标签中间传递了什么样的标签结构,那么该组件就会把我们传递的标签结构放在他的模板部分进行渲染.

使用方式:当组件当做标签进行使用的时候，用slot可以用来接受组件标签包裹的内容，当给solt标签添加name属性的时候，可以调换响应的位置
插槽作用域:作用域播槽其实就是带数据的插槽。父组件接收来自子组件的slot标签上通过v-bind绑定进而传递过来的数据，父组件通过 scope来进行接受子组件传递过来的数据

4、Vue中key值的作用是什么?

当vue.is 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，vue将不会移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM.

5、你是怎么认识vuex的?

Vuex可以理解为一种开发模式或框架。比如PHP有thinkphp. java有spring等，通过状态(数据源)集中管理驱动组件的变化(好比 spring 的 IOC容器对bean进行集中管理)。
1、应用级的状态集中放在store中;
2、改变状态的方式是提交 mutations，这是个同步的事物:
3、异步逻辑应该封装在 action中.

6、Vuex的5个核心属性是什么?

分别是 State,Getter、Mutation . Action.Module

1. state
   state为单一状态树，在state中需要定义我们所需要管理的数组,对象、字符串等等，只有在这里定义了。在Vue js 的组件中才能获取你定义的这个对象的状态。
2. getter
   getter有点类似 vuejs 的计算属性,当我们需要从store的state中派生出一些状态。那么我们就需要使用getter，getter会接收state作为第一个参数。而且getter的返回值会根据它的依赖被缓存起来。只有getter中的依赖值(state中的某个需要派生状态的值)发生改变的时候才会被重新计算。

3. mutation
   更改store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数。我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法: store.commit,
   4)action
   action可以提交mutation，在action中可以执行store.commit，而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action，则需要执行store.dispatch
4. module
   module其实只是解决了当state中很复杂腕肿的时候。modulle可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter
   

7、vuex的出现解决了什么问题?

主要解决了以下两个问题:
1.多个组件依赖于同一状态时，对于多层嵌套的组件的传参将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
2来自不同组件的行为需要变更同一状态。以往采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

8、简述Vuex的数据传递流程

当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。actions里面的每个方法中都会有一个commit方法，当方法执行的时候会通过commit.来触发mutations里面的方法进行数据的修改。mutations里面的每个函数都会有一个state参数，这样就可以在 mutations里面进行state的数据修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变

9.vue-Router是干什么的，原理是什么?

Vue-Router是vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在Vue-Router单页面应用中。则是路径之间的切换。

也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。“更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式:
利用URL中的 hash ("#”) ,
利用Histary interface在HTML5中新增的方法

10、路由之间是怎么跳转的?有哪些方式?

1、<router-link to="需要跳转到页面的路径">
2、this.$router.pushC)跳转到指定的url。并在 history中添加记录。点击回退返回到上一个页面。
3、this.$router.replace(跳转到指定的url。但是 history中不会添加记录，点击回退到上上个页面
4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

11.Vue-Router怎么配置路由

在Vue中配置路由分为5个步骤。分别是;
1，安装

npm install --save Vue-Raute

2引用

import VueRouter from 'Vue-Router'

3，配置路由文件

var router = new VueRouter({
routes:[
 {
path:"/hello.
component:.HelloWorld
 },
{
path:"/wen",
component:HelloWen
}
new Vue({
el: '#app'.
camponents: { App }.
router.
template: ""
 })

4，视图加载的位置
默认App.Vue文件中加

<router-view>-</router-vicw>

5。跳转导航

<router-link to="/hello">-helloward</router-link>
(渲染出来的是a标签)

12、vue-Router有哪几种路由守卫?

路由守卫为:
全局守卫: befareEach
后置守卫: afterEach
全局解析守卫: beforeResalve
路由独享守卫; beforeEnter

13、Vue-Router的钩子函数都有哪些?

关于Vue-Router中的钩子函数主要分为3类
1)全局钩子函数要包含beforeEach
beforeEach 的数有三个参数.分别是:
tocrouter即将进入的路由对象
from:当前导航即将离开的路由
next.function,进行管道中的一个钩子。如果执行完了.则导航的状态就是confirmed《确认的》否则为false,终止导航
2)单独路由独享组件
beforeEnter,
3)组件内钩子
beforeRouterEnter,beforeRouterUpdate,beforeRouterLeave

14、$route和$router的区别是什么?

$route是“路由信息对象”，包括 path，params，hash，query,fullPath, matched, name等路由信息参数。
$router为vueRouter的实例,相当于一个全局的路由器对象，里面含有很多属性和子对象，
例如history对象。经常用的跳转链接就可以用this.router.push会往history栈中添加一个新的记录。
返回上一个history也是使用$router go方法

15、请说出路由配置项常用的属性及作用

路由配置参数;
path :跳转路径
coemponent:路径相对于的组件
name:命名路由
children:子路由的配置参数:路由嵌套
props:路由解耦
redirect:重定向路由

16、编程式导航使用的方法以及常用的方法

路由跳转: this.$router.push0
路由替换: this.$router.replace()
后退: this.$router.back()
前进: this.$router.forward()

17.Vue如何去除URL中的#

Vue-Router默认使用hash模式，所以在路由加载的时候，项目中的URL会自带“#”。如果不想使用“#”，可以使用Vue-Router的另一种模式history: new Router ({mode : ‘history’ , routes: [ ]})
需要注意的是，当我们启用history模式的时候，由于我们的项目是一个单页面应用,所以在路由跳转的时候，就会出现访问不到静态资源而出现“404”的情况。

这时候就需要服务端增加一个覆盖所有情况的候选资源:如果URL匹配不到任何静态资源，则应该返回同一个"index html”页面。

18、Vue项目优化的解决方案都有哪些?

1、使用mini-css-extract-plugin插件抽离css
2、配置optimization把公共的js代码抽离出来
3、通过webpack处理文件压缩
4、不打包框架、库文件，通过 cdn的方式引入
5、小图片使用baso64
6、配置项目文件懒加载
7、UI库配置按需加载
8、开启Gzip 压缩

19、怎样理解Vue的单向数据流?

数据从父级组件传递给子组件，只能单向绑定,子组件内部不能直接修改从父级传递过来的数据。

所有的 prop 都使得其父子prop 之间形成了一个单向下行绑定:父级prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时。子组件中所有的 prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prap。如果你这样做了，vue会在浏览器的控制台中发出警告。子组件想修改时，只能通过$emit 派发一个自定义事件。父组件接收到后，由父组件修改。

20.v-for与v-if优先级

首先不要把v-if与v-for用在同一个元素上，原因：v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

v-for 比 v-if 具有更高的优先级

请写出饿了么5个组件

<el-alert>弹窗</el-alert>
<el-dialog>对话</el-dialog>
<el-calender>日历表</el-calender>
<el-progress:percentage="0">进度条<el-progrees>
<el-switch>开关</el-switch>

21、watch.methods 和computed 的区别?

(1)基本说明

1. computed :
   计算属性将被混入到vue实例中。所有getter和setter 的 this 上下文自动地绑定为Vue 实例。
2. methods:
   methods将被混入到vue 实例中。可以直接通过vMM实例访问这些方法,或者在指令表达式中使用。方法中的 this自动绑定为vue实例.
3. watch:
   观察和响应vue实例上的数据变动，一个对象。键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象，vue 实例将会在实例化时调用Swatch()。遍历watch对象的每一个属性。

(2)三者的加载顺序

1. computed是在HTML DOM加载后马上执行的。如赋值;《属性将被混
   入到vue 实例)
2. methods 则必须要有一定的触发条件才能执行，如点击事件
3. watch呢?它用于观察we实例上的数据变动.

(3)默认加载的时候先computed再watch，不执行 methods;

(4）触发某一事件后先computed再methods再到 watch
computed属性vs method方法computed计算属性是基于它们的依赖进行缓存的。

(5)总结
计算属性computed只有在它的相关依赖发生改变时才会重新求值,当有一个性能开销比较大的的计算属性A，它需要遍历一个极大的数组和做大量的计算，然后我们可能有其他的计算属性依赖于A，这时候。我们就需要缓存，每次确实需要重新加载，不需要缓存时用methods

22.v-show和v-if在隐藏一个元素的时候有什么不同,应该如何来选择?

v-show是通过css的方式来隐藏元素,而v-if是根据条件是否成立决定是否要创建元素.如果某个元素需要频繁切换显示状态的话,建议是使用v-show,因为频繁创建销毁DOM需要性能开销.

23.什么是Vuex,在那种场景下使用?

Vuex是针对vue的一个状态管理工具.有几个核心的部分:

state存储状态数据;

mutations:更新数据的方法,actions:调用mutations中的方法,更新state数据;getters:对state中的数据进行预处理当组件的关系比较复杂的时候,可以使用vuex简化组件间的传值.

24.你所了解到的常见Vue组件库有哪些?

PC端组件库: element-ui, ant-design, iview移动端:mint-ui, vant, vux

25.谈谈对于MVVM的理解?

MVVM由三部分组成M(model数据层), V(view视图层),VM(view-model)视图模型层.是一种框架的设计思想, vue就是基于mvvm来设计的.其中M(model)层是负责初始化数据,V(view)只负责页面展示,VM(view-model)用来连接view层和model层,将数据层的数据传递一个视图层进行展示,将视图层的操作传递到数据层进行持久化.

26.Vue的生命周期?

创建阶段:只执行一次beforeCreate(开始进行一些数据和方法的初始化的操作, data中的数据和methods中的方法还不能用),created(已经完成数据和方法的初始化, data中的数据和methods中的方法可以使用了),

beforeMount(开始渲染虚拟DOM),mounted(已经完成了虚拟DOM的渲染,可以操作DOM了,只执行一次)

运行阶段:执行多次**beforeUpdate(data中的数据即将被更新,会执行多次)updated**(data中的数据已经更新完毕,会执行多次)

销毁阶段:只执行一次**beforeDestroy(vue实例即将销毁,此时data中的数据和methods中的方法依然处于可用状态)destroyed**(vue实例已经销毁,此时data中的数据和methods中的方法已经不可用)

27.Vue实现数据双向绑定的原理?

Vue.,js是采用数据劫持结合发布者-订阅者模式的方式，**通过Object.defineProperty()**来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

第一步:需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步:compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步:Watcher订阅者是 Observer和Compile之间通信的桥梁,

主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步:MVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过 Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和 Compile之间的通信桥梁，达到数据变化->视图更新;视图交互变化(input) ->数据model变更的双向绑定效果。

28.Vue创建组件的时候,data为什么要使用匿名函数return一个对象?

因为对象是一种引用数据类型,在内存中只有一份.如果data的值直接是一个对象的话,那么后期组件在不同的地方多次调用的时候,会相互产生影响,因为每一次调用操作的data对象是一样的.使用函数的方式返回对象,可以保证组件的每一次调用都会创建一个新对象,这样组件的每一次调用不会相互产生影响.

29.Vue中实现父组件向子组件传递数据?

第一步:在子组件的调用标签上声明一个自定义属性,属性值来自父组件的data第二步:在子组件的定义部分声明一个属性props,值是一个数组,将自定义属性的名字在props中进行声明;在子组件的模板部分可以使用props中声明过的数据.

//父组件
Vue.component('parent',{ 
template:`


`,
data:function(){
return {
title:'父组件的标题',
msg:'这是传给子组件的值'
}
},
//子组件
components:{
child:{
//模板
template:`

{{msgFromParent}}
`,
//数据模型
data:function(){
return {
title:'子组件标题'
}
},
//获取父组件中传过来的值
props:
['msgFromParent']
}
}
});

30.Vue中如何实现子组件向父组件传递数据?

第一步:在子组件的调用标签只上通过v-on动态绑定一个自定义事件,自定义事件的处理函数必须在父组件的methods中提前声明,这个函数需要一个形参,来接收子组件传递过来的数据.

第二步:在子组件中通过this.$emit(自定义事件,数据)触发自定义事件的执行,此动作可以放在子组件的created/mounted生命周期中,可以放在某个事件处理函数中.

31.Vue中实现兄弟组件间的传递数据?

第一步:声明一个空的Vue实例对象comm,作为事件中心的角色

第二步:在acom组件中通过comm.$emit(自定义事件,数据)的方式触发事件(此操作可放在某个事件处理函数或者acom组件的生命周期函数created/mounted中)

第三步:在bcom组件中通过comm.$on(自定义事件,function(data){})监听自定义事件的执行(操作可放在bcom组件的声明周期函数created/mounted中)

//公共组件
var comm=new Vue();
//兄弟组件1
Vue.component('coma',{ te
mplate:`

{{title}}
发送

`,
data:function(){
return {
title:'组件A',
msg:'传给兄弟组件的值'
}
},
methods:{
sendMsg:function(){ comm.$emit('myevent',this.msg)
}
},
created:function(){
//注册自定义事件
comm.$emit('myevent',this.msg);
console.log('注册事件OK');
}
});
//兄弟组件2
Vue.component('comb',{
template:`

{{title}}
{{msg}}

`,
data:function(){
return {title:'组件B',
        msg:''
}
},
mounted:function(){ comm.$on('myevent',(data)=>{
this.msg=data
console.log(data);
});
}
});

32.Vue中有几种路由模式?

Vue中的路由模式有两种:hash,history;默认是hash模式;可以在创建路由对象的时候,使用mode属性来切换路由模式.const router=new Router({mode:’history’})

33.Vue路由导航守卫是什么,以及应用场景

路由守卫是在页面进行路由跳转的时候做一些处理,比如拦截.vue-router中提供了下面几种路由导航守卫:

全局前置守卫

const router = new VueRouter({ ...})
router.beforeEach((to, from, next) => {
// from从里来
// to到哪里去
// next是否要放行
})

全局后置钩子

router.afterEach((to, from) => {
// ...
})

路由独享守卫:在声明路由的时候,针对特定路由的钩子函数

const router = new
VueRouter({ routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})

34.Vue如何自定义一个过滤器？

定义全局过滤器:Vue.filter(‘过虑器名称’,function(input){ return input });

定义局部过滤器:

new Vue({
filters:{ dateFmt:function(inpu
t){ return 'yyyy-mm-dd';
}
}
})

35.Vue如何自定义一个vue指令？

定义全局指令:Vue.directive(‘指令名’,function(el,binding){});

定义私有指令:

new Vue({
directives:{ focus:function(el,binding){
}
}
});

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

const router=new
VueRouter({ routes:[
{path:'/product/:id',component:Product}
]
});
//获取参数:
this.$route.params.id

37.Vue路由模块中$route和$router的区别?

$route中存储的是跟路由相关的属性(如$route.params,$route.query) ;
$router中存储的是和路由相关的方法(如$router.push(),$router.go()),

38.vue中v-for指令循环遍历中key属性的作用？

Key属性的作用是在数据层和视图层之间建立一一对应关系,方便后期对页面进行局部更新.如果某一条数据发生改变,只更新当前数据对应的DOM元素.

39.Vue和react有哪些不同的地方?

Vue实现了双向数据绑定(数据<=>界面);react仅仅实现了单项数据流(数据层=>界面层); vue中提供了指令, react中没有指令的概念.vue中使用插值表达式在进行数据渲染, react中使用jsx进行数据的渲染.

40.Vue有哪些常用的事件修饰符?

.prevent:阻止默认事件;

.stop:阻止冒泡;

.once:事件执行一次;

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

41.列举Vue中常用的指令

v-model:实现双向数据绑定;

v-bind:绑定属性;v-on:注册事件;

v-html:设置标签内容(允许内容html)

v-text:设置标签的内容(不允许包含html)v-clack:解决插值表达式闪烁问题

V-for:循环遍历数组或对象

42.Vue中如何解决插值表达式闪烁问题?

使用v-html或v-text替代插值表达式;使用v-clack解决插值表达式闪烁,

第一步:声明属性选择器[v-clack]{display:none}

第二步:在插值表达式所在标签添加属性v-clack

43.Vue路由中如何实现通过锚点值的改变切换组件?

通过监听hashchange事件,具体如下:

window.addEventListener('hashchange',function(){
    console.log('hash change');
});

44.vue中如何实现给样式添加作用域?

说明其实现原理vue中要给样式添加作用域,只需要给style标签添加scoped属性即可.

实现原理:添加了scoped属性的style标签内的样式会被改写成一个交集选择器,会在原来类名的基础上添加一个随机属性(如.container[v-abcde])

同时引用该类名的标签也会添加一个相同的属性(如) 这样的话,这个类名就可以对引用它的标签生效,同时不会影响其他同类名的标签.

45.Vue中如何动态添加一个路由规则?

使用router.addRoutes([{path:’’,component:’’}])

46.Vue中有何优化页面的加载效率?

使用路由懒加载和组件懒加载;不要打包一些公共的依赖(vue,组件库);使用CDN加载这些依赖文件

47.什么是路由懒加载?

路由懒加载有什么好处?如何实现路由懒加载?

路由懒加载是指通过异步的方式来加载对应的路由组件(默认情况是将所有的组件全部加载并打包).

路由懒加载的好处:可以提高页面的加载速度,尤其是首页的加载速度(因为使用了懒加载后,加载首页的时候,就不需要加载其他页面对应的组件,在需要的时候再加载)

具体实现:

import Vue from 'vue';
import Router from 'vue-router';
//异步导入组件
//异步加载方式一
const List = resolve => require([
'@/components/list'], resolve);
//异步加载方式二
const Detail = () => import(/* webpackChunkName: "group-master" */
'@/components/detail')
Vue.use(Router);
export default new Router({
//路由规则
routes:[
{path:'/list',component:List},
{path:'/detail',component:Detail}
],
//路由模式:默认hash,可选值hash(如#/index)|history(/index)
 mode:'history'
});

48.Vue中如何触发一个自定义事件?

通过this.$emit(event, ’数据’)可以触发自定义事件的执行.

49.Vue中如何监听自定义事件的执行?

通过this.$on(event,callback)可以监听自定义事件的执行

50.Vue中如何移除自定义事件?

通过this.$off(event,callback)可以移除一个自定义事件;
如果某些特殊场景下。一个事件被触发一次后就需要将其移除,
可以使用this.$once(event,callback)进行事件注册

51.vm.$mount(selector)方法的作用是什么?

手动将一个vue实例挂载到页面上

var MyComponent =
Vue.extend({ template:
'
Hello!
'
})
//创建并挂载到#app (会替换#app)
new MyComponent().$mount('#app')
//同上
new MyComponent({ el: '#app' })

52.Vue中keep-alive组件的作用是什么?

keep-alive可以将被包裹的组件暂存在内存当中,当页面切换的时候,组件不会被重复的销毁和创建,从而可以提高整体性能,同时也可以保存组件的一些状态.

53.Vue中如何手动销毁一个vue实例?

调用vm.$destroy()可销毁一个vue实例(清理它与其它实例的连接，解绑它的全部指令及事件监听器)

54.Vue中有哪些内置的组件?

component, slot, transition, transition-group, keep-alive

<!--动态组件由vm实例的属性值`componentId`控制-->
<component :is="componentId"></component>
<!--tansition动画组件的使用-->
<transition>
<div v-if="ok">toggled content</div>
</transition>

55.vue实例中有哪些属性?

vm.$data可以获取vm实例对象data中的数据;
vm.$props可以获取vm组件接收到的props对象数据;
vm.$el可以获取vm实例对象的根dom元素;

var MyComponent =
Vue.extend({ template:'
Hello!
'
})
var vm = new MyComponent().$mount()
document.getElementById('app').appendChild(vm.$el)

vm.$refs可以获取vm实例中注册过ref特性的所有dom元素和组件实例.

56.Vue.use(plugin)的作用是什么,使用的时候需要注意什么问题?

Vue.use的作用是安装一个Vue插件,该方法需要在调用new Vue()之前被调用.

57.vm.$nextTick(fn)的作用是什么?

延迟某个操作的执行,直到dom更新以后在执行.

<body>
<div id="app"><h1 ref="h1">{{title}}</h1></div>
</body>
<script>
var vm = new Vue({ el:'#app',
data: {
title: '这是一个标题'
}
created: function ()
{ this.$nextTick(() =>
{
//在created里直接操作ref会报错
this.$refs.h1.innerHTML = '这是更新以后的标题';
});
}
});

58.vue中的混入(mixin)有什么作用?

混入(mixin)提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。

当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

49.什么是虚拟 DOM?

文档对象模型或DOM定义了一个接口，该接口允许lavaScript之类的语言访问和操作 HTML文档。元素由树中的节点表示，并且接口允许我们操纵它们。但是此接口需要付出代价，大量非常频繁的DOM操作会使页面速度变。
Vue通过在内存中实现文档结构的虚拟表示来解决此问题，其中虚拟节点(vNode)表示 DOM树中的节点。当需要操纵时，可以在虚拟DOM的内存中执行计算和操作，而不是在真实DOM上进行操纵。

这自然会更快，并且允许虚拟DOM算法计算出最优化的方式来更新实际DOM结构,一旦计算出，就将其应用于实际的DOM树，这就提高了性能，这就是为什么基于虚拟DOM的框架（例皮Vue和 React)如此突出的原因。

累吗？ 累得一批