整理vue面试题(一)

羅小子
羅小子
羅小子
12
文章
3
评论
一月 3, 202107:03:36 评论

Vue.js是前端三大框架之一,很多公司都在使用。相比于其它两个框架,vue的学习成本是最低,也是最容易上手的。深受后端程序猿的喜爱。

一,生命周期面试题

1.什么是vue的生命周期?

vue生命周期是指页面从创建到销毁的整个过程,vue所有功能实现都是围绕生命周期进行的,在生命周期不同的阶段调用不同的生命周期钩子来实现组件数据管理和DOM渲染两大功能。

vue生命周期的作用是什么?

beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁前),destroyed(销毁后);

整理vue面试题(一)

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

beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后)。

3.created和mounted的区别?

这两个说简单点就是,created是在页面渲染完成前调用它的作用是初始化数据而mounted是在页面渲染完成后才会调用。

4.vue获取数据在哪个周期函数?

created里面,它的作用就是初始化数据。

5.请详细说下你对vue生命周期的理解?

beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁前),destroyed(销毁后);

vue理由面试题

1.mvvm 框架是什么?

前端页面中使用MVVM的思想,即MVVM是整个视图层view的概念,属于视图层的概念。

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。

模型指的是后端传递的数据。

视图指的是所看到的页面。

视图模型是mvvm模式的核心,它是连接view和model的桥梁。

它有两个数据传递方向:

一是将模型转化成视图,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。

二是将视图转化成模型,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。

以上两个方向都实现的,我们称之为数据的双向绑定。

总结:在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程图如下:

整理vue面试题(一)

MVVM是前端视图层的分层开发思想,将页面分成了Model, View,和VM;其中VM是核心,因为VM是V和M之间的调度者;

优势:MVVM提供了数据的双向绑定,让我们的开发更加方便。

2.vue-router 是什么?它有哪些组件?

vue-router字面意思就是路由,他有三个组件:router-linkrouter-viewkeep-alive

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

router-link 用来切换样式。

4.怎么定义 vue-router 的动态路由? 怎么获取传过来的值?

新建一个router文件,在文件中新建一个index.js文件。创建路由实例(new VueRouter)

通过query和params。

5.vue-router 有哪几种导航钩子?
  • 全局守卫:router.beforeEach
  • 全局解析守卫:router.beforeResolve
  • 全局后置钩子:router.afterEach
  • 路由独享守卫:beforeEnter
  • 组件内的守卫:beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

6.route和router 的区别?

route:对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。常用来获取传递过来的数据。

router:是全局路由的实例,是router构造方法的实例。通常用来页面之间跳转。

7.vue-router响应路由参数的变化?

如果是跳转到通组件,只是路由参数改变那么createdmounted将不会被调用,那么也拿不到数据。

可以通过watch监听路由和beforeRouteUpdate那解决这个问题。

8.vue-router传参

可以通过query和params,传递参数。

9.vue-router的两种模式 

hash模式:hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

window.onhashchange = function(event){
   console.log(event.oldURL,event.newURL);
   let hash = location.hash.slice(1);
   document.body.style.color = hash;
}

history模式:这个模式最大的特点就是url地址栏将不会出现“#”号,使地址url地址静态化。这个模式需要后端配置。

10.vue-router实现路由懒加载( 动态加载路由 )?

在路由里面使用requiry或者是import

整理vue面试题(一)

import:

整理vue面试题(一)

 

继续阅读
羅小子
整理vue面试题(二) 前端

整理vue面试题(二)

vue常见面试题整理第二章: 1.vue优点? 轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。 2.vue父组件向子组件传递数据? 通过属性方式传递数据,子组件...
整理vue面试题(二) 前端

整理vue面试题(二)

vue常见面试题整理第二章: 1.vue优点? 轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。 2.vue父组件向子组件传递数据? 通过属性方式传递数据,子组件...
javascript面试题继承实现的几种方式。 前端

javascript面试题继承实现的几种方式。

在面试中经常会被问到怎么实现一个继承?实现继承有那几种方式?问这个是要考面试者对于js的基础掌握程度。 如果要实现继承,肯定需要一个父类,先定义一个父类: // 定义一个人 function Peop...
javascript面试题防抖节流 前端

javascript面试题防抖节流

在前端开发中经常会处理input事件和滚动条监听事件,为了更好提升性能开发者可以使用防抖和节流。 防抖(debounce):触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: