01 2023 档案
摘要：最近面试总是会被问到这么一个问题：在使用vue的时候，将for循环中声明的变量i从1增加到100，然后将i展示到页面上，页面上的i是从1跳到100，还是会怎样？答案当然是只会显示100，并不会有跳转的过程。 怎么可以让页面上有从1到100显示的过程呢，就是用setTimeout或者Promise.t
阅读全文
摘要：子组件可以直接改变父组件的数据吗？ 子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组件的单向数据流。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。如果这样做了，Vue 会在浏览器的控制台中发出警告。 Vue提倡单向数据流，即父级 props 的更新会流向子组件，
阅读全文
摘要：什么是数据劫持? 定义： 数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。 简单地说，就是当我们 触发函数的时候 动一些手脚做点我们自己想做的事情，也就是所谓的 "劫持"操作 数据劫持的两种方案： Object.defineProperty
阅读全文
摘要：v-model 的原理？ 我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件： text 和 textar
阅读全文
摘要：action 与 mutation 的区别 mutation 是同步更新， $watch 严格模式下会报错 action 是异步操作，可以获取数据后调用 mutation 提交最终数据 Vue路由hash模式和history模式 1. hash模式 早期的前端路由的实现就是基于 location.h
阅读全文
摘要：背景 看了一些自定义指令的文章，但是探究其原理的文章却不多见，所以我决定水一篇。 如何自定义指令？ 其实关于这个问题官方文档上已经有了很好的示例的，我们先来温故一下。 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用
阅读全文
摘要：Vue3有了解过吗？能说说跟vue2的区别吗？ 1. 哪些变化 从上图中，我们可以概览Vue3的新特性，如下： 速度更快 体积减少 更易维护 更接近原生 更易使用 1.1 速度更快 vue3相比vue2 重写了虚拟Dom实现 编译模板的优化 更高效的组件初始化 undate性能提高1.3~2倍 SS
阅读全文
摘要：写在前面 在前端中，主要涉及的基本上就是 DOM的相关操作 和 JS，我们都知道 DOM 操作是比较耗时的，那么在我们写前端相关代码的时候，如何减少不必要的 DOM 操作便成了前端优化的重要内容。 虚拟DOM(virtual DOM) 在 jQuery 时代，基本上所有的 DOM 相关的操作都是由我
阅读全文
摘要：created和mounted的区别 created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 如何从真实DOM到虚拟DOM 涉及到Vue中的模板编译原理，
阅读全文
摘要：一、简介 vue几个核心思想： 数据驱动 组件化 虚拟dom、diff局部最优更新 源码目录介绍 Vue.js 的源码在 src 目录下，其目录结构如下。 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── serv
阅读全文
摘要：写过自定义指令吗？原理是什么 回答范例 Vue有一组默认指令，比如v-model或v-for，同时Vue也允许用户注册自定义指令来扩展Vue能力 自定义指令主要完成一些可复用低层级DOM操作 使用自定义指令分为定义、注册和使用三步： 定义自定义指令有两种方式：对象和函数形式，前者类似组件定义，有各种
阅读全文
摘要：我们在开发Vue项目时候都知道，在vue开发中某些问题如果前期忽略掉，当时不会出现明显的效果，但是越向后开发越难做，而且项目做久了就会出现问题，这就是所说的蝴蝶效应，这样后期的维护成本会非常高，并且项目上线后还会影响用户体验，也会出现加载慢等一系列的性能问题，下面举一个简单的例子。 举个简单的例子
阅读全文
摘要：能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？ （1）hash 模式的实现原理 早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站，它的
阅读全文
摘要：前言 在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来, 欢迎大家一起学习交流, 有更好的方法欢迎评论区指出, 后序我也将持续整理总结~ 描述 Vue 与 React 区别 说明概念: vue:是一套用于构建用户界面的渐进式
阅读全文
摘要：vue2.x详细 1. 分析 首先找到vue的构造函数 源码位置：src\core\instance\index.js function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vu
阅读全文
摘要：本文主要分以下两个部分对 Composition API 的原理进行解读： reactive API 原理 ref API 原理 reactive API 原理 打开源码可以找到reactive的入口，在composition-api/src/reactivity/reactive.ts，我们先从函
阅读全文
摘要：Vuex有哪几种属性？ 有五种，分别是 State、 Getter、Mutation 、Action、 Module state => 基本数据(数据源存放地) getters => 从基本数据派生出来的数据 mutations => 提交更改数据的方法，同步 actions => 像一个装饰器，包
阅读全文
摘要：前言 在Vue组件库开发过程中，Vue组件之间的通信一直是一个重要的话题，虽然官方推出的 Vuex 状态管理方案可以很好的解决组件之间的通信问题，但是在组件库内部使用 Vuex 往往会比较重，本文将系统的罗列出几种不使用 Vuex，比较实用的组件间的通信方式，供大家参考。 组件之间通信的场景 在进入
阅读全文
摘要：keep-alive 使用场景和原理 keep-alive 是 Vue 内置的一个组件， 可以实现组件缓存 ，当组件切换时不会对当前组件进行卸载。 一般结合路由和动态组件一起使用 ，用于缓存组件 提供 include 和 exclude 属性， 允许组件有条件的进行缓存 。两者都支持字符串或正则表达
阅读全文
摘要：vue组件通信方式 一、props(父向子传值 自定义属性) / $emit(子向父传值 自定义事件) 父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。 1. 父组件向子组件传值(props) 下面通过一个例子说明父组件如何向子组件传递数据：在子组件articl
阅读全文
摘要：vuex是什么？怎么使用？哪种功能场景使用它？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data 里面存放的数据是响应式的，vue 组件从 store 读取数据，若
阅读全文
摘要：Vue加载流程 1.初始化的第一阶段是Vue实例也就是vm对象创建前后：首先Vue进行生命周期，事件初始化发生在beforeCreate生命周期函数前，然后进行数据监测和数据代理的初始化，也就是创建vm对象的过程，当vm对象创建完成就可以通过vm对象访问到劫持的数据，比如data中的数据，metho
阅读全文
摘要：vue-router中如何保护路由 分析 路由保护在应用开发过程中非常重要，几乎每个应用都要做各种路由权限管理，因此相当考察使用者基本功。 体验 全局守卫： const router = createRouter({ ... }) router.beforeEach((to, from) =>
阅读全文
摘要：前言 有时候有些面试中经常会问到v-for与v-if谁的优先级高，这里就通过分析源码去解答一下这个问题。 下面的内容是在 当我们谈及v-model，我们在讨论什么?的基础上分析的，所以阅读下面内容之前可先看这篇文章。 继续从编译出发 以下面的例子出发分析： new Vue({ el:'#app',
阅读全文
