- 博客(235)
- 收藏
- 关注
RSS订阅原创 vue组件通信6种方式总结（常问知识点）
在子组件中可以通过$emit向父组件发生一个事件，在父组件中通过v-on进行监听。子组件 ComponentA：
2023-05-19 16:08:16
406
1
原创 美团前端vue面试题
在组件的选项中定义本地的过滤器if(!if(!// ... })注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize过滤器函数将会收到message的值作为第一个参数在这个例子中，filterA被定义为接收单个参数的过滤器函数，表达式message的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数filterB，将filterA的结果传递到filterB中。过滤器是。
2023-05-19 16:08:01
417
原创 滴滴前端必会vue面试题汇总
通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。另外现代前端框架的一个基本要求就是无须手动操作DOM，一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率。这些被标记的节点(静态节点)我们就可以。什么自动化，镜像，容器，流水线布署，本质也是将这套逻辑抽象，隔离，用程序来代替重复性的劳动，本文不展开。
2023-05-19 16:06:38
541
原创 vue组件通信方式有哪些？
父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。上面两种方式用于父子组件之间的通信， 而使用props进行父子组件通信更加普遍;二者皆不能用于非父子组件之间的通信。所以，如果想要用 bus 来进行页面组件之间的数据传递，需要注意两点：一、组件A emit 事件应在beforeDestory生命周期内。二、组件B内的 on 记得要销毁Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
2023-05-19 16:05:52
188
原创 new Vue的时候到底做了什么
diff算法是一种对比算法。对比两者是旧虚拟DOM和新虚拟DOM，对比出是哪个虚拟节点更改了，找出这个虚拟节点，并只更新这个虚拟节点所对应的真实节点，而不用更新其他数据没发生改变的节点，实现精准地更新真实DOM，进而提高效率比较只会在同层级进行, 不会跨层级比较在diff比较的过程中，循环从两边向中间比较DIFF算法的过程：当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁通过进行判断，相同则调用patchVnode方法patchVnode找到对应的真实dom，称为。
2023-03-13 17:59:45
119
原创 滴滴前端一面常考vue面试题（持续更新中）
Model–View–ViewModel （MVVM） 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于2005年在他的博客上发表。
2023-03-13 17:59:29
178
原创 vue为什么v-for的优先级比v-if的高？
有时候有些面试中经常会问到v-for与v-if谁的优先级高，这里就通过分析源码去解答一下这个问题。下面的内容是在 当我们谈及v-model，我们在讨论什么?的基础上分析的，所以阅读下面内容之前可先看这篇文章。为什么v-for的优先级比v-if的高？总结来说是编译有三个过程，parse->optimize->codegen。在codegen过程中，会先解析AST树中的与v-for相关的属性，再解析与v-if相关的属性。除此之外，也可以知道Vue对v-for和v-if是怎么处理的。
2023-03-13 17:57:19
116
原创 前端一面常见vue面试题合集
Model–View–ViewModel （MVVM） 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于2005年在他的博客上发表。
2023-03-01 09:42:23
164
原创 前端常见vue面试题（必备）
provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。vue2.x 中的组件是通过声明的方式传入一系列 option，和 TypeScript 的结合需要通过一些装饰器的方式来做，虽然能实现功能，但是比较麻烦。模板方面没有大的变更，只改了作用域插槽，2.x 的机制导致作用域插槽变了，父组件会重新渲染，而 3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能。
2023-03-01 09:41:57
263
原创 Vue的computed和watch的区别是什么？
computed 用来监控自己定义的变量，该变量在 data 内没有声明，直接在 computed 里面定义，页面上可直接使用。//基础使用 {msg } } < input v - model = "name" / > //计算属性 computed : {在输入框中，改变 name 值得时候，msg 也会跟着改变。这是因为 computed 监听自己的属性 msg，发现 name 一旦变动，msg 立马会更新。注意：msg 不可在 data 中定义，否则会报错。1.1、get 和 set 用法。
2023-03-01 09:40:07
133
原创 2023前端vue面试题及答案
在 Vue2 中， 0bject.defineProperty 会改变原始数据，而 Proxy 是创建对象的虚拟表示，并提供 set 、get 和 deleteProperty 等处理器，这些处理器可在访问或修改原始对象上的属性时进行拦截，有以下特点∶。有的时候，需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情。
2023-02-28 08:26:27
1071
原创 面试官：vue2和vue3的区别有哪些？
对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子，如下所示。常用生命周期对比如下表所示。Tips： setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地去定义。
2023-02-28 08:24:59
652
原创 说说你对Vue的keep-alive的理解
keep-alive在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。也就是说，keepalive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。也就是所谓的组件缓存是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和相似，是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中。
2023-02-28 08:24:39
95
原创 百度前端一面高频vue面试题汇总
分析递归组件我们用的比较少，但是在TreeMenu这类组件中会被用到。体验组件通过组件名称引用它自己，这种情况就是递归组件-- 注意这里：组件递归渲染了它自己 --> < TreeItem class = " item " v-for = " model in model.children " :model = " model " > < script > export default {
2023-02-28 08:24:14
308
原创 前端一面常见vue面试题汇总
的问题主要有三个：Proxy的优势如下:proxy详细使用点击查看(opens new window)Object.defineProperty的优势如下:defineProperty的属性值有哪些相关代码如下只会代理对象的第一层，那么又是怎样处理这个问题的呢？监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？组件通信的方式如下：父组件通过向子组件传递数据，子组件通过和父组件通信2. 子组件向父组件传值绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过监
2023-02-27 09:56:07
332
原创 能不能手写Vue响应式？前端面试进阶
我们都知道，在 JS 中，任何对象都有原型，而我们的目的是通过重写数组原型上方法（push、pop等）实现监听，而作为库或是框架，我们都不应该去改变全局原型上的任何原生方法或者属性，污染全局环境，所以，这里分3步：第一步：创建一个对象，将数组的原型赋值给该对象第二步：创建新对象，原型指向该对象第三步：重写该对象上的方法。
2023-02-27 09:54:02
112
原创 阿里前端常考vue面试题汇总
题目分析回答范例实现我们可以像下面这样简单实现和，从而辨别两者不同如何在组件中批量使用Vuex的getter属性使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中Vue组件之间通信方式有哪些组件传参的各种方式组件通信常用方式有以下几种根据组件之间关系讨论组件通信最为清晰有效1. 父子组件通信父组件模板:子组件模板:回调函数（callBack）父传子：将父组件里定义的作为传入子组件子组件向父组件通信父组件模板:子组件模板:2. provide
2023-02-27 09:53:12
297
原创 说说Vue响应式系统中的Watcher和Dep的关系-面试进阶
响应系统中的Watcher即这个系统的观察者，它是响应系统中观察者模式的载体，当响应系统中的数据发生改变的时候，它能够知道并且执行相应的函数以达到某种业务逻辑的目的。打个比方，如果你是一个商家，要寄一批货分别给不同的客户，那么watcher就是一个个快递员，发出的动作就是数据发生改变。你只需要负责寄出去这个动作就行了，如何找到、送到客户则是watcher的事情。每个watcher和数据之间的关系要么是1对1，要么是多对多关系（这与watcher的类型有关），要不是没有联系。watcher。
2023-02-27 09:52:50
176
原创 每日一题之Vue的异步更新实现原理是怎样的？
最近面试总是会被问到这么一个问题：在使用vue的时候，将for循环中声明的变量i从1增加到100，然后将i展示到页面上，页面上的i是从1跳到100，还是会怎样？答案当然是只会显示100，并不会有跳转的过程。怎么可以让页面上有从1到100显示的过程呢，就是用setTimeout或者等方法去模拟。讲道理，如果不在vue里，单独运行这段程序的话，输出一定是从1到100，但是为什么在vue中就不一样了呢？这就涉及到Vue底层的异步更新原理，也要说一说nextTick的实现。不过在说nextTick。
2023-02-23 17:56:13
161
原创 2023前端二面vue面试题
（1）param方式传递的方式：在path后面跟上对应的值1）路由定义//在APP.vue中 < router - link : to = "'/user/'+userId" replace > 用户 < / router - link > //在index.js {2）路由跳转。
2023-02-23 17:55:26
534
原创 每日一题之请描述Vue组件渲染流程
组件化是VueReact等这些框架的一个核心思想，通过把页面拆成一个个高内聚、低耦合的组件，可以极大程度提高我们的代码复用度，同时也使得项目更加易于维护。所以，本文就来分析下组件的渲染流程。我们通过下面这个例子来进行分析：
2023-02-23 17:54:13
88
原创 2023前端常考vue面试题集锦
的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。这只是一个简单的例子，实际上的节点有更多的属性来标志节点，比如 isStatic （代表是否为静态节点）、 isComment （代表是否为注释节点）等。有的时候，需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。异步方法，异步渲染最后一步，与JS事件循环联系紧密。
2023-02-23 17:54:09
242
原创 社招前端一面必会vue面试题
在新老虚拟DOM对比时：在diff中，只对同层的子节点进行比较，放弃跨级的节点比较，使得时间复杂从O(n3)降低值O(n)，也就是说，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。包括以下几个模块回答范例思路回答范例可能的追问实现双向绑定我们还是以为例，先来看看中的双向绑定流程是什么的流程图如下：先来一个构造函数：执行初始化，对执行响应化处理对选项执行响应化具体操作编译对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数依赖收集视图
2023-02-21 10:23:50
190
原创 在vue的v-for中，key为什么不能用index？
简而言之，就是通过 JS 来模拟 DOM 结构，关于纠结以什么 JS 数据结构来模拟 DOM 并没有一套标准，只要能完全覆盖 DOM 的所有结构即可，下面以较为通用的方式演示一下。通过对 DOM 结构的分析，我们可以用 tag 表示 DOM 节点的类型，props 表示 DOM 节点的所有属性，包括 style、class 等，children 表示子节点（没有子节点则表示内容），这样子我们就把整个 DOM 通过 JS 模拟出来了，然后呢?然后看看下一章~~~
2023-02-21 10:23:02
108
原创 每日一题之Vue数据劫持原理是什么？
数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。简单地说，就是当我们。
2023-02-21 10:22:22
166
原创 京东前端经典vue面试题（持续更新中）
在Vue中，对响应式处理利用的是Object.defineProperty对数据进行拦截，而这个方法并不能监听到数组内部变化，数组长度变化，数组的截取变化等，所以需要对这些操作进行hack，让Vue能监听到其中的变化。取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。简单来说就是，重写了数组中的那些原生方法，首先获取到这个数组的__ob__，也就是它的Observer对象，如果有新的值，就调用observeArray继续对新的值观察变化（也就是通过。
2023-02-20 11:40:35
257
原创 假如问：你是怎样优化Vue项目的，该怎么回答
我们在开发Vue项目时候都知道，在vue开发中某些问题如果前期忽略掉，当时不会出现明显的效果，但是越向后开发越难做，而且项目做久了就会出现问题，这就是所说的蝴蝶效应，这样后期的维护成本会非常高，并且项目上线后还会影响用户体验，也会出现加载慢等一系列的性能问题，下面举一个简单的例子。如果加载项目的时候加载一张图片需要0.1s，其实算不了什么可以忽略不计，但是如果我有20张图片，这就是2s的时间, 2s的时间不算长一下就过去了，但是这仅仅的只是加载了图片，还有我们的js，css都需要加载，那就需要更长的时间，可
2023-02-20 11:39:57
77
原创 美团前端必会vue面试题合集
Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、 方法等，则可以将其编写为 mixin，并在组件中简单的引用它。然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。
2023-02-20 11:39:22
149
原创 写过vue自定义指令吗，原理是什么？.m
其实关于这个问题官方文档上已经有了很好的示例的，我们先来温故一下。除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：当页面加载时，该元素将获得焦点 (注意：autofocus在移动版Safari上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。
2023-02-20 11:39:04
105
原创 vue组件通信方式有哪些？
父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。上面两种方式用于父子组件之间的通信， 而使用props进行父子组件通信更加普遍;二者皆不能用于非父子组件之间的通信。所以，如果想要用 bus 来进行页面组件之间的数据传递，需要注意两点：一、组件A emit 事件应在beforeDestory生命周期内。二、组件B内的 on 记得要销毁Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
2023-02-19 12:19:00
85
原创 社招前端经典vue面试题（附答案）
体验可以从中获取作为状态初始值：业务代码中，提交修改状态同时保存最新值：虽说实现了，但是每次还要手动刷新不太优雅回答范例原理可以看一下vuex-persist (opens new window)内部确实是利用实现的1）Vue为什么要用vm.$set() 解决对象新增属性不能响应的问题所以Vue提供了Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)2）接下来我们看看框架本身是如何实现的呢?我们阅读
2023-02-19 12:18:19
389
原创 vue这些原理你都知道吗？(面试版)
在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来, 欢迎大家一起学习交流, 有更好的方法欢迎评论区指出, 后序我也将持续整理总结~
2023-02-19 12:16:49
52
原创 前端一面必会vue面试题总结
Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、 方法等，则可以将其编写为 mixin，并在组件中简单的引用它。然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。参考前端进阶面试题详细解答。
2023-02-14 10:07:48
99
原创 new Vue的时候到底做了什么
diff算法是一种对比算法。对比两者是旧虚拟DOM和新虚拟DOM，对比出是哪个虚拟节点更改了，找出这个虚拟节点，并只更新这个虚拟节点所对应的真实节点，而不用更新其他数据没发生改变的节点，实现精准地更新真实DOM，进而提高效率比较只会在同层级进行, 不会跨层级比较在diff比较的过程中，循环从两边向中间比较DIFF算法的过程：参考前端进阶面试题详细解答当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁通过进行判断，相同则调用patchVnode方法patchVnode。
2023-02-14 10:07:39
100
原创 vue为什么v-for的优先级比v-if的高？
有时候有些面试中经常会问到v-for与v-if谁的优先级高，这里就通过分析源码去解答一下这个问题。下面的内容是在 当我们谈及v-model，我们在讨论什么?的基础上分析的，所以阅读下面内容之前可先看这篇文章。为什么v-for的优先级比v-if的高？总结来说是编译有三个过程，parse->optimize->codegen。在codegen过程中，会先解析AST树中的与v-for相关的属性，再解析与v-if相关的属性。除此之外，也可以知道Vue对v-for和v-if是怎么处理的。
2023-02-14 10:06:39
77
原创 vue为什么v-for的优先级比v-if的高？
有时候有些面试中经常会问到v-for与v-if谁的优先级高，这里就通过分析源码去解答一下这个问题。下面的内容是在 当我们谈及v-model，我们在讨论什么?的基础上分析的，所以阅读下面内容之前可先看这篇文章。为什么v-for的优先级比v-if的高？总结来说是编译有三个过程，parse->optimize->codegen。在codegen过程中，会先解析AST树中的与v-for相关的属性，再解析与v-if相关的属性。除此之外，也可以知道Vue对v-for和v-if是怎么处理的。
2023-02-14 10:06:27
81
原创 高级前端二面vue面试题（持续更新中）
在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。一般需要对DOM元素进行底层操作时使用，尽量只用来操作 DOM展示，不修改内部的值。当使用自定义指令直接修改 value 值时绑定v-model的值也不会同步更新；如必须修改可以在自定义指令中使用keydown事件，在vue组件中使用 change事件，回调中修改vue数据;（1）自定义指令基本内容钩子函数：指令定义对象提供钩子函数。
2023-02-13 09:53:56
691
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人