答对这些问题,检测你是否真正掌握了Vue

请说一下响应式数据的原理

默认 Vue 在初始化数据时,会给 data 中的属性使用 Object.defineProperty 重新定义所有属性,当页面到对应属性时,会进行依赖收集(收集当前组件中的 watcher)如果属性发生变化会通知相关依赖进行更新操作

收集当前组件中的 watcher,我会进一步问你什么叫当前组件的 watcher?我面试时经常听到这种模糊的说法,感觉就是看了些造玩具的文章就说熟悉响应式原理了,起码的流程要清晰一些:

  1. 由于 Vue 执行一个组件的 render 函数是由 Watcher 去代理执行的,Watcher 在执行前会把 Watcher 自身先赋值给 Dep.target 这个全局变量,等待响应式属性去收集它

  2. 这样在哪个组件执行 render 函数时访问了响应式属性,响应式属性就会精确的收集到当前全局存在的 Dep.target 作为自身的依赖

  3. 在响应式属性发生更新时通知 Watcher 去重新调用 vm._update(vm._render()) 进行组件的视图更新

关于这个问题,有一个比较有意思的经历是,有一位同学前面部分都答得很好,但是我问他 watcher 是利用了什么数据结构去存储的时候,他就不太能答得出来了。所以是否真的阅读过源码,可以通过类似只要你看过,就一定印象深刻的细节来试探。

响应式部分,如果你想在简历上写熟悉的话,还是要抽时间好好的去看一下源码中真正的实现,而不是看这种模棱两可的说法就觉得自己熟练掌握了。

说一下Vue双向数据绑定原理,你是怎么理解的。

  • 需要实现的vue双向数据绑定,需要使用到一下三种技术

  • 通过get()劫持取值操作

  • 通过set()劫持赋值操作

  • Dep类:负责进行依赖收集

  • Watcher类:负责订阅一些事件

  • 进行数值的累加计算

  • 链式获取对象的属性值

  1. 数组的reduce()方法

  2. 发布-订阅者模式

  3. 使用Object.defineProperty()进行数据劫持

vue初始化过程中都做了什么。

  • 处理组件配置项

  • 初始化根组件时进行了选项合并操作,将全局配置合并到根组件的局部配置上

  • 初始化每个子组件时做了一些性能优化,将组件配置对象上的一些深层次属性放到 vm.$options 选项中,以提高代码的执行效率

  • 初始化组件实例的关系属性,比如 、children、、refs 等

  • 处理自定义事件

  • 调用 beforeCreate 钩子函数

  • 初始化组件的 inject 配置项,得到 ret[key] = val 形式的配置对象,然后对该配置对象进行浅层的响应式处理(只处理了对象第一层数据),并代理每个 key 到 vm 实例上

  • 数据响应式,处理 props、methods、data、computed、watch 等选项

  • 解析组件配置项上的 provide 对象,将其挂载到 vm._provided 属性上

  • 调用 created 钩子函数

  • 如果发现配置项上有 el 选项,则自动调用 mount方法,也就是说有了el选项,就不需要再手动调用mount 方法,反之,没提供 el 选项则必须调用 $mount

  • 接下来则进入挂载阶段

为什么vue采用异步渲染。

vue是组件级更新,当前组件里的数据变了,它就会去更新这个组件。当数据更改一次组件就要重新渲染一次,性能不高,为了防止数据一更新就更新组件,所以做了个异步更新渲染。(核心的方法就是nextTick)

原理:当数据变化后会调用notify方法,将watcher遍历,调用update方法通知watcher进行更新,这时候watcher并不会立即去执行,在update中会调用queueWatcher方法将watcher放到了一个队列里,在queueWatcher会根据watcher的进行去重,多个属性依赖一个watcher,如果队列中没有该watcher就会将该watcher添加到队列中,然后通过nextTick异步执行flushSchedulerQueue方法刷新watcher队列。flushSchedulerQueue中开始会触发一个before的方法,其实就是beforeUpdate,然后watcher.run() 才开始真正执行watcher,执行完页面就渲染完成啦,更新完成后会调用updated钩子

vue中常用的一些指令,说一下vue自定义指令。

1-常用指令 v-once 让界面不要跟着数据变化, 只渲染一次

2-常用指令v-cloak

3-常用指令v-text 和 v-html

4-常用指令v-if 条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素

5-常用指令v-show v-show和v-if的能够一样都是条件渲染, 取值为true就显示, 取值为false就不显示

6-常用指令v-for 相当于JS中的for in循环, 可以根据数据多次渲染元素

7-常用指令v-bind 在企业开发中想要给"元素"绑定数据, 我们可以使用{{}}, v-text, v-html

但是如果想给"元素的属性"绑定数据, 就必须使用v-bind

所以v-bind的作用是专门用于给"元素的属性"绑定数据的

8-常用指令-v-bind 绑定类名

9-常用指令-v-on v-on指令专门用于给元素绑定监听事件

下面分享几个实用的 Vue 自定义指令

  • 复制粘贴指令 v-copy

  • 长按指令 v-longpress

  • 输入框防抖指令 v-debounce

  • 禁止表情及特殊字符 v-emoji

  • 图片懒加载 v-LazyLoad

  • 权限校验指令 v-premission

  • 实现页面水印 v-waterMarker

  • 拖拽指令 v-draggable

说一说你对vue生命周期的理解。

1、什么是vue生命周期?答:Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。2、vue生命周期的作用是什么?

答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。3、vue生命周期总共有几个阶段?

答:它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后。4、第一次页面加载会触发哪几个钩子?

答:会触发 下面这几个beforeCreate, created, beforeMount, mounted 。5、DOM 渲染在 哪个周期中就已经完成?

答:DOM 渲染在 mounted 中就已经完成了。

以上小试牛刀,前端的路还有很长很长需要走啊~


2022版前端最新最全学习路线图

web 入门
Html5+css:前端开发入门教程,web前端零基础html5 +css3+前端项目视频教程
web 进阶:web前端进阶教程,前端html5+css3+移动端项目实战(含华为新闻,b站移动端等)

技术进阶
JavaScript:JavaScript全套教程,Web前端必学的JS入门教程,零基础JavaScript入门
DOM BOM:JavaScript核心教程,前端基础教程,JS的DOM BOM操作教程
jQuery:前端基础教程|jQuery网页开发案例精讲
Ajax:AJAX零基础到精通_整合Git核心内容全套教程

Vue 开发
Node.js: Node.js全套入门教程,nodejs新教程含es6模块化+npm+express+webpack+promise等_Nodejs实战案例详解
Vue2+Vue3全套:黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端学习核心框架教程

React &小程序开发
React:前端React视频教程,react零基础入门原理详解到好客租房项目实战
零基础玩转微信小程序:黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)

如何考察候选人 Vue 技术水平?相关推荐

  1. 互联网公司面试官是如何360°无死角考察候选人的?(下篇)

    点击上方"蓝字", 右上角选择"设为星标" 周一至五早11点半!精品文章准时送上! 本文转载自公众号:石杉的架构笔记 一.写在前面 上一篇文章:<互联网公 ...

  2. 作为一面面试官,如何考察候选人

    写在前面 从去年开始,作为一面面试官,陆续面试了30+候选人,在这里分享一下感悟. 面试流程与考察方面 面试流程 以我经历的面试为例,基本的流程如下: 候选人自我介绍:基本情况与项目 针对项目提问 编 ...

  3. 在北京做Java开发如何月薪达到两万,需要技术水平达到什么程度? 1

    觉得没有目标的时候看一看大家讨论到的技术点,就知道欠缺在哪了.共勉吧! 转载自:https://www.zhihu.com/question/39890405 在北京做Java开发如何月薪达到两万,需 ...

  4. 阿里三面,P9面试官是如何360°无死角考察候选人的?

    点击上方"蓝字", 右上角选择"设为星标" 周一至周五早11点半!精品文章准时送上! 本文转载自公众号:石杉的架构笔记 目录 1.业务背景介绍 2.架构演进考察 ...

  5. Web前端开发如何提高技术水平!

    作为一个Web的前端工程师,怎样开始学习呢?在学习了HTML和css之后,我们应该做些什么呢?Web前端开发入门后,又该如何提高自己的前端开发技术?如为自学,根据个人学习消化能力确定每日学习数量,以下 ...

  6. 到了2020年,技术水平到底需要达到怎样的程度才能成为顶级的阿里P8架构师

    最近部门招聘,很多工程师,包括我在内都参与了内推和面试的过程,经过这次招聘,我发现能够最终拿到offer的人,基本上在看到简历的那-瞬间就E经定下来了,后续的面试只不过是一-种验证而已(注意,是验证, ...

  7. Web前端开发工资差距是如何产生的?根源是技术水平

    同样是从事Web前端开发,我们会发现大家在薪资之前是有差距的,那么这些差距是如何产生的呢?根源就是技术水平的不同.那么,对于零基础学习Web前端开发的学员,要掌握哪些技能才能在毕业后顺利就业呢?想要学 ...

  8. 计算机程序设计工程师技术水平证书 java 考试试卷_关于程序设计工程师技术水平证书(JAVA).doc...

    程序设计工程师技术水平证书(JAVA) 考试大纲 考试性质和目的: 本考试的目的在于促使考生掌握JAVA语言与面向对象程序设计的概念.方法与基本技术.并注重提高考生运用Java语言和面向对象技术解决问 ...

  9. 三线城市程序员的薪资待遇怎么样?我分享提高java技术水平的几个方法

    今天想和大家聊聊在三线城市,程序员的薪资待遇水平到底是怎样的.随着科技行业的迅速发展,IT行业成为了当今越来越受欢迎的行业之一.在过去的几年里,IT行业中需求最大的工作是与开发相关的工作,比如java ...

最新文章

  1. 稳定性三十六计-幂等设计
  2. sublime Text3快捷键使用大全
  3. 空气培养皿采样后保存_环境监测基础知识——环境空气监测技术之布点采样
  4. C#中的构造方法与对象初始化器
  5. security NO.2
  6. 入职三天,公司给了100块钱叫我走人
  7. boost::hana::test::TestSearchable用法的测试程序
  8. centeros7安装mysql - 风中追风_lonely - 博客园
  9. 在视图中显示InActive记录
  10. 【spark】spark学习-27-Spark性能调优(2)
  11. TreeMap1.8源码
  12. Windows平台安装cocos2d-x V3.17.2
  13. 模拟电路实现延时功能
  14. 计算机信息的应用安全中心在哪,怎么通过windows安全中心扫描出当前具有威胁的应用...
  15. 嵌入式Linux使用TFT屏幕:使用TinyDRM点亮ST7789V屏幕
  16. 计算机类耗品有哪些,办公用品和办公耗材清单有哪些?
  17. 基于java的OA系统设计与实现
  18. 电气火灾监控系统在太焦铁路博爱站房项目的应用
  19. 男女的情事为什么叫走“桃花运”
  20. 成人注意缺陷多动障碍在内外源冲突时的表现

热门文章

  1. python人工智能招聘-SiKi学院Python人工智能讲师招聘
  2. 学习lucene.net的好网站(不断添加)
  3. 专治各种3D建模疑难杂症|学习之路畅通无阻
  4. linux创建fcoe接口,英特尔:Open-FCoE 将被加入 Linux核心
  5. Volley简介(三)
  6. 医院患者监护系统的定义与可行性分析
  7. 阿里小号平台淘宝钻号=www.alibaizhan.com
  8. 杂谈 流行语------文言文
  9. 如何用进度猫思维导图做项目管理?
  10. Windows 10 TH2首次重大更新1511正式发布