02 2023 档案
摘要：Vue3.0 为什么要用 proxy？ 在 Vue2 中， 0bject.defineProperty 会改变原始数据，而 Proxy 是创建对象的虚拟表示，并提供 set 、get 和 deleteProperty 等处理器，这些处理器可在访问或修改原始对象上的属性时进行拦截，有以下特点∶ 不需用
阅读全文
摘要：什么是 keep-alive 在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。 也就是说，keepalive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存 <
阅读全文
摘要：什么是递归组件？举个例子说明下？ 分析 递归组件我们用的比较少，但是在Tree、Menu这类组件中会被用到。 体验 组件通过组件名称引用它自己，这种情况就是递归组件 <template> <li> <div> {{ model.name }}</div> <ul v-show="isOpen" v-
阅读全文
摘要：一、Vue3 与 Vue2 区别详述 1. 生命周期 对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Op
阅读全文
摘要：说说你对 proxy 的理解，Proxy 相比于 defineProperty 的优势 Object.defineProperty() 的问题主要有三个： 不能监听数组的变化 ：无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应 必须遍历对象的每个属性 ：只能劫持对象的属性，从而需要对
阅读全文
摘要：Vue 视图更新原理 Vue 的视图更新原理主要涉及的是响应式相关API Object.defineProperty 的使用，它的作用是为对象的某个属性对外提供 get、set 方法，从而实现外部对该属性的读和写操作时能够被内部监听，实现后续的同步视图更新功能 一、实现响应式的核心API：Objec
阅读全文
摘要：Vuex中actions和mutations有什么区别 题目分析 mutations和actions是vuex带来的两个独特的概念。新手程序员容易混淆，所以面试官喜欢问。 我们只需记住修改状态只能是mutations，actions只能通过提交mutation修改状态即可 回答范例 更改 Vuex
阅读全文
摘要：引言 在这里我先提出两个问题（文章末尾会进行解答）： 在Vue的数据响应系统中，Dep和Watcher各自分担什么任务？ Vue的数据响应系统的核心是Object.defineproperty一定是最好的吗？有什么弊端和漏洞吗？ 一、什么是响应系统中的Watcher，它的作用是什么？ 响应系统中的W
阅读全文
摘要：如何监听 pushState 和 replaceState 的变化呢？ 利用自定义事件new Event()创建这两个事件，并全局监听： <body> <button onclick="goPage2()">去page2</button> <div>Page1</div> <script> let
阅读全文
摘要：最近面试总是会被问到这么一个问题：在使用vue的时候，将for循环中声明的变量i从1增加到100，然后将i展示到页面上，页面上的i是从1跳到100，还是会怎样？答案当然是只会显示100，并不会有跳转的过程。 怎么可以让页面上有从1到100显示的过程呢，就是用setTimeout或者Promise.t
阅读全文
摘要：双向数据绑定的原理 Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤： 需要observe的数据对象进行递归遍历，包括子属性对
阅读全文
摘要：组件化是 Vue, React 等这些框架的一个核心思想，通过把页面拆成一个个高内聚、低耦合的组件，可以极大程度提高我们的代码复用度，同时也使得项目更加易于维护。所以，本文就来分析下组件的渲染流程。我们通过下面这个例子来进行分析： <div id="demo"> <comp></comp> </di
阅读全文
摘要：使用 Object.defineProperty() 来进行数据劫持有什么缺点？ 在对一些属性进行操作时，使用这种方法无法拦截，比如通过下标方式修改数组数据或者给对象新增属性，这都不能触发组件的重新渲染，因为 Object.defineProperty 不能拦截到这些操作。更精确的来说，对于数组而言
阅读全文
摘要：写在前面 在前端中，主要涉及的基本上就是 DOM的相关操作 和 JS，我们都知道 DOM 操作是比较耗时的，那么在我们写前端相关代码的时候，如何减少不必要的 DOM 操作便成了前端优化的重要内容。 虚拟DOM(virtual DOM) 在 jQuery 时代，基本上所有的 DOM 相关的操作都是由我
阅读全文
摘要：DIFF算法的原理 在新老虚拟DOM对比时： 首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换 如果为相同节点，进行patchVnode，判断如何对该节点的子节点进行处理，先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节
阅读全文
摘要：什么是数据劫持? 定义： 数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。 简单地说，就是当我们 触发函数的时候 动一些手脚做点我们自己想做的事情，也就是所谓的 "劫持"操作 数据劫持的两种方案： Object.defineProperty
阅读全文
摘要：Vue 组件间通信有哪几种方式？ Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组
阅读全文
摘要：我们在开发Vue项目时候都知道，在vue开发中某些问题如果前期忽略掉，当时不会出现明显的效果，但是越向后开发越难做，而且项目做久了就会出现问题，这就是所说的蝴蝶效应，这样后期的维护成本会非常高，并且项目上线后还会影响用户体验，也会出现加载慢等一系列的性能问题，下面举一个简单的例子。 举个简单的例子
阅读全文
摘要：delete和Vue.delete删除数组的区别 delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。 Vue.delete 直接删除了数组 改变了数组的键值。 Vue3有了解过吗？能说说跟vue2的区别吗？ 1. 哪些变化 从上图中，我们可以概览Vue3
阅读全文
摘要：背景 看了一些自定义指令的文章，但是探究其原理的文章却不多见，所以我决定水一篇。 如何自定义指令？ 其实关于这个问题官方文档上已经有了很好的示例的，我们先来温故一下。 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用
阅读全文
摘要：Vuex 页面刷新数据丢失怎么解决 体验 可以从localStorage中获取作为状态初始值： const store = createStore({ state () { return { count: localStorage.getItem('count') } } }) 业务代码中，提交修改
阅读全文
摘要：vue组件通信方式 一、props(父向子传值 自定义属性) / $emit(子向父传值 自定义事件) 父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。 1. 父组件向子组件传值(props) 下面通过一个例子说明父组件如何向子组件传递数据：在子组件articl
阅读全文
摘要：前言 在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来, 欢迎大家一起学习交流, 有更好的方法欢迎评论区指出, 后序我也将持续整理总结~ 描述 Vue 与 React 区别 说明概念: vue:是一套用于构建用户界面的渐进式
阅读全文
摘要：Vue加载流程 1.初始化的第一阶段是Vue实例也就是vm对象创建前后：首先Vue进行生命周期，事件初始化发生在beforeCreate生命周期函数前，然后进行数据监测和数据代理的初始化，也就是创建vm对象的过程，当vm对象创建完成就可以通过vm对象访问到劫持的数据，比如data中的数据，metho
阅读全文
摘要：Vue加载流程 1.初始化的第一阶段是Vue实例也就是vm对象创建前后：首先Vue进行生命周期，事件初始化发生在beforeCreate生命周期函数前，然后进行数据监测和数据代理的初始化，也就是创建vm对象的过程，当vm对象创建完成就可以通过vm对象访问到劫持的数据，比如data中的数据，metho
阅读全文
摘要：Vue 模板编译原理 Vue 的编译过程就是将 template 转化为 render 函数的过程 分为以下三步 第一步是将 模板字符串 转换成 element ASTs（解析器） 第二步是对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器） 第三步是 使用 element AST
阅读全文
摘要：前言 有时候有些面试中经常会问到v-for与v-if谁的优先级高，这里就通过分析源码去解答一下这个问题。 下面的内容是在 当我们谈及v-model，我们在讨论什么?的基础上分析的，所以阅读下面内容之前可先看这篇文章。 继续从编译出发 以下面的例子出发分析： new Vue({ el:'#app',
阅读全文
摘要：action 与 mutation 的区别 mutation 是同步更新， $watch 严格模式下会报错 action 是异步操作，可以获取数据后调用 mutation 提交最终数据 MVVM的优缺点? 优点: 分离视图（View）和模型（Model），降低代码耦合，提⾼视图或者逻辑的重⽤性: ⽐
阅读全文
摘要：原理性的东西就会文字较多，请耐下心来，细细品味 Vue中DOM更新机制 当你气势汹汹地使用Vue大展宏图的时候，突然发现，咦，我明明对这个数据进行更改了，但是当我获取它的时候怎么是上一次的值（本人比较懒，就不具体举例了👵） 此时，Vue就会说：“小样，这你就不懂了吧，我的DOM是异步更新的呀！！！
阅读全文
摘要：怎么实现路由懒加载呢 这是一道应用题。当打包应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应组件，这样就会更加高效 // 将 // import UserDetails from './views/UserDe
阅读全文
摘要：一、computed介绍 computed 用来监控自己定义的变量，该变量在 data 内没有声明，直接在 computed 里面定义，页面上可直接使用。 //基础使用 {{msg}} <input v-model="name" /> //计算属性 computed:{ msg:function()
阅读全文
摘要：父子组件生命周期调用顺序（简单） 渲染顺序：先父后子，完成顺序：先子后父 更新顺序：父更新导致子更新，子更新完成后父 销毁顺序：先父后子，完成顺序：先子后父 diff算法 时间复杂度： 个树的完全 diff 算法是一个时间复杂度为 O(n*3） ，vue进行优化转化成 O(n) 。 理解： 最小量更
阅读全文
摘要：什么是 keep-alive 在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。 也就是说，keepalive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存 <
阅读全文
摘要：实现双向绑定 我们还是以Vue为例，先来看看Vue中的双向绑定流程是什么的 new Vue()首先执行初始化，对data执行响应化处理，这个过程发生Observe中 同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在Compile中 同时定义⼀个更新函数和Wat
阅读全文
摘要：一、Vue3 与 Vue2 区别详述 1. 生命周期 对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Op
阅读全文
摘要：Vue组件之间通信方式有哪些 Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你回答出越多方法当然越加分，表明你对 Vue 掌握的越熟练。 Vue 组件间通信只要指以下 3 类通信 ：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组
阅读全文
摘要：Vue 视图更新原理 Vue 的视图更新原理主要涉及的是响应式相关API Object.defineProperty 的使用，它的作用是为对象的某个属性对外提供 get、set 方法，从而实现外部对该属性的读和写操作时能够被内部监听，实现后续的同步视图更新功能 一、实现响应式的核心API：Objec
阅读全文
摘要：Vue 的父子组件生命周期钩子函数执行顺序 渲染顺序 ：先父后子，完成顺序：先子后父 更新顺序 ：父更新导致子更新，子更新完成后父 销毁顺序 ：先父后子，完成顺序：先子后父 加载渲染过程 父 beforeCreate->父 created->父 beforeMount->子 beforeCreate
阅读全文
摘要：引言 在这里我先提出两个问题（文章末尾会进行解答）： 在Vue的数据响应系统中，Dep和Watcher各自分担什么任务？ Vue的数据响应系统的核心是Object.defineproperty一定是最好的吗？有什么弊端和漏洞吗？ 一、什么是响应系统中的Watcher，它的作用是什么？ 响应系统中的W
阅读全文
