面试题之vue系列
最近面试了好几家公司,总结一下经常被问到的面试题。
首先呢,一开始先来一个自我介绍,没啥好说的。
接下来就是考验你vue技术的问题了
一些常见的面试题
vue的生命周期
一共有八个阶段,分别为创建前后,挂载前后,更新前后,销毁前后。重点回答是创建后和挂载后
beforeCreate:此阶段为实例初始化之后,此时的数据观察和事件机制都未形成,不能获得DOM节点。
created:在这个阶段vue实例已经创建,仍然不能获取DOM元素。但是可以首次拿到data中定义的数据。
beforeMount:得不到具体的DOM元素,但vue挂载的根节点已经创建,下面vue对DOM的操作将围绕这个根元素继续进行。
mounted:DOM树渲染结束,可访问dom结构,
beforeUpdate:vue遵循数据驱动DOM的原则;beforeUpdate函数在数据更新后虽然没立即更新数据,但是DOM中的数据会改变,这是Vue双向数据绑定的作用。
updated:DOM会和更改过的内容同步。
beforeDestroy:在上一阶段vue已经成功的通过数据驱动DOM更新,当我们不在需要vue操纵DOM时,就需要销毁Vue,也就是清除vue实例与DOM的关联,调用destroy方法可以销毁当前组件。在销毁前,会触发。
destryed。
vue的原理 (出自:https://zhuanlan.zhihu.com/p/138114429)
1、MVVM
vue是一个MVVM渐进式框架,MVVM是vue的设计模式,在vue框架中数据会自动驱动视图。
view:视图,代表ui组件
model:模型,代表data数据
viewmodel:监听模型数据,即data的改变和控制视图行为、处理用户交互。简单理解就是同步view和model的对象,连接model和view。
总结:在vue模式下,view和model没有直接的联系,它们通过viewmodel进行交互。model和viewmodel之间的交互是双向的,因此view数据的变化会同步到model中,而model中数据的改变也会立即反应到view上。
viewmodel通过双向数据绑定把view层和model层连接起来,而view和model之间的同步工作完全是自动的,无需人为干涉,因此开发者只需要关注业务逻辑,不需要手动操作DOM,不需要关注数据状态的同步问题,复杂的数据状态维护完全由MVVM来统一管理。
2、响应式
vue的响应式原理核心是通过ES5的保护对象的Object.defindeProperty中的访问器属性中的get和set方法,data中声明的属性都被添加了房问题属性,当读取data中的数据时自动调用get方法,当修改data中的数据时,自动调用set方法,检测到数据的变化,会通知观察者Watcher自动触发重新render当前组件(子组件不会重新渲染),生成新的虚拟DOM数,vue框架会遍历并对比新虚拟DOM树和旧虚拟DOM树中每个节点的差别,并记录下来,最后加载操作,将所有记录的不同点,局部修改到真实DOM树上。
组件间传参
父子组件间的传参:子组件通过props方法接受父组件传来的值,子组件通过$emit方法来向父组件发送数据。
兄弟组件间的传参:1、bus传递,2、用过引入vuex轻松管理各组件之间通信。
vue路由的传参
1、通过动态路由方式
2、通过query传参
3、params传参
总结:
1.动态路由和query属性传值 页面刷新参数不会丢失, params会丢失
2.动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数 。
vue的哈希路由与历史路由的区别
hash模式url里面永远带有#,在开发中默认使用这个模式。
用户考虑url的规范就要使用history模式,因为history模式没有#号,是个正常的url,适合推广宣传。
下面是功能区别,在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,咱们把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,所以要将#号去除那么就要使用history模式。
使用history模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现404错误,那么就需要和后端人配合让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上就ok啦。
计算属性和watch的区别
watch侦听器是vue提供的一个响应数据的变化。当需要在数据变化时执行异步或者开销较大的操作时,选择watch更适合。
计算属性不仅仅是依赖的数据发生变化会触发改变该属性的值,我们也可以通过设置setter改变本身属性的值来改变它依赖的值。
watch是侦听一个参数,当这个参数发生变化时影响其他数据的变化。并且可以获得该参数的新值和旧值进行相应的计算。
通过以上叙述我们可以得知: watch适合处理的场景是,侦听一个数的变化,当该数据变化,来处理其他与之相关数据的变化(该数据影响别的多个数据)
computed适合处理的场景是,获得一个值或者结果,该结果受其他的依赖的影响。(一个数据受多个数据影响)
用过$nextTick,有什么作用,能解决什么问题。
nexttick在页面页面全部加载完成之后才执行。
在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。
解决的问题:有些时候在改变数据后立刻要对dom进行操作,此时获取到的dom仍是获取到数据刷新前的dom,无法满足需要,这时就用到了$nextTick。
vue中key的作用
key是v-for中使用的,唯一标识,如果没有,控制台会有警告。
vue的dom渲染是虚拟dom,数据发生变化时,diff算法会只比较更改的部分,如果数据项的顺序被改变,vue将不是移动DOM元素来匹配数据项的改变,而是简单服用此处每个元素,并且确保它的特定索引下显示已被渲染过的没给元素。
举例:有一个列表我们现在在中间插入一个元素,diff算法会默认复用之前的列表并在最后追加一个,如果列表存在选中一类的状态,则会随着复用出现绑定错误的情况而不是跟着原元素,key的做就可以给它一个标识,让状态跟着数据渲染。
route和router的区别
route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name、path、params、query等。
router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局对象,它包含了所有的路由中包含的关键对象和属性。
简单说一说vuex (参考:https://www.cnblogs.com/guiyishanren/p/10657910.html)
vuex是一个组件全局状态(数据)管理的一种机制,方便组件之间数据共享 状态也可以只数据
state是一个存放数据的东西(唯一一个公共数据源,放到store中state存储)
getter是state的计算属性
mutation用于变更store中的数据(集中监控所有数据的变化,方便后期维护)
只有mutation有权利修改state中的数据,但是mutation不能执行异步操作
comint(""):专门用来调用mutation中的函数
action:执行异步,但是不能直接修改state中的数据,只能通过xxx.comint("")触发mutation实现异步,简单来说就是把异步操作放在actions里,拿到数据再通过mutations同步处理。
dispatch():专门用来调用action中的函数
Module是将store模块化
注意:
1. store 中存储的状态是响应式的,当组件从store中读取状态时,如果store中的状态发生了改变,那么相应的组件也会得到更新;
2. 不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化
vue与react的区别
1、数据是不是可变的
react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流,结合immutable来实现数据不可变。
vue的思想是响应式的,也就是基于数据可变的,通过建立watcher来监听,当属性变化的时候,响应式的更新对应的虚拟dom
总结:react的性能优化需要手动操作,vue的性能优化则是自动,但vue的响应式存在问题是当state特别多,watcher也很很多,会导致卡顿,所以大型应用一般用react,更加可控。
2、通过js操作一切还是用各自的处理方式
react的思路是all in js ,通过js来生成html,所以设计了jsx。通过js来操作css,社区的styled-component、jss等等
vue是把html、css、js组合到一起,用各自的处理方式,vue有单文件组件,可以把html、css、js写到一个文件中,html提供了模板引擎来处理。
3、类式的组件写法还是声明式的写法
react是类式写法,api很少
vue是声明式写法,通过传入options,api和参数都很多。所以react结合typescript更容易一起写。
4、是内置还是社区去操作
react做的事情很少,很多都是交给社区去做
vue很多东西都是内置的,写起来会更方便
你处理过浏览器哪些兼容问题
兼容问题主要是有浏览器内核不用引起的,其中渲染引擎问题居多。最常处理的兼容问题有
1、不同浏览器的变迁默认的外补丁和内补丁不同
问题:各自的margin和padding差异较大
解决:css是 *{margin:0;padding:0;}
2、图片默认有间距
问题:几个img标签放在一起,有些浏览器会有默认的间距,加了*{margin:0;padding:0;}也不起作用。
解决:使用float属性为img布局
3、透明度的兼容
问题:IE9以下不能使用opacity
解决:opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
4、边距重叠问题
问题:当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;
解决:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
以后要是想到或者遇到别的问题也会继续更新。
本文全纯手敲,敲错什么术语或者敲错什么字的话,望指正。谢谢
本文来自博客园,作者:兮其,转载请注明原文链接:https://www.cnblogs.com/kyky-xcq/p/12895828.html