高级前端开发必会的30道Vue面试题和多种实战技巧

发布于:2021-06-13 21:04:11

基础篇
1、css只在当前组件起作用
2、v-if 和 v-show 区别
3、




r


o


u


t


e






route和


route和router的区别
4、vue.js的两个核心是什么?
5、vue几种常用的指令
6、vue常用的修饰符?
7、v-on 可以绑定多个方法吗?
8、vue中 key 值的作用?
9、什么是vue的计算属性?
10、vue等单页面应用及其优缺点
11、怎么定义 vue-router 的动态路由? 怎么获取传过来的值
12、watch和computed差异
13、组件中data为什么是函数


扩展篇
14、对于MVVM的理解?
15、VUE生命周期的几个阶段
16、什么是vue生命周期?
17、vue生命周期的作用是什么?
18、第一次页面加载会触发哪几个钩子?
19、DOM 渲染在 哪个周期中就已经完成?
20、VUE实现数据双向绑定的原理
21、VUE组件间的参数传递
22、VUE的路由实现:hash模式和history模式
23、VUEX是什么?怎么使用?哪种功能场景使用它?
24、对keep-alive的理解
25、虚拟DOM的优缺点?
26、vue的watch的深度使用
27、vue与react的选择
28、vuex中mutation和action的详细区别
29、vue-router中导航守卫有哪些
30、简述vue中diff算法原理


随着VUE在企业中的广泛应用,除了掌握大量面试题外,还得具体在实际开发中写出更易于维护、可读性、扩展性更好的代码;以下总结了几个常见面试题和开发中的技巧;


一、常见面试题
1.css只在当前组件起作用
答:在style标签中写入scoped即可 例如:


2.v-if 和 v-show 区别
答:简单回复:v-if按照条件是否渲染,v-show是display的block或none;
详细比较:
v-show是css切换,v-if是完整的销毁和重新创建。
使用
频繁切换时用v-show,运行时较少改变时用v-if
v-if=‘false’ v-if是条件渲染,当false的时候不会渲染


3.




r


o


u


t


e






route和


route和router的区别
答:




r


o


u


t


e






































p


a


t


h





p


a


r


a


m


s





h


a


s


h





q


u


e


r


y





f


u


l


l


P


a


t


h





m


a


t


c


h


e


d





n


a


m


e






























route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。而


route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。而router是“路由实例”对象包括了路由的跳转方法,钩子函数等。


4.组件中data为什么是函数
为什么组件中的 data 必须是一个函数,然后 return 一个对象,而 new Vue 实例里,data 可以直接是一个对象?
因为组件是用来复用的,JS 里对象是引用关系,这样作用域没有隔离,而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。


5.VUE生命周期的几个阶段
beforeCreate(创建前) 在数据观测和初始化事件还未开始
created(创建后) 完成数据观测,属性和方法的运算,初始化事件,




e


l





























b


e


f


o


r


e


M


o


u


n


t



























































r


e


n


d


e


r













































































d


a


t


a
































h


t


m


l
































h


t


m


l

















m


o


u


n


t


e


d




















e


l

















v


m


.



el属性还没有显示出来 beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。 mounted(载入后) 在el 被新创建的 vm.


el属性还没有显示出来beforeMount(载入前)在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。mounted(载入后)在el被新创建的vm.el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。
destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。


6.对keep-alive的理解
keep-alive是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
在vue 2.1.0 版本之后,keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存,优先级大于include) 。
参数解释
include - 字符串或正则表达式,只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式,任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“,”分隔字符串、正则表达式、数组。当使用正则或者是数组时,要记得使用v-bind 。


7、vuex中mutation和action的详细区别


1)、流程顺序
“相应视图?>修改State”拆分成两部分,视图触发Action,Action再触发Mutation。
2)、触发方式
mutation的触发通过store.commit来进行
action的触发通过store.dispatch进行
3)、角色定位
基于流程顺序,二者扮演不同的角色。
Mutation:专注于修改State,理论上是修改State的唯一途径。
Action:业务代码、异步请求。
4)、限制
角色不同,二者有不同的限制。
Mutation:必须同步执行。
Action:可以异步,但不能直接操作State。


二、企业实战中使用 Vue 的最佳做法
1.始终在 v-for 中使用 :key
在需要操纵数据时,将key属性与v-for指令一起使用可以让程序保持恒定且可预测。
这是很有必要的,这样Vue就可以跟踪组件状态,并对不同的元素有一个常量引用。在使用动画或Vue转换时,key 非常有用。
如果没有key ,Vue只会尝试使DOM尽可能高效。 这可能意味着v-for中的元素可能会出现乱序,或者它们的行为难以预测。 如果我们对每个元素都有唯一的键引用,那么我们可以更好地预测Vue应用程序将如何精确地处理DOM操作。


2、在事件中使用短横线命名
在发出定制事件时,最好使用短横线命名,这是因为在父组件中,我们使用相同的语法来侦听该事件。
因此,为了确保我们各组件之间的一致性,并使您的代码更具可读性,请在两个地方都坚持使用短横线命名。


3.使用驼峰式声明 props,并在模板中使用短横线命名来访问 props
最佳做法只是遵循每种语言的约定。 在 JS 中,驼峰式声明是标准,在HTML中,是短横线命名。 因此,我们相应地使用它们。
幸运的是,Vue 已经提供了驼峰式声明和短横线命名之间转换,因此除了实际声明它们之外,我们不必担心任何事情。


4.data 应始终返回一个函数
声明组件data时,data选项应始终返回一个函数。 如果返回的是一个对象,那么该data将在组件的所有实例之间共享。


但是,大多数情况下,我们的目标是构建可重用的组件,因此我们希望每个组件返回一个惟一的对象。我们通过在函数中返回数据对象来实现这一点。


    不要在同个元素上同时使用v-if和v-for指令
    为了过滤数组中的元素,我们很容易将v-if与v-for在同个元素同时使用。

问题是在 Vue 优先使用v-for指令,而不是v-if指令。它循环遍历每个元素,然后检查v-if条件。


这么做有几个好处:
?渲染效率更高,因为我们不会遍历所有元素
?仅当依赖项更改时,才会重使用过滤后的列表
?这写法有助于将组件逻辑从模板中分离出来,使组件更具可读性


    模板表达式应该只有基本的 JS 表达式
    在模板中添加尽可能多的内联功能是很自然的。但是这使得我们的模板不那么具有声明性,而且更加复杂,也让模板会变得非常混乱。
    为此,让我们看看Vue样式指南中另一个规范化字符串的示例,看看它有多混乱。

基本上,我们希望模板中的所有内容都直观明了。 为了保持这一点,我们应该将复杂的表达式重构为适当命名的组件选项。
分离复杂表达式的另一个好处是可以重用这些值。


7.不要在“created”和“watch”中调用方法
Vue开发人员经常犯的一个错误是他们不必要地在created和watch中调用方法。 其背后的想法是,我们希望在组件初始化后立即运行watch。


但是,Vue为此提供了内置的解决方案,这是我们经常忘记的Vue watch属性。
我们要做的就是稍微重组watch并声明两个属性:
1)handler (newVal, oldVal)-这是我们的watch方法本身。
2)immediate: true- 代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行


总结:在实际开发过程中,这些技巧对于您是有很多帮助的,可以让我们的代码更易于维护,更具有扩展性和可读性,这里只是展示了其中的一部分,如果想获取更多的vue面试题和实战开发经验可以加q群902961830

相关推荐

最新更新

猜你喜欢