vue面试题

321 阅读5分钟

1、blog.csdn.net/shi\_xingwe…

www.520mg.com/a/inter/vue…

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

blog.csdn.net/m0\_4856051…

3、vue- router有哪几种导航钩子?

三种,
第一种:是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
第二种:组件内的钩子
第三种:单独路由独享组件

a、详解vue-router中的导航钩子

一:概念

作用:拦截导航,让他完成跳转或取消。

const router = new VueRouter({ ... });router.beforeEach((to, from, next) => {    // do someting});

4、vuex是什么?如何使用?在哪种功能场景中使用它?

www.520mg.com/a/inter/vue…

你是怎样认识vuex的?

vuex可以理解为一种开发模式或框架。它是对 Vue. js框架数据层面的扩展。通过状态(数据源)集中管理驱动组件的变化。应用的状态集中放在 store中。改变状态的方式是提交 mutations,这是个同步的事务。异步逻辑应该封装在 action中。

5、如何实现自定义指令?它有哪些钩子函数?还有哪些钩子函数参数?

6、Vue-router是什么?它有哪些组件?

<router-link :to='' class='active-class'>   //路由声明式跳转 ,active-class是标签被点击时的样式

<router-view>                  //渲染路由的容器

<keep-alive>                    //缓存组件

vue-router路由,通俗来讲主要是来实现页面的跳转,通过设置不同的path,向服务器发送的不同的请求,获取不同的资源。

主要组件:router-viewrouter-link

7、Vue.js的双向数据绑定原理是什么?

Vue. js采用ES5提供的属性特性功能,结合发布者-订阅者模式,通过 Object.defineProperty()为各个属性定义get、set特性方法,在数据发生改变时给订阅者发布消息,触发相应的监听回调。 具体步骤如下。 

 (1)对需要观察的数据对象进行递归遍历,包括子属性对象的属性,设置set和get特性方法。当给这个对象的某个值赋值时,会触发绑定的set特性方法,于是就能监听到数据变化。 

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

 (3) Watcher订阅者是 Observer和 Compile之间通信的桥梁,主要功能如下。 在自身实例化时向属性订阅器(dep)里面添加自己。 自身必须有一个 update( )方法。 在 dep.notice()发布通知时,能调用自身的 updat()方法,并触发 Compile中绑定的回调函数。 

(4)MVVM是数据绑定的入口,整合了 Observer、 Compile和 Watcher三者,通过Observer来监听自己的 model数据变化,通过 Compile来解析编译模板指令,最终利用Watcher搭起 Observer和 Compile之间的通信桥梁,达到数据变化通知视图更新的效果。利用视图交互,变化更新数据 model变更的双向绑定效果。

8、请详细说明你对Vue.js生命周期的理解。

总共分为8个阶段,分别为 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。 

 beforeCreate:在实例初始化之后,数据观测者( data observer)和 event/ watcher事件配置之前调用。

 created:在实例创建完成后立即调用。在这一步,实例已完成以下的配置:数据观测者,属性和方法的运算, watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。

 beforeMount:在挂载开始之前调用,相关的 render函数首次调用。

 mounted: el被新创建的vm.$el替换,并且在挂载到实例上之后再调用该钩子如果root实例挂载了一个文档内元素,当调用 mounted时vm.sel也在文档内。

 beforeUpdate:在数据更新时调用,发生在虛拟DOM重新渲染和打补丁之前。

 updated:由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩。

 beforeDestroy:在实例销毁之前调用。在这一步,实例仍然完全可用。

 destroyed:在 Vue. js实例销毀后调用。调用后,Vue. js实例指示的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

当使用组件的kep- alive功能时,增加以下两个周期。 

 activated在keep- alive组件激活时调用; 

deactivated在keep-live组件停用时调用。

 Vue2.5.0版本新增了一个周期钩子:ErrorCaptured,当捕获一个来自子孙组件的错误时调用

9、Vue- loader是什么?它的用途有哪些?

它是解析.vue文件的一个加载器,可以将 template/js/style转换成 JavaScript模块。 用途是通过 vue-loader, JavaScript可以写 EMAScript 6语法, style样式可以应用scss或less, template可以添加jade语法等。

10、谈谈你对vue.js的 template编译的理解。

简而言之,就是首先转化成AST( Abstract Syntax Tree,抽象语法树),即将源代码语法结构抽象成树状表现形式,然后通过 render函数进行渲染,并返回VNode( Vue. js的虚拟DOM节点)。 详细步骤如下。 (1)通过 compile编译器把 template编译成AST, compile是 create Compiler的返回值, createCompiler用来创建编译器。另外, compile还负责合并 option。 (2)AST会经过 generate(将AST转化成 render funtion字符串的过程)得到 render函数, render的返回值是 VNode, VNode是 Vue.Js的虚拟DOM节点,里面有标签名子节点、文本等。