10 2022 档案
摘要：什么是 keep-alive 在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。 也就是说，keepalive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存 <
阅读全文
摘要：router-link和router-view是如何起作用的 分析 vue-router中两个重要组件router-link和router-view，分别起到导航作用和内容渲染作用，但是回答如何生效还真有一定难度 回答范例 vue-router中两个重要组件router-link和router-vi
阅读全文
摘要：一、Vue3 与 Vue2 区别详述 1. 生命周期 对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Op
阅读全文
摘要：Vue 视图更新原理 Vue 的视图更新原理主要涉及的是响应式相关API Object.defineProperty 的使用，它的作用是为对象的某个属性对外提供 get、set 方法，从而实现外部对该属性的读和写操作时能够被内部监听，实现后续的同步视图更新功能 一、实现响应式的核心API：Objec
阅读全文
摘要：Vue.set的实现原理 给对应和数组本身都增加了dep属性 当给对象新增不存在的属性则触发对象依赖的watcher去更新 当修改数组索引时，我们调用数组本身的splice去更新数组（数组的响应式原理就是重新了splice等方法，调用splice就会触发视图更新） 基本使用 以下方法调用会改变原始数
阅读全文
摘要：引言 在这里我先提出两个问题（文章末尾会进行解答）： 在Vue的数据响应系统中，Dep和Watcher各自分担什么任务？ Vue的数据响应系统的核心是Object.defineproperty一定是最好的吗？有什么弊端和漏洞吗？ 一、什么是响应系统中的Watcher，它的作用是什么？ 响应系统中的W
阅读全文
摘要：最近面试总是会被问到这么一个问题：在使用vue的时候，将for循环中声明的变量i从1增加到100，然后将i展示到页面上，页面上的i是从1跳到100，还是会怎样？答案当然是只会显示100，并不会有跳转的过程。 怎么可以让页面上有从1到100显示的过程呢，就是用setTimeout或者Promise.t
阅读全文
摘要：组件通信 组件通信的方式如下： （1） props / $emit 父组件通过props向子组件传递数据，子组件通过$emit和父组件通信 1. 父组件向子组件传值 props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。 prop
阅读全文
摘要：组件化是 Vue, React 等这些框架的一个核心思想，通过把页面拆成一个个高内聚、低耦合的组件，可以极大程度提高我们的代码复用度，同时也使得项目更加易于维护。所以，本文就来分析下组件的渲染流程。我们通过下面这个例子来进行分析： <div id="demo"> <comp></comp> </di
阅读全文
摘要：写在前面 在前端中，主要涉及的基本上就是 DOM的相关操作 和 JS，我们都知道 DOM 操作是比较耗时的，那么在我们写前端相关代码的时候，如何减少不必要的 DOM 操作便成了前端优化的重要内容。 虚拟DOM(virtual DOM) 在 jQuery 时代，基本上所有的 DOM 相关的操作都是由我
阅读全文
摘要：路由的hash和history模式的区别 Vue-Router有两种模式：hash模式和history模式。默认的路由模式是hash模式。 1. hash模式 简介： hash模式是开发中默认的模式，它的URL带着一个# 特点：hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端完全没
阅读全文
摘要：什么是数据劫持? 定义： 数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。 简单地说，就是当我们 触发函数的时候 动一些手脚做点我们自己想做的事情，也就是所谓的 "劫持"操作 数据劫持的两种方案： Object.defineProperty
阅读全文
摘要：我们在开发Vue项目时候都知道，在vue开发中某些问题如果前期忽略掉，当时不会出现明显的效果，但是越向后开发越难做，而且项目做久了就会出现问题，这就是所说的蝴蝶效应，这样后期的维护成本会非常高，并且项目上线后还会影响用户体验，也会出现加载慢等一系列的性能问题，下面举一个简单的例子。 举个简单的例子
阅读全文
摘要：对Vue SSR的理解 Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 SSR也就是
阅读全文
摘要：背景 看了一些自定义指令的文章，但是探究其原理的文章却不多见，所以我决定水一篇。 如何自定义指令？ 其实关于这个问题官方文档上已经有了很好的示例的，我们先来温故一下。 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用
阅读全文
摘要：本文主要分以下两个部分对 Composition API 的原理进行解读： reactive API 原理 ref API 原理 reactive API 原理 打开源码可以找到reactive的入口，在composition-api/src/reactivity/reactive.ts，我们先从函
阅读全文
摘要：什么是 mixin ？ Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。 如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、 方法等，则可以将其编写为 mixin，并在组件中简单的引用它。 然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期
阅读全文
摘要：一、简介 vue几个核心思想： 数据驱动 组件化 虚拟dom、diff局部最优更新 源码目录介绍 Vue.js 的源码在 src 目录下，其目录结构如下。 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── serv
阅读全文
摘要：vue组件通信方式 一、props(父向子传值 自定义属性) / $emit(子向父传值 自定义事件) 父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。 1. 父组件向子组件传值(props) 下面通过一个例子说明父组件如何向子组件传递数据：在子组件articl
阅读全文
摘要：Vue3.0 和 2.0 的响应式原理区别 Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。 相关代码如下 import { mutableHandlers } from "./baseH
阅读全文
摘要：前言 在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来, 欢迎大家一起学习交流, 有更好的方法欢迎评论区指出, 后序我也将持续整理总结~ 描述 Vue 与 React 区别 说明概念: vue:是一套用于构建用户界面的渐进式
阅读全文
摘要：前言 有时候有些面试中经常会问到v-for与v-if谁的优先级高，这里就通过分析源码去解答一下这个问题。 下面的内容是在 当我们谈及v-model，我们在讨论什么?的基础上分析的，所以阅读下面内容之前可先看这篇文章。 继续从编译出发 以下面的例子出发分析： new Vue({ el:'#app',
阅读全文
摘要：过滤器的作用，如何实现一个过滤器 根据过滤器的名称，过滤器是用来过滤数据的，在Vue中使用filters来过滤数据，filters不会修改数据，而是过滤数据，改变用户看到的输出（计算属性 computed ，方法 methods 都是通过修改数据来处理数据格式的输出显示）。 使用场景： 需要格式化数
阅读全文
摘要：前言 在Vue组件库开发过程中，Vue组件之间的通信一直是一个重要的话题，虽然官方推出的 Vuex 状态管理方案可以很好的解决组件之间的通信问题，但是在组件库内部使用 Vuex 往往会比较重，本文将系统的罗列出几种不使用 Vuex，比较实用的组件间的通信方式，供大家参考。 组件之间通信的场景 在进入
阅读全文
摘要：一、computed介绍 computed 用来监控自己定义的变量，该变量在 data 内没有声明，直接在 computed 里面定义，页面上可直接使用。 //基础使用 {{msg}} <input v-model="name" /> //计算属性 computed:{ msg:function()
阅读全文
摘要：computed 的实现原理 computed 本质是一个惰性求值的观察者。 computed 内部实现了一个惰性的 watcher,也就是 computed watcher,computed watcher 不会立刻求值,同时持有一个 dep 实例。 其内部通过 this.dirty 属性标记计算
阅读全文
摘要：Vue加载流程 1.初始化的第一阶段是Vue实例也就是vm对象创建前后：首先Vue进行生命周期，事件初始化发生在beforeCreate生命周期函数前，然后进行数据监测和数据代理的初始化，也就是创建vm对象的过程，当vm对象创建完成就可以通过vm对象访问到劫持的数据，比如data中的数据，metho
阅读全文
摘要：原理性的东西就会文字较多，请耐下心来，细细品味 Vue中DOM更新机制 当你气势汹汹地使用Vue大展宏图的时候，突然发现，咦，我明明对这个数据进行更改了，但是当我获取它的时候怎么是上一次的值（本人比较懒，就不具体举例了👵） 此时，Vue就会说：“小样，这你就不懂了吧，我的DOM是异步更新的呀！！！
阅读全文
摘要：Vue 修饰符有哪些 vue中修饰符分为以下五种 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符 1. 表单修饰符 在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model 关于表单的修饰符有如下： lazy 在我们填完信息，光标离开标签的时候，才会将值
阅读全文
摘要：上周五跟着一个师姐面试一个三年工作经验的前端开发，我在一边谨慎的观摩。想着曾经我也被别人面试过，如今面试别人，感觉其实心情是一样的。 前言 工作三年的Vue使用者应该懂什么？ 为何工作几年的基础越来越弱？ 工作如何挤出时间学习？ 一道面试题 其实我们并不是要你把答案都记下来，而是把其中的思想学习到。
阅读全文
摘要：前言 在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来, 欢迎大家一起学习交流, 有更好的方法欢迎评论区指出, 后序我也将持续整理总结~ 描述 Vue 与 React 区别 说明概念: vue:是一套用于构建用户界面的渐进式
阅读全文
摘要：Vue 中 computed 和 watch 有什么区别？ 计算属性 computed： （1）支持缓存，只有依赖数据发生变化时，才会重新进行计算函数； （2）计算属性内不支持异步操作； （3）计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法； （4
阅读全文
摘要：本文主要分以下两个部分对 Composition API 的原理进行解读： reactive API 原理 ref API 原理 reactive API 原理 打开源码可以找到reactive的入口，在composition-api/src/reactivity/reactive.ts，我们先从函
阅读全文
摘要：Vue 的生命周期方法有哪些 一般在哪一步发请求 beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问 create
阅读全文
摘要：前言 在Vue组件库开发过程中，Vue组件之间的通信一直是一个重要的话题，虽然官方推出的 Vuex 状态管理方案可以很好的解决组件之间的通信问题，但是在组件库内部使用 Vuex 往往会比较重，本文将系统的罗列出几种不使用 Vuex，比较实用的组件间的通信方式，供大家参考。 组件之间通信的场景 在进入
阅读全文
摘要：vue组件通信方式 一、props(父向子传值 自定义属性) / $emit(子向父传值 自定义事件) 父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。 1. 父组件向子组件传值(props) 下面通过一个例子说明父组件如何向子组件传递数据：在子组件articl
阅读全文
摘要：我们在开发Vue项目时候都知道，在vue开发中某些问题如果前期忽略掉，当时不会出现明显的效果，但是越向后开发越难做，而且项目做久了就会出现问题，这就是所说的蝴蝶效应，这样后期的维护成本会非常高，并且项目上线后还会影响用户体验，也会出现加载慢等一系列的性能问题，下面举一个简单的例子。 举个简单的例子
阅读全文
摘要：一、简介 vue几个核心思想： 数据驱动 组件化 虚拟dom、diff局部最优更新 源码目录介绍 Vue.js 的源码在 src 目录下，其目录结构如下。 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── serv
阅读全文
摘要：前言 在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来, 欢迎大家一起学习交流, 有更好的方法欢迎评论区指出, 后序我也将持续整理总结~ 描述 Vue 与 React 区别 说明概念: vue:是一套用于构建用户界面的渐进式
阅读全文
摘要：既然Vue通过数据劫持可以精准探测数据变化，为什么还需要虚拟DOM进行diff检测差异 响应式数据变化，Vue确实可以在数据变化时，响应式系统可以立刻得知。但是如果给每个属性都添加watcher用于更新的话，会产生大量的watcher从而降低性能 而且粒度过细也得导致更新不准确的问题，所以vue采用
阅读全文
摘要：子组件可以直接改变父组件的数据吗？ 子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组件的单向数据流。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。如果这样做了，Vue 会在浏览器的控制台中发出警告。 Vue提倡单向数据流，即父级 props 的更新会流向子组件，
阅读全文
摘要：组件化是 Vue, React 等这些框架的一个核心思想，通过把页面拆成一个个高内聚、低耦合的组件，可以极大程度提高我们的代码复用度，同时也使得项目更加易于维护。所以，本文就来分析下组件的渲染流程。我们通过下面这个例子来进行分析： <div id="demo"> <comp></comp> </di
阅读全文
摘要：最近面试总是会被问到这么一个问题：在使用vue的时候，将for循环中声明的变量i从1增加到100，然后将i展示到页面上，页面上的i是从1跳到100，还是会怎样？答案当然是只会显示100，并不会有跳转的过程。 怎么可以让页面上有从1到100显示的过程呢，就是用setTimeout或者Promise.t
阅读全文
摘要：什么是数据劫持? 定义： 数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。 简单地说，就是当我们 触发函数的时候 动一些手脚做点我们自己想做的事情，也就是所谓的 "劫持"操作 数据劫持的两种方案： Object.defineProperty
阅读全文
摘要：一、computed介绍 computed 用来监控自己定义的变量，该变量在 data 内没有声明，直接在 computed 里面定义，页面上可直接使用。 //基础使用 {{msg}} <input v-model="name" /> //计算属性 computed:{ msg:function()
阅读全文
摘要：什么是 keep-alive 在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。 也就是说，keepalive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存 <
阅读全文
摘要：上周五跟着一个师姐面试一个三年工作经验的前端开发，我在一边谨慎的观摩。想着曾经我也被别人面试过，如今面试别人，感觉其实心情是一样的。 前言 工作三年的Vue使用者应该懂什么？ 为何工作几年的基础越来越弱？ 工作如何挤出时间学习？ 一道面试题 其实我们并不是要你把答案都记下来，而是把其中的思想学习到。
阅读全文
摘要：引言 在这里我先提出两个问题（文章末尾会进行解答）： 在Vue的数据响应系统中，Dep和Watcher各自分担什么任务？ Vue的数据响应系统的核心是Object.defineproperty一定是最好的吗？有什么弊端和漏洞吗？ 一、什么是响应系统中的Watcher，它的作用是什么？ 响应系统中的W
阅读全文
摘要：原理性的东西就会文字较多，请耐下心来，细细品味 Vue中DOM更新机制 当你气势汹汹地使用Vue大展宏图的时候，突然发现，咦，我明明对这个数据进行更改了，但是当我获取它的时候怎么是上一次的值（本人比较懒，就不具体举例了👵） 此时，Vue就会说：“小样，这你就不懂了吧，我的DOM是异步更新的呀！！！
阅读全文
摘要：本文主要分以下两个部分对 Composition API 的原理进行解读： reactive API 原理 ref API 原理 reactive API 原理 打开源码可以找到reactive的入口，在composition-api/src/reactivity/reactive.ts，我们先从函
阅读全文
摘要：前言 有时候有些面试中经常会问到v-for与v-if谁的优先级高，这里就通过分析源码去解答一下这个问题。 下面的内容是在 当我们谈及v-model，我们在讨论什么?的基础上分析的，所以阅读下面内容之前可先看这篇文章。 继续从编译出发 以下面的例子出发分析： new Vue({ el:'#app',
阅读全文
摘要：一、Vue3 与 Vue2 区别详述 1. 生命周期 对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Op
阅读全文
摘要：背景 看了一些自定义指令的文章，但是探究其原理的文章却不多见，所以我决定水一篇。 如何自定义指令？ 其实关于这个问题官方文档上已经有了很好的示例的，我们先来温故一下。 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用
阅读全文
摘要：Vue 视图更新原理 Vue 的视图更新原理主要涉及的是响应式相关API Object.defineProperty 的使用，它的作用是为对象的某个属性对外提供 get、set 方法，从而实现外部对该属性的读和写操作时能够被内部监听，实现后续的同步视图更新功能 一、实现响应式的核心API：Objec
阅读全文
摘要：写在前面 在前端中，主要涉及的基本上就是 DOM的相关操作 和 JS，我们都知道 DOM 操作是比较耗时的，那么在我们写前端相关代码的时候，如何减少不必要的 DOM 操作便成了前端优化的重要内容。 虚拟DOM(virtual DOM) 在 jQuery 时代，基本上所有的 DOM 相关的操作都是由我
阅读全文
