金三银四跳槽季,前端面试题记录(2021),VUE
Q、 简述一下对vue的mvvm模型的理解
mvvm:model-view-viewmodel,而vue实现了一套响应式系统实现了viewmodel层监听model(data)数据,通知view层patch dom。
响应式系统:说响应式系统是因为vue的实现很像观察者/发布订阅模式,但不完全是,这点尤其在vue3.0+的源码上提现更明显
Q、 双向绑定的实现
vue2.x: 通过Object.defineProperty实现对数据的监听;
vue3.x: 通过ES6的扩展对象Proxy实现对数据的监听,原生支持,并且对数组有天然的支持,不用像vue2.x那样要重写数组原生方法来触发数据更新,速度更快,但对浏览器兼容有要求,不支持ie11浏览器;
具体流程: 在Observer对数据的劫持,添加getter setter,在setter添加上notify,数据改变,通知到Dep订阅器,并给到Watcher订阅者重新计算,然后Compile解析器更新视图;
Q、 简述一下vue生命周期
生命周期名称 | 触发条件 |
---|---|
beforeCreate | 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 |
created | 在实例创建完成后被立即调用。但此时虚拟 DOM 还没生成,property不可用。 |
beforeMount | 虚拟 DOM 生成并且渲染前被调用。 |
mounted | 虚拟 DOM 生成并且渲染完毕后被调用 |
beforeUpdate | 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。 |
updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 |
activated | 被 keep-alive 缓存的组件激活时调用。 |
deactivated | 被 keep-alive 缓存的组件停用时调用。 |
beforeDestroy | 实例销毁之前调用。在这一步,实例仍然完全可用。 |
destroyed | 实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。 |
errorCaptured | 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。 |
vue3.x: 舍弃了beforeCreate和created这两个生命周期,使用setup方法去代替
Q、组件间通讯方法有哪些
- props、v-model向下传递
- emit广播事件 on监听事件
- provide提供和inject接收注入,用于跨层级组件.
- eventBus总线事件处理
- Vuex全局状态管理
Q、用过自定义指令吗?怎么实现一个指令
使用directive API去注册指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus()}
})
Q、 实现一个全局toast方法
// ./ToastComponent.vue里面的代码就是普通的组件代码
import ToastComponent from "./ToastComponent.vue";const globalToast = {install: function (Vue, conf_options = {}) {if (!conf_options) {conf_options = {}}const ToastConstructor = Vue.extend(ToastComponent);let loadedToasts = [];// 生成并在body子级挂载function toast(msg, options = {}) {//接受全局和局部optionslet propsData = Object.assign(conf_options, options, { msg: msg });// 创建组件实例const instance = new ToastConstructor({ propsData });// 挂载到body下面if (!instance.$el) {let vm = instance.$mount();document.body.appendChild(vm.$el);}loadedToasts.push(instance);return instance;}// 显示与隐藏function showLoading(msg) {loadedToasts.push(toast(msg, { type: "loading" }));}function hideLoading() {loadedToasts.forEach(ins => {ins.closeToast();})}// 全局注册方法Vue.prototype.$toast = toast;Vue.prototype.$showLoading = showLoading;Vue.prototype.$hideLoading = hideLoading;}
}// 全局注册
Vue.use(globalToast);
Q、 Virtual DOM(虚拟dom)为什么比普通dom渲染快
真实dom的每一次操作方法调用,都会触发浏览器的生成的一系列操作(回流、重绘),特别是多个数据多个dom更新多次操作dom是很费性能
而相比dom操作,js的计算性能消耗是极其小的,通过对patch(diff算法)的优化,更新数据变化部分,它保证了不管你的数据变化多少,每次重绘的性能都可以接受。保证了性能的下限。并保证不同平台的迁移成本,可以在其他平台使用,小程序、app、桌面端。
下面vue作者尤大的话:
Q、 diff算法
掘金 - 请阐述vue的diff算法
知乎 - vue3.0 diff算法详解(超详细)
Q、 vue.nextTick实现
nextTick本质上是一个微任务函数,在下次DOM更新循环结束之后执行的延迟回调,如果所有微任务的方法都不支持才会采用setTimeout回调。
Vue在更新dom时是异步执行的。只要监听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发,只会被推入到队列中一次。nextTick方法会在队列中加入一个回调函数,确保该函数在前面的dom操作完成后才调用。
Q、watch与computed的区别
computed是一个属性,vue实例初始化属性的时候会运行computed属性的方法,收集方法内的属性进行监听,当监听的属性发生变化时,通知这个计算属性更新。
watch相当于添加一个观察者,但监听的属性变化时,触发watch定义的方法;
金三银四跳槽季,前端面试题记录(2021),VUE相关推荐
- 【金三银四跳槽季】Java工程师如何在1个月内做好面试准备?
点击上方"蓝字", 右上角选择"设为星标" 周一至周五早11点半!精品文章准时送上! 本文来自石杉的架构笔记 目录 一.写在前面 二.技术广度的快速准备 三.技 ...
- 【金三银四跳槽季】Java工程师的面试之路,需要“解锁”哪些技术盲点?
春节长假转眼已过,即将迎来的是一年一度的金三银四跳槽季. 相信大家在应聘一些中大型互联网公司的Java工程师岗位时遇到了不少困惑. 举个例子:有朋友说他在面试前其实也做了精心准备,网上搜集了不少Jav ...
- routing zuul_金三银四跳槽季快到了:送上Spring cloud全家桶系列之Zuul
一.前言 金三银四跳槽季快到了:送上Spring cloud全家桶系列之Eureka 金三银四跳槽季快到了:送上Spring cloud全家桶系列之Feign 金三银四跳槽季快到了:送上Spring ...
- 金三银四跳槽季,这份宝典让你一路开挂
哈喽,小伙伴们好,金三银四跳槽季将至,估计小伙伴们都在备战,来问问题的也多了起来,尤其是问OOM与JVM调优相关的问题.只能感叹,大家都太不容易了.明明只是小白.明明只想找份工作.明明没有机会接触到O ...
- 金三银四跳槽季求职指南
又到了一年一度的金三银四跳槽季了.大家伙儿肯定都有一定的想法. "出去试试水,看看自己市场价值" "这家早干烦了,赶紧换,不想当工具人了" "老板有毛 ...
- 【金三银四】Java集合面试题(2021最新版)
目录 前言 一.集合容器概述 1. 什么是集合 2. 集合的特点 3. 集合和数组的区别 4. 使用集合框架的好处 5. 常用的集合类有哪些? 6. List,Set,Map三者的区别? 7. 集合框 ...
- 【金三银四】Spring Boot面试题(2021最新版)
目录 前言 1. 什么是SpringBoot? 2. 为什么要用SpringBoot 3. SpringBoot与SpringCloud 区别 4. Spring Boot 有哪些优点? 5. Spr ...
- 【金三银四】Java中间件面试题(2021最新版)
目录 前言 Zookeeper 1. ZooKeeper 是什么? 2. ZooKeeper 提供了什么? 3.Zookeeper 文件系统 4. ZAB 协议? 5. 四种类型的数据节点 Znode ...
- 过五关斩六将,一举拿下首张“金三银四”跳槽季的面试offer!熬夜成熊猫眼“筛选”出的面试真题
人往高处走水往低处流,十二月已来,"金三银四"招聘季还会远吗? 转眼2021年招聘季就要来了,没点真本事真技术,没点面试经验,不了解点职场套路,如何过五关斩六将?如何打败面试官?如 ...
- 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)
好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...
最新文章
- 罗兰贝格84页白皮书:一文看懂中国ICT产业新黄金十年
- 莎拉波顿,莎曼莎考克斯——英伦设计VS美国设计
- 软考计算机网络原理之IP计算问题汇总
- ugui源码_UGUI 源码笔记(一)文件结构和部分组件使用
- 一道CTF----BUUCTF---练习场---Havefun
- 15 CO配置-控制-内部订单-维护分配结构
- 博通:NFC将成手机标配nbsp;新芯…
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_03-vuejs研究-vuejs基础-入门程序...
- Spring MVC-学习笔记(4)数据绑定流程
- 苹果怎么锁定计算机,苹果电脑如何锁定屏幕-mac锁定屏幕教程 - 河东软件园
- 50 条有趣的 Python 一行代码,建议收藏夹吃灰
- xcode升级iOS 16问题与解决方案汇总
- 那些年,我们常见的那些人
- AndroidQ(八)Android Q隐私:更改相机和连接
- RAW怎么转为JPG?这些转换技巧值得收藏
- 【教链一周谈】覆巢之下,安有完卵
- hashCode()方法是什么,hashCode相同代表什么
- 不怕有错误,就怕没错误(1)
- 2019 快手校招编程题两道解答
- 3、kubeadm部署Kubernetes 网络插件flannel、Calico、weave 并设置集群角色
热门文章
- 揭秘手机变手雷的四大病毒
- STM32CubeMX系列|DS18B20温度传感器
- JavaScript的事件委托(事件代理)原理
- 机器学习课程讲义·第二章,线性模型系列
- 图片后缀和ContentType大全
- 计算机软件实习每日学习打卡(2)20201203
- android 自定义indicator,Android实现自定义Indicator的导航控件
- npm run dev之后 可爱(e’xin)的warning,error们
- 工具应用——Chrome浏览器 F12控制台中文改成英文
- 读书笔记《深度学习与图像识别原理与实践 大白话讲解对小白易懂》2022-8-5