12 2022 档案
摘要：Vue中封装的数组方法有哪些，其如何实现页面更新 在Vue中，对响应式处理利用的是Object.defineProperty对数据进行拦截，而这个方法并不能监听到数组内部变化，数组长度变化，数组的截取变化等，所以需要对这些操作进行hack，让Vue能监听到其中的变化。 那Vue是如何实现让这些数组方
阅读全文
摘要：一、computed介绍 computed 用来监控自己定义的变量，该变量在 data 内没有声明，直接在 computed 里面定义，页面上可直接使用。 //基础使用 {{msg}} <input v-model="name" /> //计算属性 computed:{ msg:function()
阅读全文
摘要：为什么要使用异步组件 节省打包出的结果，异步组件分开打包，采用jsonp的方式进行加载，有效解决文件过大的问题。 核心就是包组件定义变成一个函数，依赖import() 语法，可以实现文件的分割加载。 components:{ AddCustomerSchedule:(resolve)=>import
阅读全文
摘要：一、Vue3 与 Vue2 区别详述 1. 生命周期 对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Op
阅读全文
摘要：vue初始化页面闪动问题 使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是还是有必要让解决这个问题的。 首先：在css里加上以下代码： [v-cloak
阅读全文
摘要：原理性的东西就会文字较多，请耐下心来，细细品味 Vue中DOM更新机制 当你气势汹汹地使用Vue大展宏图的时候，突然发现，咦，我明明对这个数据进行更改了，但是当我获取它的时候怎么是上一次的值（本人比较懒，就不具体举例了👵） 此时，Vue就会说：“小样，这你就不懂了吧，我的DOM是异步更新的呀！！！
阅读全文
摘要：Vue.extend 作用和原理 官方解释：Vue.extend 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 其实就是一个子类构造器 是 Vue 组件的核心 api 实现思路就是使用原型继承的方法返回了 Vue 的子类 并且利用 mergeOptions 把传入组件的
阅读全文
摘要：引言 在这里我先提出两个问题（文章末尾会进行解答）： 在Vue的数据响应系统中，Dep和Watcher各自分担什么任务？ Vue的数据响应系统的核心是Object.defineproperty一定是最好的吗？有什么弊端和漏洞吗？ 一、什么是响应系统中的Watcher，它的作用是什么？ 响应系统中的W
阅读全文
摘要：Redux 和 Vuex 有什么区别，它们的共同思想 （1）Redux 和 Vuex区别 Vuex改进了Redux中的Action和Reducer函数，以mutations变化函数取代Reducer，无需switch，只需在对应的mutation函数里改变state值即可 Vuex由于Vue自动重新
阅读全文
摘要：什么是 keep-alive 在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。 也就是说，keepalive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存 <
阅读全文
摘要：Composition API 与 Options API 有什么不同 分析 Vue3最重要更新之一就是Composition API，它具有一些列优点，其中不少是针对Options API暴露的一些问题量身打造。是Vue3推荐的写法，因此掌握好Composition API应用对掌握好Vue3至关
阅读全文
摘要：组件化是 Vue, React 等这些框架的一个核心思想，通过把页面拆成一个个高内聚、低耦合的组件，可以极大程度提高我们的代码复用度，同时也使得项目更加易于维护。所以，本文就来分析下组件的渲染流程。我们通过下面这个例子来进行分析： <div id="demo"> <comp></comp> </di
阅读全文
摘要：从0到1自己构架一个vue项目，说说有哪些步骤、哪些重要插件、目录结构你会怎么组织 综合实践类题目，考查实战能力。没有什么绝对的正确答案，把平时工作的重点有条理的描述一下即可 思路 构建项目，创建项目基本结构 引入必要的插件： 代码规范：prettier，eslint 提交规范：husky，lint
阅读全文
摘要：Vue 视图更新原理 Vue 的视图更新原理主要涉及的是响应式相关API Object.defineProperty 的使用，它的作用是为对象的某个属性对外提供 get、set 方法，从而实现外部对该属性的读和写操作时能够被内部监听，实现后续的同步视图更新功能 一、实现响应式的核心API：Objec
阅读全文
摘要：常见的事件修饰符及其作用 .stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡； .prevent ：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停
阅读全文
摘要：什么是数据劫持? 定义： 数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。 简单地说，就是当我们 触发函数的时候 动一些手脚做点我们自己想做的事情，也就是所谓的 "劫持"操作 数据劫持的两种方案： Object.defineProperty
阅读全文
摘要：虚拟DOM的优劣如何? 优点: 保证性能下限: 虚拟DOM可以经过diff找出最小差异,然后批量进行patch,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限 无需手动操作DOM: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需
阅读全文
摘要：最近面试总是会被问到这么一个问题：在使用vue的时候，将for循环中声明的变量i从1增加到100，然后将i展示到页面上，页面上的i是从1跳到100，还是会怎样？答案当然是只会显示100，并不会有跳转的过程。 怎么可以让页面上有从1到100显示的过程呢，就是用setTimeout或者Promise.t
阅读全文
摘要：Vue生命周期钩子是如何实现的 vue的生命周期钩子就是回调函数而已，当创建组件实例的过程中会调用对应的钩子方法 内部会对钩子函数进行处理，将钩子函数维护成数组的形式 Vue 的生命周期钩子核心实现是利用发布订阅模式先把用户传入的的生命周期钩子订阅好（内部采用数组的方式存储）然后在创建组件实例的过程
阅读全文
摘要：背景 看了一些自定义指令的文章，但是探究其原理的文章却不多见，所以我决定水一篇。 如何自定义指令？ 其实关于这个问题官方文档上已经有了很好的示例的，我们先来温故一下。 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用
阅读全文
摘要：MVVM的优缺点? 优点: 分离视图（View）和模型（Model），降低代码耦合，提⾼视图或者逻辑的重⽤性: ⽐如视图（View）可以独⽴于Model变化和修改，⼀个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。
阅读全文
摘要：写在前面 在前端中，主要涉及的基本上就是 DOM的相关操作 和 JS，我们都知道 DOM 操作是比较耗时的，那么在我们写前端相关代码的时候，如何减少不必要的 DOM 操作便成了前端优化的重要内容。 虚拟DOM(virtual DOM) 在 jQuery 时代，基本上所有的 DOM 相关的操作都是由我
阅读全文
摘要：Watch中的deep:true是如何实现的 当用户指定了 watch 中的deep属性为 true 时，如果当前监控的值是数组类型。会对对象中的每一项进行求值，此时会将当前 watcher存入到对应属性的依赖中，这样数组中对象发生变化时也会通知数据更新 源码相关 get () { pushTarg
阅读全文
摘要：一、简介 vue几个核心思想： 数据驱动 组件化 虚拟dom、diff局部最优更新 源码目录介绍 Vue.js 的源码在 src 目录下，其目录结构如下。 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── serv
阅读全文
摘要：我们在开发Vue项目时候都知道，在vue开发中某些问题如果前期忽略掉，当时不会出现明显的效果，但是越向后开发越难做，而且项目做久了就会出现问题，这就是所说的蝴蝶效应，这样后期的维护成本会非常高，并且项目上线后还会影响用户体验，也会出现加载慢等一系列的性能问题，下面举一个简单的例子。 举个简单的例子
阅读全文
摘要：用过pinia吗？有什么优点？ 1. pinia是什么？ 在Vue3中，可以使用传统的Vuex来实现状态管理，也可以使用最新的pinia来实现状态管理，我们来看看官网如何解释pinia的：Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 实际上，pinia就是Vuex的升级版，官网也
阅读全文
摘要：前言 在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来, 欢迎大家一起学习交流, 有更好的方法欢迎评论区指出, 后序我也将持续整理总结~ 描述 Vue 与 React 区别 说明概念: vue:是一套用于构建用户界面的渐进式
阅读全文
摘要：vuex是什么？怎么使用？哪种功能场景使用它？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data 里面存放的数据是响应式的，vue 组件从 store 读取数据，若
阅读全文
摘要：本文主要分以下两个部分对 Composition API 的原理进行解读： reactive API 原理 ref API 原理 reactive API 原理 打开源码可以找到reactive的入口，在composition-api/src/reactivity/reactive.ts，我们先从函
阅读全文
