Vue常见面试题
- 1.Vue的最大优势是什么?
- 2.Vue和jQuery区别是什么?
- 3.mvvm和mvc区别是什么?
- 4.Vue常用修饰符有哪些?
- 5.Vue2.x兼容IE哪个版本以上
- 6.对Vue渐进式的理解
- 7.v-show和v-if的区别
- 8. 说出至少4个Vue指令及作用
- 9. 为什么避免v-for和v-if在一起使用
- 10.Vue 中怎么自定义过滤器
- 11.Vue中:key作用, 为什么不能用索引
- 12.数组更新有的时候v-for不渲染
- 13.Vue组件如何进行传值的
- 14.Vue 组件 data 为什么必须是函数
- 15.组件的命名规范
- 16.Vue 的 nextTick 的原理是什么? (高薪常问)
- 17.vue中solt的使用方式,以及solt作用域插槽的用法
- 18.跟keep-alive有关的生命周期是哪些?(必会)
- 19.自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?(必会)
1.Vue的最大优势是什么?
简单易学, 轻量级整个源码js文件不大, 双向数据绑定, 数据驱动视图, 组件化, 数据和视图分离, vue负责关联视图和数据, 作者中国人(尤雨溪), 文档都是中文的, 入门教程非常多, 上手简单. 相比传统网页, vue是单页面可以只刷新某一部分
2.Vue和jQuery区别是什么?
jQuery应该算是一个插件, 里面封装了各种易用的方法, 方便你使用更少的代码来操作dom标签
Vue是一套框架, 有自己的规则和体系与语法, 特别是设计思想MVVM, 让数据和视频关联绑定, 省略了很多DOM操作. 然后指令还给标签注入了更多的功能
3.mvvm和mvc区别是什么?
MVC: 也是一种设计模式, 组织代码的结构, 是model数据模型, view视图, Controller控制器, 在控制器这层里编写js代码, 来控制数据和视图关联
MVVM: 即Model-View-ViewModel的简写。即模型-视图-视图模型, VM是这个设计模式的核心, 连接v和m的桥梁, 内部会监听DOM事件, 监听数据对象变化来影响对方. 我们称之为数据绑定
4.Vue常用修饰符有哪些?
.prevent(提交事件不再重载页面)
.stop(阻止事件冒泡)
.once(只执行一次)
5.Vue2.x兼容IE哪个版本以上
不支持ie8及以下,部分兼容ie9 ,完全兼容10以上, 因为vue的响应式原理是基于es5的Object.defineProperty(),而这个方法不支持ie8及以下。
6.对Vue渐进式的理解
渐进式代表的含义是:主张最少, 自底向上, 增量开发, 组件集合, 便于复用
7.v-show和v-if的区别
v-show是通过display:none (频繁使用)
v-if是通过dom,惰性加载
8. 说出至少4个Vue指令及作用
v-bind 动态绑定
v-on 绑定事件处理方法
v-model 双向绑定
v-for 循环数组
v-show v-if 控制是否显示
v-text v-html 解析文本 解析标签
9. 为什么避免v-for和v-if在一起使用
Vue 处理指令时,v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.
10.Vue 中怎么自定义过滤器
分为全局过滤器和局部过滤器 可以用在插值表达式 和 v-bind 中
全局过滤器 Vue.filter() 写在main.js 入口中
局部过滤器 写在页面中 与data同级 filters属性
11.Vue中:key作用, 为什么不能用索引
:key时给v-for循环生成标签发放的唯一标识,用于性能的优化
根据索引作为key 会就地更新,不会移动dom元素来匹配数据的顺序
:key如果是索引, 因为索引是连续的, 如果删除其中某一个, 会导致最后一个被删除
当我们再删除的时候, :key再根据数据来把新旧的dom对比时, 删除:key不存在的对应的标签(添加也是一样的插入到指定位置, 别的都不会动)
12.数组更新有的时候v-for不渲染
因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()
13.Vue组件如何进行传值的
父向子传值 子组件通过props定义变量 父组件使用属性给子组件传值
子向父传值(直接) 父组件传递一个事件 子组件使用 $emit触发父组件的事件并传递参数
子向父传值(间接) 子组件可以在计算属性内间接改变父组件的值
子向子传值 创建一个中间EventBus.js(导入与导出) 子组件(传)使用 $emit 子组件(收)使用 $on事件
14.Vue 组件 data 为什么必须是函数
每个组件都是 Vue 的实例, 为了独立作用域, 不让变量污染别人的变量
15.组件的命名规范
给组件命名有两种方式(在Vue.Component/components时),一种是使用链式命名"my-component",一种是使用大驼峰命名"MyComponent"
16.Vue 的 nextTick 的原理是什么? (高薪常问)
- 为什么需要 nextTick ,Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM,但有时候业务需要必须对数据更改–刷新后的 DOM 做相应的处理,这时候就可以使用 Vue.nextTick(callback)这个 api 了。
- 理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;
- 理解 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码,会发现其中做了很多 isNative()的判断,因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑,对性能的良苦用心。
17.vue中solt的使用方式,以及solt作用域插槽的用法
使用方式:当组件当做标签进行使用的时候,用slot可以用来接受组件标签包裹的内容,当给solt标签添加name属性的 时候,可以调换响应的位置
(高级用法) 插槽作用域: 当传递的不是单一的标签, 例如需要循环时, 把要循环的标签传入, 组件内使用v-for在slot标签上, 内部可以v-bind:把值传出来, 再外面把值赋予进去
18.跟keep-alive有关的生命周期是哪些?(必会)
1.前言:在开发Vue项目的时候,大部分组件是没必要多次渲染的,所以Vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲染
2.生命周期函数:在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:activated 与 deactivated
activated钩子:在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用
activated钩子调用时机: 第一次进入缓存路由/组件,在mounted后面,beforeRouteEnter守卫传给 next 的回调函数之前调用,并且给因为组件被缓存了,再次进入缓存路由、组件时,不会触发这些钩子函数,beforeCreate created beforeMount mounted 都不会触发
deactivated钩子:组件被停用(离开路由)时调用
deactivated钩子调用时机:使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,被缓存起来了,这个钩子可以看作beforeDestroy的替代,如果你缓存了组件,要在组件销毁的的时候做一些事情,可以放在这个钩子里,组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)
19.自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?(必会)
全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives
钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
钩子函数参数:el、binding