Vue常见面试题 标准答案汇总一

简介: Vue常见面试题 标准答案汇总一

面试问题

今天我们来一起回顾下当红前端框架 Vue.Js的一些面试基础知识点,期间有很多朋友问,我只会说一句 看文档就好啦,啥都有,但对一些人来说,文档写的还是有些枯燥,名词也很多,不一定有效果。

正好今天,我们总结一下大家面试时,面试官一般会随口问到的概念,大家可以重新理解和收藏一下,以备不时之需(系列一)。

Vue 常见面试问题,你可能都知道概念,但都能回答准确吗?

一般常见和面试官会常问的Vue 基础知识点大致会包括这几个常见的

 

~ 计算属性(computed)、方法(methods)和侦听属性(watch)的区别与使用场景

~ Vue 生命周期的理解

~ Vue 双向绑定,为什么不能通过修改下标来通知视图发生变化

~ 简述 Vue 中的 MVVM 模型

~ Vue 路由中 hash 模式和 history 模式区别

~ Vue 路由中 $route 和 $router 的区别

~ 组件

计算属性(computed)、方法(methods)和侦听属性(watch)的区别与使用场景

methods VS 计算属性

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果,两种方式确实是相同的。

然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

相比而言,只要发生重新渲染,method 调用总会执行该函数。总之,重新计算开销很大的话请选计算属性,不希望有缓存的请选methods。

watch VS 计算属性

当你在模板内使用了复杂逻辑的表达式时,你应当使用计算属性。

侦听属性是一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。

当你有一些数据需要随着其它数据变动而变动时,或者当需要在数据变化时执行异步或开销较大的操作时,你可以使用 watch。


Vue 生命周期的理解

如何解释vue的生命周期才能令面试官满意?

  • beforeCreate

在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

  • created

在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

  • beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。

该钩子在服务器端渲染期间不被调用。以下周期在服务端渲染期间都不被调用。

  • mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted。

  • beforeUpdate

数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。

  • updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

  • activated

keep-alive 组件激活时调用。

  • deactivated

keep-alive 组件停用时调用。

  • beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。

  • destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。


Vue 双向绑定,为什么不能通过修改下标来通知视图发生变化

Vue为什么不能检测数组变动

变异方法:

Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:

push(), pop(), shift() ,unshift(), splice(), sort(), reverse()

替换数组:

filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:

注意事项:

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

  • 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
  • 当你修改数组的长度时,例如:vm.items.length = newLength

变通方法:

  • Vue.set(vm.items, indexOfItem, newValue)
  • vm.items.splice(indexOfItem, 1, newValue)

简述 Vue 中的 MVVM 模型

Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化。

ViewModel是Vue的核心,它是Vue的一个实例。Vue实例是作用在某个HTML元素上的,这个HTML元素可以是body,也可以是某个id所指代的元素。

DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化,当发生变化,Model层的数据随之变化;Data Bindings监听Model层的数据,当数据发生变化,View层的DOM元素随之变化。


Vue 路由中 hash 模式和 history 模式区别

hash模式

hash 出现在 URL 中,但不会被包含在 http 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,hash不会重加载页面。

history模式

history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈,在当前已有的 back、forward、go 基础之上,它们提供了对历史记录修改的功能。只是当它们执行修改时,虽然改变了当前的 URL ,但浏览器不会立即向后端发送请求。

原理:

hash 模式的原理是 onhashchange 事件,可以在 window 对象上监听这个事件。

history :hashchange 只能改变 # 后面的代码片段,history api (pushState、replaceState、go、back、forward) 则给了前端完全的自由,通过在window对象上监听popState()事件。


Vue 路由中 $route 和 $router 的区别

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

$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。

目录
相关文章
|
1月前
|
JavaScript 前端开发 架构师
阿里前端常考vue面试题汇总(二)
阿里前端常考vue面试题汇总(二)
131 0
|
1月前
|
缓存 JavaScript 前端开发
2024 前端高频面试题之 Vue 篇
2024 前端高频面试题之 Vue 篇
44 8
|
1天前
|
JavaScript
vue面试
vue面试
12 3
|
22天前
|
JavaScript 缓存 算法
VUE知识体系、VUE面试题
Vue 计算属性与方法差异:计算属性有缓存,基于依赖自动重计算,适合数据转换;方法无缓存,每次调用都会执行,参数灵活。计算属性相当于属性,可读写;方法用于处理逻辑。v-if 与 v-show:v-if根据条件创建或销毁DOM,适合不频繁切换;v-show通过改变display控制显示,频繁切换更优。v-if提高渲染效率,v-show维护DOM稳定性。v-for中key的作用:key帮助Vue识别唯一节点,优化diff算法,提高性能,避免使用index或random。
|
1月前
|
移动开发 缓存 JavaScript
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
24 6
|
1月前
|
JavaScript 前端开发 API
vue面试题目汇总
vue面试题目汇总
48 4
|
1月前
|
监控 JavaScript 前端开发
vue基础面试题10问
vue基础面试题10问
46 0
|
1月前
|
人工智能 缓存 JavaScript
【利用AI刷面试题】AI:十道Vue面试题巩固一下知识
【利用AI刷面试题】AI:十道Vue面试题巩固一下知识
|
1月前
|
存储 JavaScript 安全
Vue基础面试题题目一
Vue基础面试题题目一
33 0
|
1月前
|
JavaScript 数据安全/隐私保护 开发者
常见的vue面试中的proxy和object.defineProperty的区别
常见的vue面试中的proxy和object.defineProperty的区别