当前位置:首页 > 科技  > 软件

金三银四!分享度小满的前端面经,考Vue考的比较多

来源: 责编: 时间:2024-04-19 09:27:40 99观看
导读金三银四马上就到了金三银四的重要时刻了!!今天给大家分享一个度小满的面经。考Vue考的多一些~~~面经1.怎么理解Vue单向数据流?父组件传输局props给子组件时,子组件只能使用而不能修改,这是为了组件之间能更高地去解耦。比

金三银四

马上就到了金三银四的重要时刻了!!今天给大家分享一个度小满的面经。考Vue考的多一些~~~rp228资讯网——每日最新资讯28at.com

rp228资讯网——每日最新资讯28at.com

面经

1.怎么理解Vue单向数据流?

父组件传输局props给子组件时,子组件只能使用而不能修改,这是为了组件之间能更高地去解耦。比如有一个父组件,传props给10个子组件,如果某一个子组件修改了,那么会影响其他9个子组件跟着刷新,所以不推荐子组件修改props。rp228资讯网——每日最新资讯28at.com

2.Vue 组件之间的通信方式都有哪些,用过 eventbus 么,eventbus 的思想是什么

  • 父组件传值给子组件数据props
  • 子组件传值给父组件,通过$emit事件对父组件进行传值
  • 父组件和子组件通过$parent和$children进行获取实例数据
  • 二次封装时经常使用$attrs和$listener进行传值
  • 使用$refs获取组件实例,进而获取数据
  • 使用Vuex进行状态管理
  • 使用eventBus进行跨组件传值,进而传递数据(发布订阅模式)
  • 使用provide和inject,官方不建议
  • 浏览器本地缓存,例如localStorage
  • 路由传值

3.写个自定义 v-model?

v-model实际是:value + @input的语法糖rp228资讯网——每日最新资讯28at.com

<input v-model="inputValue" /><input :value="inputValue" @input="inputValue = $event.target.value" />

4.$attrs 和 $listener 有了解吗?

常用于对组件进行二次封装时,比如A -> B -> C,B可以直接将爷爷组件的所有数据或者事件直接传给孙子。rp228资讯网——每日最新资讯28at.com

5.Vue 生命周期有哪些,都是做什么的,updated 什么情况下会触发,beforeCreate 的时候能拿到 Vue 实例么,组件销毁的时候调用的是哪个 API

生命周期:rp228资讯网——每日最新资讯28at.com

  • beforeVCreated:实例了Vue但是还没有进行数据初始化与响应式处理
  • created:数据已经被初始化和响应式处理,这里可以访问和修改数据
  • beforeMount:render函数在这里调用,生成虚拟DOM,但是还没转真实DOM并替代到el
  • mounted:真实DOM挂载完毕
  • beforeUpdated:数据更新后,新的虚拟DOM生成,但还没更旧虚拟DOM对比打补丁
  • update:新旧虚拟DOM对比打补丁后,进行真实DOM的更新
  • activated:被keep-alive缓存的组件被激活时调用
  • deactivated:被keep-alive缓存的组件停用时调用
  • beforeDestroy:实例销毁之前调用,在这一步,依然可以访问数据
  • destroyed:实例销毁后调用。Vue实例的所有指令都被解绑,实例的监听器被移除,所有子实例也都被销毁
  • errorCaptured:捕获子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回false以阻止该错误继续向上传播。

6.什么情况下会触发组件销毁,销毁的时候会卸载自定义事件和原生事件么?

组件销毁时会自动卸载组件本身绑定的事件,但是仅限于组件本身。例如一些定时器、全局对象的事件绑定、eventBus则不会自动解绑,需要手动解绑。rp228资讯网——每日最新资讯28at.com

7.自定义指令写过么,自定义指令都有哪些钩子?

Vue2:rp228资讯网——每日最新资讯28at.com

  • bind:指令绑定到指定元素时触发,只触发一次
  • inserted:指定元素插入到DOM时触发,只触发一次
  • update:VNode更新时触发,会触发多次
  • unbind:指令解绑时触发,只触发一次

Vue3:rp228资讯网——每日最新资讯28at.com

  • created:指定元素的attribute或事件监听器被应用之前被调用
  • beforeMount:指令绑定到指定元素上触发
  • mounted:指定元素被挂载时触发
  • beforeUpdate:在更新包含组件的VNode之前触发
  • updated:在包含组件的VNode及其VNode更新后调用
  • beforeUnMount:在卸载指定元素的父组件之前触发
  • unmounted:指令解绑时触发

8.传统前端开发和框架开发的区别是什么?

传统的前端开发就像是盖房子时需要自己从零开始,用了框架开发就相当于有人事先给你搭好架子,你只需要添砖加瓦就行了。框架有他自己的一套开发模式和开发流程,只要跟着他的流程走,并利用好其开发模式,做起事来会事半功倍,这也是为什么现在的前端越来越趋于框架开发的原因,毕竟时间就是金钱,节省时间很重要。rp228资讯网——每日最新资讯28at.com

9.Vue2 的数据响应式有两个缺陷,你知道是哪两个缺陷么,为什么会有这样的缺陷,如何解决?

  • 对象新增属性或修改新增的属性时,无法触发视图更新,需要使用 Vue.set,对象删除属性时需要使用Vue.delete才能触发更新
  • 数组直接通过下标修改元素无法触发视图更新,需要使用数组的方法splice、push等等

10.Vue 如何实现的数组的监听,为什么 Vue 没有对数组下标修改做劫持?

Vue2是通过重写了数组原型上的方法来达到对数组的修改的监听,Vue2没有对数组下标做劫持,是出于心梗的考虑,因为通常数组元素都是非常多的,可能成百上千,如果每个元素都进行劫持,则非常耗费性能。rp228资讯网——每日最新资讯28at.com

11.Symbol 有了解吗,迭代器有了解吗,哪些是可迭代的?

(1) Symbolrp228资讯网——每日最新资讯28at.com

是ES6的特性,具体使用场景有:rp228资讯网——每日最新资讯28at.com

  • 充当对象的属性名,实现私有属性
  • 充当变量,实现单独变量
  • 用来定义类里的私有属性

(2) 迭代rp228资讯网——每日最新资讯28at.com

迭代器:Iterator,可迭代对象有Array、Set、Map,想将不可迭代对象变成可迭代对象,可以设置Symbol.iterator属性rp228资讯网——每日最新资讯28at.com

const t = {  name: '林三心',  age: 12}t[Symbol.iterator] = function () {  let index = 0,    self = this,    keys = Object.keys(this)  return {    next() {      if (index < keys.length) {        return {          value: self[keys[index++]],          done: false        }      } else {        return {          value: undefined,          done: true        }      }    }  }}for (let value of t) {  console.log(value)}

(3) 迭代器和迭代对象rp228资讯网——每日最新资讯28at.com

12.用Set获取两个数组的交集,如何做?

合集:rp228资讯网——每日最新资讯28at.com

const heji = (arr1, arr2) => {  return [...new Set(arr1.concat(arr2))]}

交集:rp228资讯网——每日最新资讯28at.com

const jiaoji = (arr1, arr2) => {  const temp = new Set(arr1)  return Array.from(new Set(arr2)).filter(item => {    return temp.has(item)  })}

差集:rp228资讯网——每日最新资讯28at.com

const chaji = (arr1, arr2) => {  const temp1 = new Set(arr1)  const temp2 = new Set(arr2)  const res = []  for (let item of temp1) {    !temp2.has(item) && res.push(item)  }  return res}

13.实现 Promise.all?

Promise.sx_all = (promises) => {    return new Promise((resolve, reject) => {        const result = []        let count = 0        for (let i = 0; i < promises.length; i++) {            const promise = Promise.resolve(promises[i])            promise.then(res => {                result[i] = res                count++                if (count === promises.length) {                    resolve(result)                }            }).catch(err => {                reject(err)            })        }    })}

14.animation 和 transition 的区别?

  • animation需配合@keyframe,而transition不需要
  • animation可以出发多次,transition只能触发一次
  • animation可以设置多个帧,而transition只有两帧
  • 前者可能会引起多次重回回流,后者会比较少

15.写个动画,一个盒子,开始时缩放是 0,50%时是 1,100%时是 0,开始结束都是慢速,持续 2 秒,延迟 2 秒,结束后固定在结束的效果

.box {    width: 100px;    height: 100px;    background-color: pink;    animation: scale 2s 9999999 alternate;  }  @keyframes scale {    from { transform: scale(0); }    to { transform: scale(1); }  }}

rp228资讯网——每日最新资讯28at.com

本文链接://www.dmpip.com//www.dmpip.com/showinfo-26-84013-0.html金三银四!分享度小满的前端面经,考Vue考的比较多

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: 探索未来计算趋势:qutip模块助力量子计算技术发展!

下一篇: 前端实现无缝刷新 Token

标签:
  • 热门焦点
  • K60 Pro官方停产 第三方瞬间涨价

    K60 Pro官方停产 第三方瞬间涨价

    虽然没有官方宣布,但Redmi的一些高管也已经透露了,Redmi K60 Pro已经停产且不会补货,这一切都是为了即将到来的K60 Ultra铺路,属于厂家的正常操作。但有意思的是该机在停产之后
  • MIX Fold3包装盒泄露 新机本月登场

    MIX Fold3包装盒泄露 新机本月登场

    小米的全新折叠屏旗舰MIX Fold3将于本月发布,近日该机的真机包装盒在网上泄露。从图上来看,新的MIX Fold3包装盒在外观设计方面延续了之前的方案,变化不大,这也是目前小米旗舰
  • 把LangChain跑起来的三个方法

    把LangChain跑起来的三个方法

    使用LangChain开发LLM应用时,需要机器进行GLM部署,好多同学第一步就被劝退了,那么如何绕过这个步骤先学习LLM模型的应用,对Langchain进行快速上手?本片讲解3个把LangChain跑起来
  • 只需五步,使用start.spring.io快速入门Spring编程

    只需五步,使用start.spring.io快速入门Spring编程

    步骤1打开https://start.spring.io/,按照屏幕截图中的内容创建项目,添加 Spring Web 依赖项,并单击“生成”按钮下载 .zip 文件,为下一步做准备。请在进入步骤2之前进行解压。图
  • WebRTC.Net库开发进阶,教你实现屏幕共享和多路复用!

    WebRTC.Net库开发进阶,教你实现屏幕共享和多路复用!

    WebRTC.Net库:让你的应用更亲民友好,实现视频通话无痛接入! 除了基本用法外,还有一些进阶用法可以更好地利用该库。自定义 STUN/TURN 服务器配置WebRTC.Net 默认使用 Google 的
  • 电视息屏休眠仍有网络上传 爱奇艺被质疑“薅消费者羊毛”

    电视息屏休眠仍有网络上传 爱奇艺被质疑“薅消费者羊毛”

    记者丨宁晓敏 见习生丨汗青出品丨鳌头财经(theSankei) 前不久,爱奇艺发布了一份亮眼的一季报,不仅营收和会员营收创造历史最佳表现,其运营利润也连续6个月实现增长。自去年年初
  • iQOO 11S新品发布会

    iQOO 11S新品发布会

    iQOO将在7月4日19:00举行新品发布会,推出杭州亚运会电竞赛事官方用机iQOO 11S。
  • DRAM存储器10月价格下跌,NAND闪存本月价格与上月持平

    DRAM存储器10月价格下跌,NAND闪存本月价格与上月持平

    10月30日,据韩国媒体消息,自今年年初以来一直在上涨的 DRAM 存储器的交易价格仅在本月就下跌了近 10%,此次是全年首次降价,而NAND 闪存本月价格与上月持平。市
  • 上海举办人工智能大会活动,建设人工智能新高地

    上海举办人工智能大会活动,建设人工智能新高地

    人工智能大会在上海浦江两岸隆重拉开帷幕,人工智能新技术、新产品、新应用、新理念集中亮相。8月30日晚,作为大会的特色活动之一的上海人工智能发展盛典人工
Top
Baidu
map