- 博客(88)
- 收藏
- 关注
RSS订阅原创 前端常考vue面试题（必备）
（1）父子组件间通信子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。通过 ref 属性给子组件设置一个名字。父组件通过$refs组件名来获得子组件，子组件通过$parent获得父组件，这样也可以实现通信。使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。
2023-03-15 11:34:25
765
原创 前端必会vue面试题（必备）
有五种，分别是 State、 Getter、Mutation 、Action、 Module简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点），详细步骤如下：计算属性 computed：（1）支持缓存，只有依赖数据发生变化时，才会重新进行计算函数；（2）计算属性内不支持异步操作；（3）计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；（4）计算属性是自动监听依赖值的变化，从而动态返回内容。侦听属性 wat
2023-03-15 11:34:12
779
原创 vue实战中的一些小技巧
如果想在一个自定义的Input组件上使用v-model，那么就要在子组件，介绍一个value，和触发input事件，v-model的默认语法糖就是这两个东西的组合。🌰。
2023-03-15 11:34:03
445
原创 vue的几个提效技巧
也就是说，假设总计50条数据，即使经过v-if以后，只剩下25条显示，但是v-for早就循环了一遍50条数据，解决办法就是用一个计算属性先将数据过滤了以后，v-for循环过滤了之后的数据。当这个页面没有数据更新，或者是想保存状态，下次进来还是这样子的时候，例如淘宝查看列表页，点进去查看详情之后，返回列表页依旧到上次浏览到的地方，都可以使用。的值和父组件的index都要拿的情况，但是按照之前的写法，只能拿到其中一个的值，要么子组件，要么父组件，鱼和熊掌不可兼得。用来拿取路由传值的信息，比如路由的后缀?
2023-03-15 11:32:53
304
1
原创 vue实战-完全掌握Vue自定义指令
除了核心功能默认内置的指令 (v-model和v-show等)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。作为使用Vue的开发者，我们对Vue指令一定不陌生，诸如v-modelv-onv-forv-if等，同时Vue也为开发者提供了自定义指令的api，熟练的使用自定义指令可以极大的提高了我们编写代码的效率，让我们可以节省时间开心的摸鱼~
2023-03-01 20:47:38
382
原创 2023前端vue面试题（边面边更）
指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
2023-03-01 20:45:39
6272
原创 vue实战-深入响应式数据原理
监听嵌套层级过深的对象会影响性能对象新增或者删除的属性无法被set监听到 只有对象本身存在的属性修改才会被劫持，所以Vue设计了$set和$delete方法，更新数据的同时手动触发通知依赖如果用其来监听数组的话，无法监听数组长度动态变化，并且只能监听通过对已有元素下标的访问进行的修改，即arr[已有元素下标] = val// 读取方法 console . log('读取' , key , '成功') return val } , set(newval) {
2023-03-01 20:45:01
358
原创 京东前端二面常见vue面试题及答案
Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。我们可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。实例已经创建完成之后被调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
2023-02-28 11:02:05
745
原创 vue3实战-完全掌握ref、reactive
知道大家使用 Vue3 的时候有没有这样的疑惑，“ref、rective 都能创建一个响应式对象，我该如何选择？”，“为什么响应式对象解构之后就失去了响应式？应该如何处理？” 今天咱们就来全面盘点一下 ref、reactive，相信看完你一定会有不一样的收获，一起学起来吧！
2023-02-28 11:01:03
588
原创 2023前端一面vue面试题合集
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为。
2023-02-27 14:00:58
426
原创 Vue组件是怎样挂载的
在这里我们怎么理解这个挂载状态呢？先来看Vue官方给的一段描述。数据我们是知道怎么更新的，那么组件。上没有的属性与方法，用来报错，
2023-02-27 13:59:21
889
原创 腾讯前端二面常考vue面试题（附答案）
指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
2023-02-27 13:59:10
608
原创 Vue虚拟dom是如何被创建的
是在编译过程中会把那些不会变的静态节点打上标记，设置为。有了，那真正的渲染函数在哪呢？上挂载了两个方法，一个服务于用户手写的。方法使用的实际上就是我们自定义的。本身的屠特殊标签，并且最后有。节点进行替换,该方法将会拿到。的过程中会被调用生成一个。那么我们这一章就来讲。那么我们来看一看生成的。方式，但是该方法最终在。函数，也就是说，最终供。函数的作用是什么呢？我们可以看到有无限个。三次锤炼讲完了，那么。向vue原型上挂载了。
2023-02-27 13:58:56
557
原创 字节前端二面高频vue面试题整理
JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。而在Vue中，更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。参考前端进阶面试题详细解答。
2023-02-24 08:33:34
165
原创 Vue模板是怎样编译的
这一章我们开始讲模板解析编译:总结来说就是通过compile函数把tamplate解析成形式的字符串我们可以看出函数内部运行的是parseoptimizegenerate三个函数，而生成的是astrender三个对象。
2023-02-24 08:33:17
158
原创 Vue响应式依赖收集原理分析-vue高级必备
Vue 初始化时就会通过 Object.defineProperty 拦截属性的 getter 和 setter ，为对象的每个值创建一个 dep 并用 Dep.addSub() 来存储该属性值的 watcher 列表。触发依赖收集的阶段是在 beforeMount 时，它会为组件创建一个渲染 Watcher，在执行 render 的过程中就会触发对象的 getter 方法，通过dep.depend()将订阅者收集起来。
2022-12-12 11:21:38
96
原创 Vue响应式系统原理并实现一个双向绑定
劫持到的属性要根据属性分配容器，当当前容器不存在该属性的时候，我们便需要把他添加到订阅器对象里面，等待通知更新。我们订阅者，接收当前元素信息，MVVM对象，标识，属性。我们已经掌握了响应式原理，那我们开始着手Vue的另一个核心概念。框数据关联,说白了也就是相同的数据源，那我们的数据源在哪呢？那么我们触发更新时候需要收集依赖，我们直接吧收集到的依赖。，并且它只是起到一个标记的作用，当我们创建。可见两者都有了，那么我们该怎么实现呢？,那么有这样的基础，我们来手写一个。，以便面试的时候，吊打面试官(此为。
2022-12-12 11:20:41
144
原创 Vue实战必会的几个技巧
在项目中，我们有时候需要自定义鼠标右键出现的选项，而不是浏览器默认的右键选项对于如何实现右键菜单，在Vue中其实很简单，只要使用插件即可安装插件引入//引入 import Vue from 'vue';使用方法可以使用可以给选项添加图标可以使用style标签自定义选项的样式可以使用disabled属性禁止选项可以点击可以使用设置选项的下划线可以使用children设置子选项label : "返回" , onClick :() => {
2022-12-12 11:20:05
240
原创 Vue3必会技巧-自定义Hooks
结论：就是为了让更好用更丰满，让写Vue3更畅快！像写诗一样写代码！其实这个问题更深意义是为什么Vue3比Vue2更好！无外呼性能大幅度提升，其实编码体验也是Vue3的优点**的引入（解决Option Api在代码量大的情况下的强耦合）** 让开发者有更好的开发体验。个人碎碎念：但是这些所谓的提高开发体验都是需要开发者不断学习养成编码好习惯，同样是Vue3写Compoosition Api有的人就能写得和诗一样，有的人却能写得像💩一样（衷心希望每个开发者都有一颗对技术热衷的心，不要为了开发而开发，前人写
2022-12-07 12:56:56
361
原创 Vue3知识点之数据侦测
Vue 的核心之一就是响应式系统，通过侦测数据的变化，来驱动更新视图。通过可响应对象，实现对数据的侦测，从而告知外界数据变化。实现可响应对象的方式：关于前两个 API 的使用方式不多赘述，单一的访问器 功能相对简单，而作为 Vue2.x 实现可响应对象的 API - ，API 本身存在较多问题。Vue2.x 中，实现数据的可响应，需要对 和 两种类型采用不同的处理方式。 类型通过 将属性转换成 ，这个过程需要递归侦测所有的对象 ，来实现深度的侦测。为了感知 的变化，对 原型上几个改变数组
2022-12-07 12:56:16
554
原创 Vue中的diff算法深度解析
模板经过，，等一些列操作之后，把转为进而生成虚拟,模板编译阶段基本已经完成了，那么这一章，我们来探讨一下中的一个算法策略– 首先来介绍下什么叫我们经过前面的章节学习已经知道，要知道渲染的开销是很大的，比如有时候我们修改了某个数据，如果到真实dom上会引起的和，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？为了解决这个问题，我们的解决方案是–根据生成一颗，当某个节点的数据改变后会生成一个新的，然后作对比，发现有不一样的地方就直接修改在真实的上，然后使的值为。这也就是我们所说的一个的过程传
2022-12-07 12:56:02
1021
原创 解读Vue3模板编译优化
其实 Vue3 相关的性能优化有很多，这里只单独将 patchFlag 的十分之一的内容拿出来讲了，Vue3 还没正式发布的时候就有看到说 Diff 过程会通过 patchFlag 来进行性能优化，所以打算看看他的优化逻辑，总的来说还是有所收获。
2022-11-18 13:11:24
182
原创 Vue.nextTick核心原理
相信大家在写vue项目的时候，一定会发现一个神奇的api，。为什么说它神奇呢，那是因为在你做某些操作不生效时，将操作写在内，就神奇的生效了。那这是什么原因呢？让我们一起来研究一下。
2022-11-18 13:11:09
63
原创 Vue3, setup语法糖、Composition API全方位解读
Vue3相较于Vue2的自定义声明方法有些不同}) // 使 v-demo 在所有组件中都可用 app . directive('demo' , {// 在绑定元素的 attribute 前或事件监听器应用前调用 created(el , binding , vnode , prevVnode) {} , // 在元素被插入到 DOM 前调用 beforeMount(el , binding , vnode , prevVnode) {
2022-11-18 13:09:03
269
原创 vue的几个提效技巧
使用环境如图，这是一个v-for渲染的列表(只是目前这个版块才刚开始做，目前只有一个)，圆圈内的就是一个组件，也就是要v-for动态组件实际使用一开始就是基本的组件引入了接下来就是动态v-for动态组件的使用，使用下面的代码即可将代码依次循环编译以后的效果就是2.watch进阶使用立即执行使用环境例如场景为页面一进来就调用拉取列表数据，然后监听路由的然后触发列表数据的更新为了让它一开始就执行，我们需要在生命周期中执行一次拉取数据的方法但是使用即可立即执行,改写以后的代码如下参考vue实
2022-11-16 10:37:51
86
原创 彻底搞懂Vue虚拟Dom和diff算法
使用过Vue和React的小伙伴肯定对虚拟Dom和diff算法很熟悉，它扮演着很重要的角色。由于小编接触Vue比较多，React只是浅学，所以本篇主要针对Vue来展开介绍，带你一步一步搞懂它。虚拟DOM（Virtual Dom），也就是我们常说的虚拟节点，是用JS对象来模拟真实DOM中的节点，该对象包含了真实DOM的结构及其属性，用于对比虚拟DOM和真实DOM的差异，从而进行局部渲染来达到优化性能的目的。真实的元素节点：
2022-11-16 10:36:14
121
原创 聊聊Vuex原理
通篇看下来，还是需要自己手敲一下，在实践的过程中，才能发现问题(this 指向、父子结点判断、异步方法保存提示的巧妙)。当你明白具体实现，那每次使用就轻而易举了，每一步使用都知道干了什么的感觉真好。
2022-11-16 10:33:50
212
原创 vue实战-完全掌握Vue自定义指令
除了核心功能默认内置的指令 (v-model和v-show等)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。作为使用Vue的开发者，我们对Vue指令一定不陌生，诸如v-model、v-on、v-for、v-if等，同时Vue也为开发者提供了自定义指令的api，熟练的使用自定义指令可以极大的提高了我们编写代码的效率，让我们可以节省时间开心的摸鱼~
2022-11-15 10:31:13
279
原创 vue实战-深入响应式数据原理
监听嵌套层级过深的对象会影响性能对象新增或者删除的属性无法被set监听到 只有对象本身存在的属性修改才会被劫持，所以Vue设计了$set和$delete方法，更新数据的同时手动触发通知依赖如果用其来监听数组的话，无法监听数组长度动态变化，并且只能监听通过对已有元素下标的访问进行的修改，即arr[已有元素下标] = val// 读取方法 console . log('读取' , key , '成功') return val } , set(newval) {
2022-11-15 10:30:34
167
原创 vue实战中的一些小技巧
如果想在一个自定义的Input组件上使用v-model，那么就要在子组件，介绍一个value，和触发input事件，v-model的默认语法糖就是这两个东西的组合。🌰。
2022-11-15 10:30:03
225
原创 Vue虚拟dom是如何被创建的
是在编译过程中会把那些不会变的静态节点打上标记，设置为。有了，那真正的渲染函数在哪呢？上挂载了两个方法，一个服务于用户手写的。方法使用的实际上就是我们自定义的。本身的屠特殊标签，并且最后有。节点进行替换,该方法将会拿到。的过程中会被调用生成一个。那么我们这一章就来讲。那么我们来看一看生成的。方式，但是该方法最终在。函数，也就是说，最终供。函数的作用是什么呢？我们可以看到有无限个。三次锤炼讲完了，那么。向vue原型上挂载了。
2022-11-14 12:37:47
104
原创 vue3实战-完全掌握ref、reactive
知道大家使用 Vue3 的时候有没有这样的疑惑，“ref、rective 都能创建一个响应式对象，我该如何选择？”，“为什么响应式对象解构之后就失去了响应式？应该如何处理？” 今天咱们就来全面盘点一下 ref、reactive，相信看完你一定会有不一样的收获，一起学起来吧！
2022-11-14 12:37:08
701
原创 vue中的几个高级概念
除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。比如项目中常用的水印功能。我们对一个 div 范围内添加水印样式。可以用到自定义指令。首先看看效果图生成水印有许多方法。我们现在通过自定义指令的方式来操作，以便熟悉自定义指令的使用。先上代码// 当前指令的钩子函数 略 bind() {} } } }
2022-11-14 12:36:35
133
原创 Vue实战必会的几个技巧
在项目中，我们有时候需要自定义鼠标右键出现的选项，而不是浏览器默认的右键选项对于如何实现右键菜单，在Vue中其实很简单，只要使用插件即可安装插件引入//引入 import Vue from 'vue';使用方法可以使用可以给选项添加图标可以使用style标签自定义选项的样式可以使用disabled属性禁止选项可以点击可以使用设置选项的下划线可以使用children设置子选项label : "返回" , onClick :() => {
2022-11-10 10:05:55
312
原创 Vue模板是怎样编译的
这一章我们开始讲模板解析编译:总结来说就是通过函数把解析成形式的字符串我们可以看出函数内部运行的是、、三个函数，而生成的是，，三个对象参考vue实战视频讲解：进入学习当我们把代码折叠起来的话会看到函数里面核心就是函数，他通过和,,,四个来的：这些都是用来中匹配，，，，，等我们知道了接受俩个参数，我们再来看一下中是如何去匹配的：所以整个parseHTML中的流程总结为：开始解析：那么我们继续来看一下，两个函数分别实现了啥功能：我们再来看看解析过程中是如何一个字符一个字符的匹配字符串的：//通过
2022-11-10 10:05:27
81
原创 Vue组件是怎样挂载的
在这里我们怎么理解这个挂载状态呢？先来看Vue官方给的一段描述。数据我们是知道怎么更新的，那么组件。上没有的属性与方法，用来报错，
2022-11-10 10:04:04
130
原创 Vue中的diff算法深度解析
模板经过，，等一些列操作之后，把转为进而生成虚拟,模板编译阶段基本已经完成了，那么这一章，我们来探讨一下中的一个算法策略– 首先来介绍下什么叫我们经过前面的章节学习已经知道，要知道渲染的开销是很大的，比如有时候我们修改了某个数据，如果到真实dom上会引起的和，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？为了解决这个问题，我们的解决方案是–根据生成一颗，当某个节点的数据改变后会生成一个新的，然后作对比，发现有不一样的地方就直接修改在真实的上，然后使的值为。这也就是我们所说的一个的过程传
2022-11-08 15:45:55
107
原创 Vue响应式依赖收集原理分析-vue高级必备
Vue 初始化时就会通过 Object.defineProperty 拦截属性的 getter 和 setter ，为对象的每个值创建一个 dep 并用 Dep.addSub() 来存储该属性值的 watcher 列表。触发依赖收集的阶段是在 beforeMount 时，它会为组件创建一个渲染 Watcher，在执行 render 的过程中就会触发对象的 getter 方法，通过dep.depend()将订阅者收集起来。
2022-11-08 15:45:21
127
原创 Vue响应式系统原理并实现一个双向绑定
劫持到的属性要根据属性分配容器，当当前容器不存在该属性的时候，我们便需要把他添加到订阅器对象里面，等待通知更新。我们订阅者，接收当前元素信息，MVVM对象，标识，属性。我们已经掌握了响应式原理，那我们开始着手Vue的另一个核心概念。框数据关联,说白了也就是相同的数据源，那我们的数据源在哪呢？那么我们触发更新时候需要收集依赖，我们直接吧收集到的依赖。，并且它只是起到一个标记的作用，当我们创建。可见两者都有了，那么我们该怎么实现呢？,那么有这样的基础，我们来手写一个。，以便面试的时候，吊打面试官(此为。
2022-11-08 15:44:41
267
原创 Vue3, setup语法糖、Composition API全方位解读
Vue3相较于Vue2的自定义声明方法有些不同}) // 使 v-demo 在所有组件中都可用 app . directive('demo' , {// 在绑定元素的 attribute 前或事件监听器应用前调用 created(el , binding , vnode , prevVnode) {} , // 在元素被插入到 DOM 前调用 beforeMount(el , binding , vnode , prevVnode) {
2022-11-07 15:15:54
245
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人