前端面试题整理——VUE相关题目与回答

1、v-if与v-show的区别?

v-if的原理是根据判断条件来动态的进行增删DOM元素,

v-show是根据判断条件来动态的进行显示和隐藏元素,频繁的进行增删DOM操作会影响页面加载速度和性能所以此时使用v-show更合理。

只有v-if能和v-else连用进行分支判断,v-show是不能和v-else连用的。

2、生命周期有哪些?分别表示意义是什么?

beforeCreate():在实例生成之前

created():在实例生成之后

beforeMount():在模板已经被编译成函数之后,组件内容被渲染到页面之前

mounted():在组件内容被渲染到页面之后

beforeUpdate():当data中的数据发生变化时

updated():当data中的数据完成变化,同时页面完成更新后

VUE2:beforeDestroy()/VUE3:beforeUnmount():当Vue应用失效时

VUE2:Destroyed()/VUE3:unmounted():当Vue应用失效时,且dom完全销毁之后

3、nextTick的用途?

官方文档解释:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

应用场景:需要在视图更新之后,基于新的视图进行操作。

原因是Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。

官方提示:注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted。

4、key的作用?

key的作用主要是为了高效的更新虚拟DOM。

另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们。

5、组件通信有哪些方式?

组件通信方式有8种:

1、props / $emit

2、$children / $parent

3、provide / inject

4、ref / refs

5、eventBus

6、Vuex

7、localStorage / sessionStorage

8、$attrs / $listenes

通信形式可归类为两类:父子组件之间的通信、非父子之间的通信(兄弟组件,隔代关系组件)

父子组件通信方式可用:1、2、3、4、8

兄弟组件通信方式可用:5、6

跨级组件通信可用:3、5、6、8

6、单页应用有哪些优缺点?

优点:
1、具有桌面应用的即时性、网站的可移植性和可访问性。
2、用户体验好、快,内容的改变不需要重新加载整个页面,web应用更具响应性和更令人着迷。
3、基于上面一点,SPA相对对服务器压力小。
4、良好的前后端分离。SPA和RESTful架构一起使用,后端不再负责模板渲染、输出页面工作,web前端和各种移动终端地位对等,后端API通用化。
5、对前端人员javascript技能要求更高,促使团队技能提升。
缺点:
1、分功能模块的鉴权不好实现。
2、不利于SEO。
3、初次加载耗时相对增多。
4、导航不可用,如果一定要导航需要自行实现前进、后退。
5、对开发人员技能水平、开发成本高。

7、watch、computed有什么区别?

watch:

不支持缓存

支持异步

只可以设置一个函数,可以带有两个参数

监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作

不仅可以监听data中的数据,还可以监听路由的变化,

同时,在对于操作比较耗时的操作也是可以使用 watch 监听。例如用户注册时,检测账号是否可用。

watch对于引用类型是拿不到oldVal值,如果要深度监听需要添加deep:true属性。

computed:

支持数据的缓存。

函数内部的数据改变也会触发。

不支持异步,当computed内部有异步操作时computed无效

如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,一般用computed

computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

8、路由模式有哪些?区别是什么?

有两种模式:hash哈希模式、history模式

hash哈希模式:#值后面哈希发生变化,不会导致浏览器向服务器发送请求,也就不会发生刷新页面。

history模式:则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理,则会返回404错误

9、vuex有哪些基本概念?

state:用于数据的存储,是store中的唯一数据源

getters:如vue中的计算属性一样,基于state数据的二次包装,常用于数据的筛选和多个数据的相关性计算

mutations:类似函数,改变state数据的唯一途径,且不能用于处理异步事件

actions:类似于mutation,用于提交mutation来改变状态,而不直接变更状态,可以包含任意异步操作

modules:类似于命名空间,用于项目中将各个模块的状态分开定义和操作,便于维护

10、$router与$route的区别

1. $route从当前router跳转对象里面可以获取name、path、query、params等(<router-link>传的参数由 this.$route.query或者 this.$route.params 接收)

2. $router为VueRouter实例。想要导航到不同URL,则使用$router.push方法;返回上一个history也是使用$router.go方法

放弃安逸,持续努力——成长
原文地址:https://www.cnblogs.com/MarsPGY/p/14852894.html