- 博客(91)
- 收藏
- 关注
RSS订阅原创 校招前端vue面试题（边面边更）
Vue模版编译原理知道吗，能简单说一下吗？简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：生成AST树优化codegen首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树
2023-03-15 11:18:02
441
原创 校招前端vue面试题集锦
指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
2023-03-15 11:17:47
493
原创 vue源码分析-挂载流程和模板编译
前面几节我们从new Vue创建实例开始，介绍了创建实例时执行初始化流程中的重要两步，配置选项的资源合并,以及响应式系统的核心思想，数据代理。在合并章节，我们对Vue丰富的选项合并策略有了基本的认知，在数据代理章节我们又对代理拦截的意义和使用场景有了深入的认识。按照Vue源码的设计思路，初始化过程还会进行很多操作，例如组件之间创建关联，初始化事件中心，初始化数据并建立响应式系统等，并最终将模板和数据渲染成为dom节点。如果直接按流程的先后顺序分析每个步骤的实现细节，会有很多概念很难理解。
2023-03-15 11:16:28
357
1
原创 前端二面vue面试题总结
Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、 方法等，则可以将其编写为 mixin，并在组件中简单的引用它。然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。
2023-03-01 17:41:54
665
原创 vue源码分析-基础的数据代理检测
简单回顾一下这个系列的前两节，前两节花了大量的篇幅介绍了Vue的选项合并，选项合并是Vue实例初始化的开始，Vue为开发者提供了丰富的选项配置，而每个选项都严格规定了合并的策略。然而这只是初始化中的第一步，这一节我们将对另一个重点的概念深入的分析，他就是，我们知道Vue大量利用了代理的思想，而除了响应式系统外，还有哪些场景也需要进行数据代理呢？这是我们这节分析的重点。
2023-03-01 17:41:35
342
原创 百度前端二面vue面试题指南
JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。而在Vue中，更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。
2023-03-01 17:40:41
371
原创 vue源码分析-响应式系统工作原理
就是存放当前属性的地方，当我们数据发生变化的时候就不会被监听到，我们就要通过。操作，且observe函数深度遍历，所以把所有的属性都添加到了。已经有很深刻的理解了吧，那么我们还有一个话题，我们是如何进行。第一次实例化的时候，都会作为订阅者订阅其相应的。初始化做的一些操作，那么我们这一章来讲一个。是需要被观察的数据对象，在构造函数中，会给。上面了，也就是说，咱们对数据的读写就会触发。属性，如果存在，则表明该对象已经处于。,那么我们直接看源码，我们看到的。这些方法，可想而知，我们依赖了。
2023-03-01 17:40:30
263
原创 美团前端常见vue面试题（必备）
Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、 方法等，则可以将其编写为 mixin，并在组件中简单的引用它。然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。插槽创建组件虚拟节点时，会将组件儿子的虚拟节点保存起来。当初始化组件时，通过插槽属性将儿子进行分类渲染组件时会拿对应的slot属性的节点进行替换操作。（插槽的作用域为父组件）
2023-02-28 10:46:04
3184
原创 字节前端一面常见vue面试题（必备）
JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。而在Vue中，更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。回答范例Vue有一组默认指令，比如。
2023-02-28 10:45:40
417
原创 vue源码分析-响应式系统(三)
上一节，我们深入分析了以为数据创建响应式系统的过程，并对其中依赖收集和派发更新的过程进行了详细的分析。然而在使用和分析过程中依然存在或多或少的问题，这一节我们将针对这些问题展开分析，最后我们也会分析一下watch的响应式过程。这篇文章将作为响应式系统分析的完结篇。
2023-02-28 10:44:24
89
原创 前端vue面试题（持续更新中）
Vue是pull+push的方式侦测变化的,在一开始就知道那个组件发生了变化,因此在push的阶段并不需要手动控制diff,而组件内部采用的diff方式实际上是可以引入类似于shouldComponentUpdate相关生命周期的,但是通常合理大小的组件不会有过量的diff,手动优化的价值有限,因此目前Vue并没有考虑引入shouldComponentUpdate这种手动优化的生命周期.更精确的来说，对于数组而言，大部分操作都是拦截不到的，只是 Vue 内部通过重写函数的方式解决了这个问题。
2023-02-27 13:26:11
474
原创 vue源码分析-动态组件
Vue初始化阶段会在构造器的components属性添加三个组件对象,每个组件对象的写法和我们在自定义组件过程的写法一致，有render函数，有生命周期，也会定义各种数据。// keep-alive组件选项} } // transition 组件选项} } // transition-group 组件选项} ,methods: {// Vue构造器的选项配置，compoents选项合并 extend(Vue.options.components , builtInComponents);
2023-02-27 13:24:34
528
原创 2023前端vue面试题汇总
但是如果从别的组件跳转到 B 组件的时候，实际上是希望 B 组件重新渲染的，也就是不要从 Storage 中读取信息。除此之外，在Vue中，还可以是用keep-alive来缓存页面，当组件在keep-alive内被切换时组件的。对于最终的结果，两种方式是相同的。旧前与新后（头与尾比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧后之后）旧后与新前（尾与头比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧前之前）因为异步路由的存在，我们使用异步组件的次数比较少，因此还是有必要两者的不同。
2023-02-27 13:24:21
321
原创 vue源码分析-响应式系统(一)
从这一小节开始，正式进入Vue源码的核心，也是难点之一，响应式系统的构建。这一节将作为分析响应式构建过程源码的入门，主要分为两大块,第一块是针对响应式数据初始化过程的分析，另一块则是在保留源码设计理念的前提下，尝试手动构建一个基础的响应式系统。有了这两个基础内容的铺垫，下一篇进行源码具体细节的分析会更加得心应手。
2023-02-27 13:23:52
341
原创 京东前端二面必会vue面试题（持续更新中）
MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。但是 Vue 提供了。
2023-02-24 08:22:52
177
原创 vue源码分析-从new Vue开始
的时候就会执行这个方法,并且我们传过去的options可以通过vm.$options访问到，那么。在Vue的原型上挂了一个_init方法，也就是说，我们执行。那我们再去一探究竟，可想而知里面必定有一个Vue函数类。等,这几个方法分别传入了Vue来初始化一些功能。内部原理又是啥呢，而且我们看到他接收到两个部分。那么关于这三个函数是干嘛的？函数执行完前两步之后需要执行的几个函数分别为。,可以看出来这不就是实现了一个继承嘛。那么我们写的一些组件和特性全部放在。中可以发现初始化了一些功能，例如。
2023-02-24 08:22:12
163
原创 vue源码分析-diff算法核心原理
这一节，依然是，上几节内容介绍了是Vue在渲染机制上做的优化，而渲染的核心在于数据变化时，如何高效的更新节点，这就是diff算法。由于源码中关于diff算法部分流程复杂，直接剖析每个流程不易于理解，所以这一节我们换一个思路，参考源码来手动实现一个简易版的diff算法。之前讲到Vue在渲染机制的优化上，引入了的概念，利用描述一个真实的DOM,本质上是在JS和真实DOM之间架起了一层缓冲层。当我们通过大量的JS运算,并将最终结果反应到浏览器进行渲染时，可以将多个改动合并成一个批量的操作，从而减少dom。
2022-12-12 11:10:30
129
原创 vue源码分析-v-model的本质
双向数据绑定这个概念或者大家并不陌生，视图影响数据，数据同样影响视图，两者间有双向依赖的关系。在响应式系统构建的上，中，下篇我已经对数据影响视图的原理详细阐述清楚了。而如何完成视图影响数据这一关联？这就是本节讨论的重点：指令v-model。由于v-model和前面介绍的插槽，事件一致，都属于vue提供的指令，所以我们对v-model的分析方式和以往大同小异。分析会围绕模板的编译，render函数的生成，到最后真实节点的挂载顺序执行。最终我们依然会得到一个结论，。
2022-12-12 11:09:32
285
原创 Vue源码解读之InitState
前面我们讲到了_init函数的执行流程，简单回顾下：本章咱们主要讲解initState函数的处理过程，咱们先看下init的主函数看上面代码，先声明了一个_watchers的空数组；然后依次判断传递进来的options是否包含系列参数；依次执行initProps、initMethods、initData、initComputed、initWatch。initProps函数主要是处理传进来的props对象，但是这个props对象是在上一篇文章中讲到的normalizeProps函数处理后的对象，不是传递进来的
2022-12-07 12:39:30
357
原创 vue源码中的nextTick是怎样实现的
在执行 初始化 Vue 全局 API 中，这么定义 。可以看出是直接把 函数赋值给 ，就可以了，非常简单。可以看出是 内部也是调用 函数。 函数的作用可以理解为异步执行传入的函数，这里先介绍一下什么是异步执行，从 JS 运行机制说起。JS 的执行是单线程的，所谓的单线程就是事件任务要排队执行，前一个任务结束，才会执行后一个任务，这就是同步任务，为了避免前一个任务执行了很长时间还没结束，那下一个任务就不能执行的情况，引入了异步任务的概念。JS 运行机制简单来说可以按以下几个步骤。 函数异步执行传入
2022-12-07 12:38:45
414
原创 vue源码中的渲染过程是怎样的
当浏览器接收到一个文件时，引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度，它首先会将文件解析成一个树，与此同时，浏览器将识别并加载样式，并和树一起合并为一个渲染树。有了渲染树后，渲染引擎将计算所有元素的位置信息，最后通过绘制，在屏幕上打印最终的内容。引擎和渲染引擎虽然是两个独立的线程，但是JS引擎却可以触发渲染引擎工作，当我们通过脚本去修改元素位置或外观时，引擎会利用相关的方法去操作对象,此时渲染引擎变开始工作，渲染引擎会触发回流或者重绘。下面是回流重绘的两个概念：很显然回流比重绘更加耗费性能。通过了
2022-12-07 12:38:25
171
原创 如何正确学习vue3.0源码
对于问题 1，你需要把每个逻辑拆分到不同选项，例如，一段逻辑需要一些响应数据，一个计算属性，一些监听属性还有方法。你去了解这段逻辑时，需要不断上下移动阅读，虽然你知道一些属性是什么类型，但是你并不知道他具体的作用。我们很多人都同意按文件类型组织（布局放 HTML，样式 CSS，逻辑 JS）并不是正确的方式，因为强制把相关代码分割到三个文件，只是给人一种“关注点分离”的错觉。SFC 就是按功能组织代码的方法，但讽刺的是当首次引入 SFC 时，许多人也是拒绝的，认为它违反了关注点分离。： 不同意这个观点。
2022-11-18 11:54:06
80
原创 Vue3源码解读之patch
关于Vue3中数据发生变更，最终影响到页面发生变化的过程，我们本篇文章只对componentEffect以及以后的代码进行讲解，对于数据变更后，是如何执行到componentEffect函数，以及为何会执行componentEffect，后面的文章再进行讲解。大家可以看下下面isSameVNodeType的代码，大家在写代码的时候，为了能够提高页面性能，dom diff的速度，如果没有发生变更的元素，key一定要保持一样，不要。调用patch函数的过程，也就是根据VNode的type，走不同的支流的过程；
2022-11-18 11:53:15
202
原创 vue源码分析-渲染过程
继上一节内容，我们将Vue复杂的挂载流程通过图解流程，代码分析的方式简单梳理了一遍，最后也讲到了模板编译的大致流程。然而在挂载的核心处，我们并没有分析模板编译后渲染函数是如何转换为可视化DOM节点的。因此这一章节，我们将重新回到Vue实例挂载的最后一个环节：渲染DOM节点。在渲染真实DOM的过程中，Vue引进了虚拟DOM的概念，这是Vue架构设计中另一个重要的理念。虚拟DOM作为JS对象和真实DOM中间的一个缓冲层，对JS频繁操作DOM的引起的性能问题有很好的缓解作用。
2022-11-16 10:08:40
65
原创 vue源码分析-组件
我们知道，组件是Vue体系的核心，熟练使用组件是掌握Vue进行开发的基础。上一节中，我们深入了解了Vue组件注册到使用渲染的完整流程。这一节我们会在上一节的基础上介绍组件的两个高级用法：异步组件和函数式组件。
2022-11-16 10:07:12
76
原创 vue源码分析-响应式系统工作原理
就是存放当前属性的地方，当我们数据发生变化的时候就不会被监听到，我们就要通过。操作，且observe函数深度遍历，所以把所有的属性都添加到了。已经有很深刻的理解了吧，那么我们还有一个话题，我们是如何进行。第一次实例化的时候，都会作为订阅者订阅其相应的。初始化做的一些操作，那么我们这一章来讲一个。是需要被观察的数据对象，在构造函数中，会给。上面了，也就是说，咱们对数据的读写就会触发。属性，如果存在，则表明该对象已经处于。,那么我们直接看源码，我们看到的。这些方法，可想而知，我们依赖了。
2022-11-15 10:19:03
42
原创 vue源码分析-基础的数据代理检测
简单回顾一下这个系列的前两节，前两节花了大量的篇幅介绍了Vue的选项合并，选项合并是Vue实例初始化的开始，Vue为开发者提供了丰富的选项配置，而每个选项都严格规定了合并的策略。然而这只是初始化中的第一步，这一节我们将对另一个重点的概念深入的分析，他就是，我们知道Vue大量利用了代理的思想，而除了响应式系统外，还有哪些场景也需要进行数据代理呢？这是我们这节分析的重点。
2022-11-15 10:13:45
271
原创 vue源码分析-挂载流程和模板编译
前面几节我们从new Vue创建实例开始，介绍了创建实例时执行初始化流程中的重要两步，配置选项的资源合并,以及响应式系统的核心思想，数据代理。在合并章节，我们对Vue丰富的选项合并策略有了基本的认知，在数据代理章节我们又对代理拦截的意义和使用场景有了深入的认识。按照Vue源码的设计思路，初始化过程还会进行很多操作，例如组件之间创建关联，初始化事件中心，初始化数据并建立响应式系统等，并最终将模板和数据渲染成为dom节点。如果直接按流程的先后顺序分析每个步骤的实现细节，会有很多概念很难理解。
2022-11-15 10:13:29
122
原创 vue源码分析-响应式系统(一)
从这一小节开始，正式进入Vue源码的核心，也是难点之一，响应式系统的构建。这一节将作为分析响应式构建过程源码的入门，主要分为两大块,第一块是针对响应式数据初始化过程的分析，另一块则是在保留源码设计理念的前提下，尝试手动构建一个基础的响应式系统。有了这两个基础内容的铺垫，下一篇进行源码具体细节的分析会更加得心应手。
2022-11-14 12:27:25
217
原创 vue源码分析-响应式系统(三)
上一节，我们深入分析了以为数据创建响应式系统的过程，并对其中依赖收集和派发更新的过程进行了详细的分析。然而在使用和分析过程中依然存在或多或少的问题，这一节我们将针对这些问题展开分析，最后我们也会分析一下watch的响应式过程。这篇文章将作为响应式系统分析的完结篇。
2022-11-14 12:26:56
236
原创 vue源码分析-响应式系统(二)
为了深入介绍响应式系统的内部实现原理，我们花了一整节的篇幅介绍了数据(包括)如何初始化成为响应式对象的过程。有了响应式数据对象的知识，上一节的后半部分我们还在保留源码结构的基础上构建了一个以data为数据的响应式系统，而这一节，我们继续深入响应式系统内部构建的细节，详细分析Vue在响应式系统中对的处理。
2022-11-14 12:24:49
204
原创 vue源码分析-从new Vue开始
的时候就会执行这个方法,并且我们传过去的options可以通过vm.$options访问到，那么。在Vue的原型上挂了一个_init方法，也就是说，我们执行。那我们再去一探究竟，可想而知里面必定有一个Vue函数类。等,这几个方法分别传入了Vue来初始化一些功能。内部原理又是啥呢，而且我们看到他接收到两个部分。那么关于这三个函数是干嘛的？函数执行完前两步之后需要执行的几个函数分别为。,可以看出来这不就是实现了一个继承嘛。那么我们写的一些组件和特性全部放在。中可以发现初始化了一些功能，例如。
2022-11-10 09:41:36
245
原创 vue源码分析-动态组件
Vue初始化阶段会在构造器的components属性添加三个组件对象,每个组件对象的写法和我们在自定义组件过程的写法一致，有render函数，有生命周期，也会定义各种数据。// keep-alive组件选项} } // transition 组件选项} } // transition-group 组件选项} ,// Vue构造器的选项配置，compoents选项合并 extend(Vue.options.components , builtInComponents);extend。
2022-11-10 09:41:13
300
原创 vue源码中的渲染过程是怎样的
有了渲染树后，渲染引擎将计算所有元素的位置信息，最后通过绘制，在屏幕上打印最终的内容。引擎和渲染引擎虽然是两个独立的线程，但是JS引擎却可以触发渲染引擎工作，当我们通过脚本去修改元素位置或外观时，对象描述的内容要简单得多，它只用来单纯描述节点的关键属性，例如标签名，数据，子节点等。函数有一千多行代码，这里就不方便列举出来了，它的内部首先定义了一系列辅助的方法，而核心是通过调用。过程，我们之前只提到了它会定义跟渲染有关的函数，实际上它只定义了两个重要的方法，从渲染引擎的角度，它首先会将。
2022-11-08 12:59:44
106
原创 vue源码分析-diff算法核心原理
这一节，依然是，上几节内容介绍了是Vue在渲染机制上做的优化，而渲染的核心在于数据变化时，如何高效的更新节点，这就是diff算法。由于源码中关于diff算法部分流程复杂，直接剖析每个流程不易于理解，所以这一节我们换一个思路，参考源码来手动实现一个简易版的diff算法。之前讲到Vue在渲染机制的优化上，引入了的概念，利用描述一个真实的DOM,本质上是在JS和真实DOM之间架起了一层缓冲层。当我们通过大量的JS运算,并将最终结果反应到浏览器进行渲染时，可以将多个改动合并成一个批量的操作，从而减少dom。
2022-11-08 12:59:22
87
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人