摘要: 前言 webpack 作为前端最知名的打包工具,能够把散落的模块打包成一个完整的应用,大多数的知名框架 cli 都是基于 webpack 来编写。这些 cli 为使用者预设好各种处理配置,使用多了就会觉得理所当然,也就不在意是内部是如何配置。如果脱离 cli 开发,可能就无从下手了。 最近在开发一些 阅读全文
posted @ 2020-12-18 11:04 WahFung 阅读(1213) 评论(0) 推荐(7) 编辑
摘要: 前言 指令(directive)在 vue 开发中是一项很实用的功能,指令可以绑定到某一元素或组件,使功能的颗粒度更精细。今天在翻 element-ui 的源码时,发现一个还挺实用的工具指令,跟大伙分享一下。 clickoutside 的使用及效果 该指令的源码在 src/utils 下的 clic 阅读全文
posted @ 2020-10-11 12:32 WahFung 阅读(3023) 评论(0) 推荐(4) 编辑
摘要: 前言 金九银十,又是一波跑路。趁着有空把前端基础和面试相关的知识点都系统的学习一遍,参考一些权威的书籍和优秀的文章,最后加上自己的一些理解,总结出来这篇文章。适合复习和准备面试的同学,其中的知识点包括: JavsScript 设计模式 Vue 模块化 浏览器 HTTP 前端安全 JavaScript 阅读全文
posted @ 2020-09-05 00:55 WahFung 阅读(1985) 评论(0) 推荐(10) 编辑
摘要: 前言 在性能优化上,最常见的手段就是缓存。对需要经常访问的资源进行缓存,减少请求或者是初始化的过程,从而降低时间或内存的消耗。Vue 为我们提供了缓存组件 keep-alive,它可用于路由级别或组件级别的缓存。 但其中的缓存原理你是否了解,组件缓存渲染又是如何工作。那么本文就来解析 keep-al 阅读全文
posted @ 2020-08-18 14:39 WahFung 阅读(1456) 评论(0) 推荐(4) 编辑
摘要: 前言 在 Vue 核心中除了响应式原理外,视图渲染也是重中之重。我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐。 本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组件开始,Vue 是如何构建 VNode,又是如何将 VNode 转为真实节点并挂载到页面。 挂载组件 阅读全文
posted @ 2020-08-09 16:54 WahFung 阅读(1847) 评论(3) 推荐(2) 编辑
摘要: 优雅更新props 更新 prop 在业务中是很常见的需求,但在子组件中不允许直接修改 prop,因为这种做法不符合单向数据流的原则,在开发模式下还会报出警告。因此大多数人会通过 $emit 触发自定义事件,在父组件中接收该事件的传值来更新 prop。 child.vue: export defal 阅读全文
posted @ 2020-07-22 09:11 WahFung 阅读(1386) 评论(5) 推荐(4) 编辑
摘要: 前言 异步更新是 Vue 核心实现之一,在整体流程中充当着 watcher 更新的调度者这一角色。大部分 watcher 更新都会经过它的处理,在适当时机让更新有序的执行。而 nextTick 作为异步更新的核心,也是需要学习的重点。 本文你能学习到: 异步更新的作用 nextTick原理 异步更新 阅读全文
posted @ 2020-07-13 22:25 WahFung 阅读(2927) 评论(1) 推荐(3) 编辑
摘要: 前言 watch 是由用户定义的数据监听,当监听的属性发生改变就会触发回调,这项配置在业务中是很常用。在面试时,也是必问知识点,一般会用作和 computed 进行比较。 那么本文就来带大家从源码理解 watch 的工作流程,以及依赖收集和深度监听的实现。在此之前,希望你能对响应式原理流程、依赖收集 阅读全文
posted @ 2020-06-29 20:37 WahFung 阅读(1341) 评论(5) 推荐(1) 编辑
摘要: 前言 computed 在 Vue 中是很常用的属性配置,它能够随着依赖属性的变化而变化,为我们带来很大便利。那么本文就来带大家全面理解 computed 的内部原理以及工作流程。 在这之前,希望你能够对响应式原理有一些理解,因为 computed 是基于响应式原理进行工作。如果你对响应式原理还不是 阅读全文
posted @ 2020-06-26 09:43 WahFung 阅读(1420) 评论(0) 推荐(1) 编辑
摘要: 前言 响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图。在面试中是经常考查的知识点,也是面试加分项。 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它们有助于理解流程 将流程拆分,理解其中的作用 结合以上的点,理解整体流程 文章稍长,但部分是代码,还 阅读全文
posted @ 2020-06-22 10:17 WahFung 阅读(1164) 评论(9) 推荐(3) 编辑
Live2D