听雨少年的博客

文章目录22. `v-if`和`v-for`那个优先级高23. `v-if`,`v-model`,`v-for`的实现原理是什么v-model24. `Vue`中的`slot`是如何实现的？什么时候使用它？25. `Vue.use`是干什么的？原理是什么？26. `Vue`事件修饰符有哪些？及其实现原理是什么？27. `Vue`中的 `.sync` 修饰符的作用，用法及其实现原理28. 如何理解自定义指令29. `keep-alive`平时在哪里使用？原理是什么30. 组件中写`name`选项有哪些好处及作

16. 谈谈对Vue组件化的理解组件的优点：组件的复用可以根据数据渲染对应的组件。把组件相关的内容放在一起，方便复用，方便维护。合理的规划组件，可以做到更新视图的时候是组件级别的更新，不会过于消耗性能。vue中是如何处理组件的？需要使用API，Vue.extend。根据用户传入的对象生成一个组件的构造函数。根据组件产生对应的虚拟节点。我们会在生成虚拟节点前，在组件的data中加入一个hook。(data:{hook:{init(){}}})做组件初始化，将虚拟节点转换为真实节点（组件的

文章目录HTML面经1. src和href的区别2. 对HTML语义化的理解3. DOCTYPE(⽂档类型) 的作⽤4. script标签中defer和async的区别5. 常⽤的meta标签有哪些6. HTML5有哪些更新6.1 语义化标签6.2 媒体标签6.3 表单6.4 进度条、度量器6.5 DOM查询操作 ^6.6 Web存储7. img的srcset属性的作⽤？8. ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？9. 说⼀下 web worker10. HTML5的离线储存怎么使

文章目录内置 Hooks（1）：如何保存组件状态和使用生命周期？useState：让函数组件具有维持状态的能力useEffect：执行副作用理解 Hooks 的依赖掌握 Hooks 的使用规则Hooks 只能在函数组件的顶级作用域使用使用 ESLint 插件帮助检查 Hooks 的使用小结上文：React Hooks初识：为什么会出现Hooks?内置 Hooks（1）：如何保存组件状态和使用生命周期？如果你用过基于类的组件，那么对组件的生命周期函数一定不会陌生，例如 componentDidMoun

文章目录Hooks重新思考 React 组件的本质Hooks 是如何诞生的？Hooks 带来的最大好处：逻辑复用Hooks 的另一大好处：有助于关注分离小结Hooks重新思考 React 组件的本质React 组件的模型其实很直观，就是从 Model 到 View 的映射，这里的 Model 对应到 React 中就是 state 和 props。如下图所示：在过去，我们需要处理当 Model 变化时，DOM 节点应该如何变化的细节问题。而现在， 我们只需要通过 JSX，根据 Model 的数据用

文章目录理解 React 的基本概念使用组件的方式描述 UI使用 state 和 props 管理状态理解 JSX 语法的本质使用脚手架工具创建 React 应用实战：在组件中发送请求并显示数据小结理解 React 的基本概念React 本身其实是一个非常简单的框架，要理解它的用法，无外乎就是理解下面三个概 念：组件、状态和 JSX。下面我们分别来看。使用组件的方式描述 UI在 React 中，所有的 UI 都是通过组件去描述和组织的。可以认为，React 中所有的元素都 是组件，具体而言分为两种。

文章目录函数式编程First-class Function 头等函数函数可以赋值给一个变量函数可以作为参数闭包纯函数纯函数的缓存缓存函数的实现柯里化组合pointfree容器pointed 容器函子maybeEither函子Ap函子Monad函子IO函子与副作用Task函子函数式编程function add(a,b){return a + b;}console.log(add(1,2));函数，其实是数学上的一种概念： y = f(x)函数式编程，本质上就是一直映射关系。参数是输入，返回值

文章目录7. `Vue.mixin`的使用场景和原理8. `Vue`组件data为什么必须是个函数？9. `nextTick`在哪里使用？使用原理？10. `computed`和`watch`的区别11. `Vue.set`方法是如何实现的12. `Vue`为什么需要虚拟dom13. `Vue`中`diff`算法原理14. 既然`Vue`通过数据劫持可以精准探测数据变化，为什么还需要虚拟dom进行`diff`检测差异15. 请说明`Vue`中key的作用和其原理，谈谈你对它的理解上文： 玩转Vue面试题系

文章目录`Vue`中如何检测数组变化？`Vue`中如何进行依赖收集？如何理解`vue`中模板编译原理`Vue`生命周期钩子是如何实现的生命周期的价值`Vue`的生命周期方法有哪些？一般在哪一步发送请求及其原因上文：vue面试题及其结合源码分析Vue中如何检测数组变化？vue中检测数组的变化并没有使用defineProperty，因为修改索引的情况不多（且直接使用defineProperty会浪费大量性能，如果数组一万项，我们需要拦截一万次？）所以在vue中是重写数组的变异方法来实现的响应式（函数劫持）

Vue面试题结合源码请说一下 vue响应式数据的理解Vue中如何检测数组变化？Vue中如何进行依赖收集？如何理解Vue中的模板编译原理Vue生命周期钩子是如何实现的Vue的生命周期方法有哪些？一般在哪一步发送请求及其原因Vue.mixin的使用场景和原理Vue组件data为什么必须是个函数？nextTick在哪里使用？使用原理？computed和watch的区别Vue.set方法是如何实现的Vue为什么需要虚拟domVue中diff算法原理既然Vue通过数据劫持可以精准探测数

源码阅读安装源码依赖 npm installnpm run dev是否可以打包成功代码结构：bechmarks：该目录是做性能测试的dist：最终打包的结果都放到了该目录examples：官方案例flow：类型检测（vue2使用，类似于ts，但是没有ts好用）packages：放的都是一些源代码包，模块。（vue源码中包含了weex）scripts：所有打包的脚本都放在这里scr：源代码目录scr目录：compiler：模板编译core：vue2核心代码包platfor

实现组件Vue中，一般一个项目只有一个根组件，也就是 new Vue产生的app。但是一个页面不可能只由一个组件构成，很明显我们需要实现自定义组件。vue中提供了两种自定义组件的方式：全局组件局部组件组件的使用流程：在任意一个组件中，都可以使用其他组件。当我们在一个组件中使用其他组件的时候，会先去组件内部的局部组件中找是否定义过该组件，如果定义了，则直接使用该局部组件；如果没有定义局部组件，则去全局组件中寻找（和js中的原型，原型链很像了）。所以vue内部很可能也是利用类似于继承的这种模型

diff算法diff算法：在之前的更新中，每次数据更新，在更新视图时，都是完全产生新的虚拟节点，通过新的虚拟节点生成真实节点，用新生成的真实节点替换所有的老节点。这种方法在页面元素很少的情况下性能销毁倒是无所谓，但是在页面元素特别多情况下，很明显是消耗很大性能的。哪怕我只是修改了一个dom的文本内容，也都需要重新生成一遍所有节点。（因为现在只有一个组件）第一次渲染的时候，我们会产生虚拟节点，第二次更新我们也会调用render方法产生新的虚拟节点，我们需要对比两次的vnode，找到需要更新的部分进行更

computed续上文—：有关vue源码的简单实现 实现一个属于自己的min-vue本文实现：computedwatcharray的响应式劫持计算属性：计算属性：依赖的值发生改变 才会重新执行用户的方法 计算属性需要维护一个dirty属性。而且在默认情况下，计算属性不会立刻执行，而是在用户取值的时候才会执行。计算属性使用的两种方式：computed: { /** * 计算属性：依赖的值发生改变 才会重新执行用户的方法 计算属性需要维护一个dirty属性

vue-study自己实现的mini-vue仓库建议克隆代码观看，效果更佳。实现了Vue实现了响应式数据实现了模板编译实现了ast转renderrender执行生成虚拟dom虚拟dom转真实dom渲染页面响应式数据和页面渲染结合 数据改变可自动更新视图实现同步更新数据，异步更新视图优雅降级实现了mixin，目前只支持生命周期的合并代码中注释很多，觉得不习惯的可以一边看一边删除多余的注释。vue的常见源码实现rollup环境搭建安装rollup及其插件npm i

JavaScript数据类型检测对于确定一个js变量的类型，我们大概都知道几种方式。对于弱语言来说，检测其正确的类型是一件不是特别容易的事情。那么我们有几种方式来检查一个js变量的类型？**从大的方向来说，js的数据类型分为基本数据类型和引用数据类型。**对于js的基本类型和引用类型是那些，这里就不在赘述。此外，在ES6新增的 symbol基本类型，ES7新增bigint大数类型，也是基本类型。一般获取一个js类型的方式，大概应该是四种(我目前只知道这四种)typeof **instanceo

TS版的防抖函数(严格的类型推断)export function isFunction(obj: any): obj is Function { return typeof obj === "function";}type fnType<T> = (...args: T[]) => any;type successCallbackType<T = any> = (...args: T[]) => any;type failCallbackType<T

webpack优化文章目录webpack优化代码分离认识代码分离多入口起点Entry Dependencies(入口依赖)SplitChunkschunks其他的splitChunks属性(很少手动配置)minSize和maxSizeminChunkscacheGroups默认缓存组缓存组优先级maxAsyncRequestsnamechunkIdsoptimization. runtimeChunk动态导入(dynamic import)动态导入的文件命名代码懒加载魔法注释魔法注释：prefetch预获

webpack学习之旅文章目录webpack学习之旅webpack基础打包认识webpack脚手架依赖webpackwebpack是什么Vue项目加载的文件有哪些webpack使用前提webpack的安装webpack的打包方式1. 默认打包2. 创建局部的webpack3. Webpack配置文件4. 指定配置文件5. Webpack的依赖图webpack打包其他文件1. css-loader的使用css-loader的使用方案内联方式CLI方式loader配置方式(重点)2. style-loader

core-js版本问题默认polyfill的时候，使用的是core-js的2版本，这是默认值，这时候可能报错。如下：此时，只需要在预设的babel配置文件中，指定core-js的版本为3.x即可。module.exports = { presets: [ [ "@babel/preset-env", { useBuiltIns: "usage", // 指定 corejs的版本 默认不指定的情况下使用的是2版本 co