Vue面试题汇总
-
-
-
- 1.什么是MVVM?
- 2.MVVM和MVC区别?它和其他框架(jquery)的区别是什么?哪些场景适合?
- 3.vue的优点是什么?
- 4.组件之间的传值?
- 5.JS中判断数据类型的方法有几种?
- 6.怎么定义 vue-router 的动态路由? 怎么获取传过来的值
- 7.active-class是哪个组件的属性?
- 8.嵌套路由怎么定义?
- 9.什么是生命周期
- 10.Vue的生命周期
- 11.vue生命周期的作用是什么?
- 12.第一次页面加载会触发哪几个钩子?
- 13.DOM 渲染在 哪个周期中就已经完成?
- 14. Vue实现数据双向绑定的原理:Object.defineProperty()
- 15.说出几种vue当中的指令和它的用法?
- 16.vue-loader是什么?使用它的用途有哪些?
- 17.为什么使用key?
- 18.请说出vue.cli项目中src目录每个文件夹和文件的用法?
- 19.分别简述computed和watch的使用场景
- 20.$nextTick有什么作用?
- 21.vue组件中data为什么必须是一个函数?
- 22.渐进式框架的理解
- 23.单页面应用和多页面应用区别及优缺点
- 24.Vue的路由实现:hash模式 和 history模式
- 25.Vue与Angular以及React的区别?
- 26.vuex是什么?怎么使用?哪种功能场景使用它?
- 27.不用Vuex会带来什么问题?
- 28.`` ``的作用是什么?
- 29.Vue中引入组件的步骤?
- 30.scss是什么?安装使用的步骤是?有哪几大特性?
- 31.mint-ui是什么?怎么使用?说出至少三个组件使用方法?
- 32.vue-router是什么?它有哪些组件?
- 33.聊聊你对Vue.js的template编译的理解?
- 34.vue.js的两个核心是什么?
- 35.常用事件的修饰符?
- 36.自定义指令的语义是什么?请举例说明一个带参数的自定义指令怎么定义?
- 37.自定义指令有哪些钩子函数,及自定义指令的使用场景?
- 38.组件特性及好处?
- 39.什么是过滤器?怎么定义全局和局部过滤器?
- 40.请说下封装 vue 组件的过程?
- 41.vue-router有哪几种路由守卫?
- 42.keep-alive是什么?
- 43.$router 和 $route的区别?
- 44.v-clock有什么作用?
- 45.params 和query 的区别?
- 46.Assets和static的区别?
- 47.有列表页进入到详情页的思路?
- 48.参数to、from、next分别是什么意思?
- 49.详述Vuex运行机制?
- 50.简述拦截器是什么,共有几个拦截点,分别是什么?
- 51.简述webpack?
- 52.vue父组件和子组件生命周期的顺序
- 53..vue中父组件能监听到子组件的生命周期吗
- 54.watch能监听到数组的pop行为吗
- 55.watch如何实现深度监听
- 56.vue中如何解决页面不重新渲染问题?.
- 57.vue创建组件的时候data中为什么会被return出一个对象?
- 58.什么是路由懒加载
- 59.什么是SPA?
- 60.vue-router怎么配置404页面?
- 61.切换路由时自动或提示保存草稿功能,如何实现?
- 62..vue-cli生成的项目可以使用es6、es7的语法吗?为什么?
- 63.什么是虚拟DOM?
- 64.怎么捕获组件vue的错误信息?
- 65.为何Vue采用异步渲染?
- 66..vue如何优化首页的加载速度?
- 67.ajax请求放在哪个生命周期中
- 68.Vue 应用运行时性能优化措施
- 69.Vue 应用加载性能优化措施
- 70.vue全家桶包含哪些?
- 71.v-if和v-for一起使用的弊端以及解决办法
- 72.beforeDestroyed里面一般进行什么操作
- 73.provide和inject特性
- 74.vue中父组件如何获取子组件的属性和方法
- 75.watch和computed的区别
- 76.vue中父组件能监听到子组件的生命周期吗
- 77.vue中的事件修饰符主要有哪些?分别是什么作用?
- 78.vue创建组件的时候data中为什么会被return出一个对象?
- 79.vue中有哪些内置组件?
- 80.怎么捕获组件vue的错误信息?
- 81.为什么vue使用异步更新组件?
- 82.vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?
- 83.vue如何实现按需加载配合webpack设置
- 84.v-show和v-if指令的共同点和不同点
- 85.简单描述VUE每个周期具体适合哪些场景
- 86.Vue.set() 响应式新增与修改数据
- 87.vue请求数据放在created好还是mounted里好
- 88.vue中对于对象的更改检测
- 89.vue计算属性和缓存和方法调用有什么区别
- 99.v-model实现机制
- 100.完整的vue-router导航解析流程
- 101.vue中key值得作用
- 102.vuex和单纯的全局对象有以下两点不同
- 103.你怎么理解vue是一个渐进式的框架?
- 104.vue中的过滤器
- 105.vue中的diff算法
- 106.vue中怎么实现css选择器隔离
- 107.created和mounted的区别
- 108.vue获取数据在哪个周期函数
- 109.vue-router 是什么?它有哪些组件
- 110.简述每个周期具体适合哪些场景?
- 111.聊聊你对Vue.js的template编译的理解?
- 112.vue自适应?
- 113.vue的整个实现流程?
- 114.为什么避免v-if和v-for一起使用?
- 115.axios 是什么
- 116.axios 特点
- 117.axios相比原生ajax的优点
- 118.vue路由切换和用location切换url的区别
-
-
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.组件之间的传值?
1.父组件与子组件传值
在父组件中给子组件标签上绑定一个属性, 属性上挂载需要传递的值
在子组件通过props:{“自定义属性名”}来接收数据
子组件传给父组件
在父组件中给子组件标签绑定一个自定义事件,给这个事件挂载需要调用的方法
在子组件的方法通过this. e m i t ( ‘ 自 定 义 事 件 名 ’ ) 来 调 用 这 个 方 法 2. 非 父 子 组 件 间 的 数 据 传 递 , 兄 弟 组 件 传 值 创 建 一 个 空 的 v u e 实 例 b u s 通 过 b u s . emit(‘自定义事件名’)来调用这个方法 2.非父子组件间的数据传递,兄弟组件传值 创建一个空的vue实例bus 通过bus. emit(‘自定义事件名’)来调用这个方法2.非父子组件间的数据传递,兄弟组件传值创建一个空的vue实例bus通过bus.emit(‘事件名’)传到空的vue实例中
通过bus.$on(‘事件名’,(参数)=>{挂载从子1传来的数据})来接收
5.JS中判断数据类型的方法有几种?
最常见的判断方法:typeof
判断已知对象类型的方法: instanceof
根据对象的constructor判断: constructor
无敌万能的方法:jquery.type()
6.怎么定义 vue-router 的动态路由? 怎么获取传过来的值
在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id
获取:this.$route.params.id
7.active-class是哪个组件的属性?
active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换。
8.嵌套路由怎么定义?
我们在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。
示例代码:
9.什么是生命周期
Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。
10.Vue的生命周期
1.beforeCreate
在数据观测和初始化事件还未开始,VUE实例的挂载元素 $ el 和数据对象都为undefined
可以进行的事件:加loading事件
2.created
完成数据观测,属性和方法的运算,初始化事件,$ el 属性还没有显示出来
可以进行的事件:结束loading,请求数据为mounted作准备
3.beforeMount
在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。($el和data都已经初始化,但仍是虚拟DOM节点)
4.Mounted
e l 被 新 创 建 的 v m . el被新创建的vm.el被新创建的vm.el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。(VUE实例挂载完成,data.filter成功渲染)
可以进行的事件:配合路由钩子使用
5.beforeUpdate
在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
6.Update
在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
7.beforeDestroy
在实例销毁之前调用。实例仍然完全可用。
8.destroyed
在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
11.vue生命周期的作用是什么?
它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
12.第一次页面加载会触发哪几个钩子?
会触发 下面这几个beforeCreate, created, beforeMount, mounted 。
13.DOM 渲染在 哪个周期中就已经完成?
DOM 渲染在 mounted 中就已经完成了。
14. Vue实现数据双向绑定的原理:Object.defineProperty()
vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
实现过程
我们已经知道如何实现数据的双向绑定了, 那么首先要对数据进行劫持监听,所以我们首先要设置一个监听器Observer,用来监听所有的属性,当属性变化时,就需要通知订阅者Watcher,看是否需要更新.因为属性可能是多个,所以会有多个订阅者,故我们需要一个消息订阅器Dep来专门收集这些订阅者,并在监听器Observer和订阅者Watcher之间进行统一的管理.以为在节点元素上可能存在一些指令,所以我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令初始化成一个订阅者Watcher,并替换模板数据并绑定相应的函数,这时候当订阅者Watcher接受到相应属性的变化,就会执行相对应的更新函数,从而更新视图.
整理上面的思路,我们需要实现三个步骤,来完成双向绑定:
1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器
vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 { {}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。
js实现简单的双向绑定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {
}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup'