常见前端面试之VUE面试题汇总十三

这篇具有很好参考价值的文章主要介绍了常见前端面试之VUE面试题汇总十三。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

常见前端面试之VUE面试题汇总十三,前端开发,vue.js,前端,javascript,职场和发展,开发语言,面试,前端框架

 39. Vue 中 key 的作用

vue 中 key 值的作用可以分为两种情况来考虑:

第一种情况是 v-if 中使用 key。由于 Vue 会尽可能高效地渲染元 素,通常会复用已有元素而不是从头开始渲染。因此当使用 v-if 来 实现元素切换的时候,如果切换前后含有相同类型的元素,那么这个 元素就会被复用。如果是相同的 input 元素,那么切换前后用户的 输入不会被清除掉,这样是不符合需求的。因此可以通过使用 key 来 唯一的标识一个元素,这个情况下,使用 key 的元素不会被复用。这个时候 key 的作用是用来标识一个独立的元素。

第二种情况是 v-for 中使用 key。用 v-for 更新已渲染过的元素列 表时,它默认使用“就地复用”的策略。如果数据项的顺序发生了改 变,Vue 不会移动 DOM 元素来匹配数据项的顺序,而是简单复用此 处的每个元素。因此通过为每个列表项提供一个 key 值,来以便 Vue 跟踪元素的身份,从而高效的实现复用。这个时候 key 的作用是为 了高效的更新渲染虚拟 DOM。

key 是为 Vue 中 vnode 的唯一标记,通过这个 key,diff 操作可 以更准确、更快速

更准确:因为带 key 就不是就地复用了,在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确。

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

40.如何从真实DOM到虚拟DOM

涉及到Vue中的模板编译原理,主要过程:

  1. 将模板转换成 ast 树, ast 用对象来描述真实的JS语法(将真实DOM转换成虚拟DOM)
  2. 优化树
  3. 将 ast 树生成代码

41.为什么Vue采用异步渲染呢?

Vue 是组件级更新,如果不采用异步更新,那么每次更新数据都会对当前组件进行重新渲染,所以为了性能, Vue 会在本轮数据更新后,在异步更新视图。核心思想 nextTick 。

dep.notify() 通知 watcher进行更新, subs[i].update 依次调用 watcher 的 update , queueWatcher 将watcher 去重放入队列, nextTick( flushSchedulerQueue )在下一tick中刷新watcher队列(异步)。

42.为什么vue组件中data必须是一个函数?

对象为引用类型,当复用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题。

43.Vue-router 导航守卫有哪些

  • 全局前置/钩子:beforeEach、beforeResolve、afterEach
  • 路由独享的守卫:beforeEnter
  • 组件内的守卫:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

44.Vue 为什么要用 vm.$set() 解决对象新增属性不能响应的问题 ?你能说说如下代码的实现原理么?

1)Vue为什么要用vm.$set() 解决对象新增属性不能响应的问题

  1. Vue使用了Object.defineProperty实现双向数据绑定
  2. 在初始化实例时对属性执行 getter/setter 转化
  3. 属性必须在data对象上存在才能让Vue将它转换为响应式的(这也就造成了Vue无法检测到对象属性的添加或删除)

所以Vue提供了Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)

2)接下来我们看看框架本身是如何实现的呢?

Vue 源码位置:vue/src/core/instance/index.js
export function set (target: Array<any> | Object, key: any, val: any): any {
  // target 为数组  
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
    target.length = Math.max(target.length, key)
    // 利用数组的splice变异方法触发响应式  
    target.splice(key, 1, val)
    return val
  }
  // key 已经存在,直接修改属性值  
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target 本身就不是响应式数据, 直接赋值
  if (!ob) {
    target[key] = val
    return val
  }
  // 对属性进行响应式处理
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

我们阅读以上源码可知,vm.$set 的实现原理是:文章来源地址https://www.toymoban.com/news/detail-685422.html

  1. 如果目标是数组,直接使用数组的 splice 方法触发相应式;
  2. 如果目标是对象,会先判读属性是否存在、对象是否是响应式,
  3. 最终如果要对属性进行响应式处理,则是通过调用 defineReactive 方法进行响应式处理
defineReactive 方法就是 Vue 在初始化对象时,给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法

到了这里,关于常见前端面试之VUE面试题汇总十三的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端HTML、CSS、JS、VUE3 汇总

    学习https://developer.mozilla.org/zh-CN/docs/Learn/CSS 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 使用VS Code运行前端代码 在VS Code上安装前端插件 正在更新中~ ✨ 提示:这里可以添加本文要记录的大概内容: 学习路线 知识定位 HTML基础 标签、表格、表单、

    2024年02月13日
    浏览(51)
  • ChatGPT给出的前端面试考点(Vue.js)

    答案 1. Vue.js是什么?它的主要特点是什么? Vue.js是一个渐进式JavaScript框架,用于构建用户界面。它的主要特点包括: 数据绑定:Vue.js使用双向数据绑定,即视图会自动更新以匹配数据的变化,反之亦然。 组件化:通过组件化的方法可以构建可重用的视图组件。 轻量级:

    2024年01月20日
    浏览(48)
  • 前端vue常见60道面试题 重点简洁!!!【未完,文章持续更新中......】

    model 代表数据模型,数据和业务逻辑都在 model 层中定义 view 代表视图,负责数据展示 view model 代表与界面对应的 model MVVM 是 MVC 的变种进阶,在概念上真正将页面与数据逻辑分离的模式,把数据绑定放到一个 js 中去实现,这个 js 文件主要功能是完成数据的双向绑定,把 mod

    2024年02月06日
    浏览(60)
  • 2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新

    HTML篇 CSS篇 JS篇 Vue篇 TpeScript篇 React篇 微信小程序篇 前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新 1. 谈谈你对MVVM开发模式的理解? MVVM是一种简化用户界面的 实践驱动编程方式 。在当前主流的前后端分离的开发模式中,MVVM模式的优越性日益体现,相较

    2024年02月10日
    浏览(58)
  • 从javascript到vue再到react:前端开发框架的演变

    目录 JavaScript: 动态语言的基础 JavaScript:Web开发的起点 Vue.js: 渐进式框架的兴起 Vue.js:简洁、高效的前端框架 React.js: 声明式UI的革新 React.js:强大、灵活的前端框架 演变之路与未来展望 演变过程 当提到前端开发中的框架时,JavaScript、Vue.js和React.js是三个最常见的名词。它

    2024年02月07日
    浏览(53)
  • 前端开发 5: Vue.js 框架

    在前端开发中,Vue.js 是一个流行且灵活的 JavaScript 框架,用于构建用户界面。它采用了组件化的开发方式,使得前端开发更加模块化和可维护。在本篇博客中,我将为你介绍 Vue.js 的基础知识和常用技巧,帮助你更好地掌握前端开发中的框架部分。 Vue.js 是一个轻量级的 Jav

    2024年01月19日
    浏览(45)
  • Vue.js 现代前端开发的利器

    作者:阿发家的阿花 在当今的前端开发领域,Vue.js已经成为最受欢迎的JavaScript框架之一。它的简洁性、灵活性和强大的功能使其成为许多开发者首选的工具。本文将介绍Vue.js的核心概念、主要特点以及为什么它在现代前端开发中如此重要。我们还将探讨Vue.js在构建交互式和

    2024年02月10日
    浏览(51)
  • 《Vue.js前端开发实战》课后习题答案

    本答案仅供参考,禁止用于抄袭等不法用途 一、 填空题 用户界面 ViewModel refs vue-devtools 组件 二、 判断题 对 对 对 对 对 三、 选择题 D C D A A 四、 简答题 请简述什么是Vue。 Vue(读音/Vjuː/,类似于View)是一套用于构建用户界面的渐进式框架,与其他大型框架相比,Vue被设计

    2024年02月03日
    浏览(61)
  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(63)
  • 前端面试:常见的HTML、CSS和JavaScript问题解答

    前端开发面试中,HTML、CSS和JavaScript是必考点。以下是常见的HTML、CSS和JavaScript问题的解答,希望能对前端开发者的面试有所帮助。 文档类型(doctype)的作用是什么? 文档类型用来告诉浏览器当前页面使用哪种HTML标准进行渲染。不同的HTML标准支持的标签和属性有所差异,因

    2024年02月08日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包