2022年Vue最常见的面试题以及填空题(面试必问)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 2022年Vue最常见的面试题以及填空题(面试必问)

一、computed 和 watch 的区别


computed: 是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;


watch: 更多的是“观察”的作用,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作;


二、vue-router 路由模式有几种?


vue-router 有 3 种路由模式:hash、history、abstract


各模式的说明如下:


hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器;


history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式;


abstract : 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式.


三、vue中为什么data是一个函数


组件的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。如果单纯的写成对象形式,就使得所有组件实例共用了一份data,这样一个实例中更新数据会导致其他实例数据改变。


四、v-if 和 v-show 的区别


v-if 在编译过程中会被转化成三元表达式,条件不满足时不渲染此节点。


v-show 会被编译成指令,条件不满足时控制样式将此节点隐藏


五、请列举几个vue内部指令,并说明其作用(至少五个)


1. v-bind:绑定属性,动态更新HTML元素上的属性。例如 v-bind:class;


2. v-on:用于监听DOM事件。例如 v-on:click v-on:keyup;


3. v-text:更新元素的textContent;


4. v-model:用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值;


5. v-for:循环指令编译出来的结果是 -L 代表渲染列表。优先级比v-if高最好不要一起使用,尽量使用计算属性去解决;


6. v-show:使用指令来实现 -- 最终会通过display来进行显示隐藏;


六、你建不建议v-if和v-for一起使用?为什么?


v-for和v-if不要在同一标签中使用,因为解析时先解析v-for在解析v-if。如果遇到需要同时使用时可以考虑写成计算属性的方式。


七、v-for为什么要加key


v-for遍历时,key是Vue中vnode的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速。


更准确是因为带 key时,在sameNode函数进行key值对比中可以避免就地复用的情况。所以会更加准确。


更快速是利用 key 的唯一性生成 map 对象来获取对应节点,比遍历方式更快


八、填空题


  1. MVVM中的的Model表示页面中的数据和视图中间的调度者;
  2. MVVM中的的View表示页面中的视图
  3. VUE中可以使用DOM操作了;
  4. 在HTML中被Vue实例控制的代码区域我们称之为View
  5. 在Vue实例中的Data对象就是MVVM中的Model
  6. new出来的Vue实例就是MVVM中的ViewModel
  7. v-text指令是用来渲染文本的;
  8. v-html指令是用来渲染HTML标签;
  9. v-bind指令是用来给HTML属性绑定数据的;
  10. v-bind的简写是:
  11. v-on指令是给元素绑定事件的;
  12. 给一个div添加一个点击事件可以使用指令@;
  13. 在methods里的方法中想访问data里的数据可以使用this关键字;
  14. v-html指令相当于js中的innserHTML属性;
  15. VUE中v-for指令可以用来做循环;
  16. 当我们频繁的操作显示和隐藏元素的时v-show更好;
  17. v-else一般配个下面v-if指令使用;
  18. Vue的$mount()方法可以动态指定要控制的区域;
  19. 使用axios发起get请求的时候,第一个参数是请求地址;
  20. 每当vue实例对象监控到data中的数据发生了变化,会立即重新解析执行el区域内所有的代码;
  21. 当点击img图片使页面有一个弹框时,可以使用指令v-on
  22. vue实例的method对象里的方法可以使用ES6简写;
  23. @DateTimeFormat注解用于将指定格式的字符串转换为Date类型;
  24. vue中通常把v-model通常使用在表单标签中;
  25. vue中input元素可以使用v-model指令;


相关文章
|
3月前
|
JavaScript 前端开发 应用服务中间件
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
这篇文章分析了Vue项目在服务器部署后出现404错误的原因,主要是由于history路由模式下服务器缺少对单页应用的支持,并提供了通过修改nginx配置使用`try_files`指令重定向所有请求到`index.html`的解决方案。
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
|
3月前
|
JavaScript 前端开发 数据处理
【Vue面试题二十八】、vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
这篇文章讨论了Vue中实现权限管理的策略,包括接口权限、路由权限、菜单权限和按钮权限的控制方法,并提供了不同的实现方案及代码示例,以确保用户只能访问被授权的资源。
【Vue面试题二十八】、vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
|
3月前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
2月前
|
缓存 JavaScript 前端开发
vue面试题
vue面试题
164 64
|
1月前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
29 0
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
|
3月前
|
JavaScript 安全 前端开发
【Vue面试题二十九】、Vue项目中你是如何解决跨域的呢?
这篇文章介绍了Vue项目中解决跨域问题的方法,包括使用CORS设置HTTP头、通过Proxy代理服务器进行请求转发,以及在vue.config.js中配置代理对象的策略。
【Vue面试题二十九】、Vue项目中你是如何解决跨域的呢?
|
3月前
|
JavaScript 前端开发 编译器
【Vue面试题三十二】、vue3有了解过吗?能说说跟vue2的区别吗?
这篇文章介绍了Vue 3相对于Vue 2的改进和新增特性,包括性能提升、体积减小、更易维护、更好的TypeScript支持、新的Composition API、新增的Teleport和createRenderer功能,以及Vue 3中的非兼容性变更和API的移除或重命名。
【Vue面试题三十二】、vue3有了解过吗?能说说跟vue2的区别吗?
|
3月前
|
JavaScript 前端开发 API
【Vue面试题三十一】、你是怎么处理vue项目中的错误的?
这篇文章讨论了Vue项目中错误的处理方式,包括后端接口错误和代码逻辑错误的处理策略。文章详细介绍了如何使用axios的拦截器处理后端接口错误,以及Vue提供的全局错误处理函数`errorHandler`和生命周期钩子`errorCaptured`来处理代码中的逻辑错误。此外,还分析了Vue错误处理的源码,解释了`handleError`、`globalHandleError`、`invokeWithErrorHandling`和`logError`函数的作用和处理流程。
【Vue面试题三十一】、你是怎么处理vue项目中的错误的?
|
3月前
|
NoSQL Java 数据库
2022年整理最详细的java面试题、掌握这一套八股文、面试基础不成问题[吐血整理、纯手撸]
这篇文章是一份详尽的Java面试题总结,涵盖了从面向对象基础到分布式系统设计的多个知识点,适合用来准备Java技术面试。
2022年整理最详细的java面试题、掌握这一套八股文、面试基础不成问题[吐血整理、纯手撸]
|
3月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
37 0