Carlos

为天地立心,为生民立命,为往圣继绝学,为万世开太平。

前端面试总结之手写代码系列

1. 前言 在我们的面试中,如果有笔试或者机试,很有可能会让你写代码。我总结一下大概常考的知识点。 2.手写代码题目集合 1.简单版本的深拷贝 12345678910111213function deepClone (obj) { function isObject(o) { return (typeof o == 'object' || type o == 'f......

Vue 源码阅读 生命周期(三)

1. 前言 在上篇文章中,我们介绍了生命周期初始化阶段的整体工作流程,以及在该阶段都做了哪些事情。我们知道了,在该阶段会调用一些初始化函数,对Vue实例的属性、数据等进行初始化工作。那这些初始化函数都初始化了哪些东西以及都怎么初始化的呢?接下来我们就把这些初始化函数一一展开介绍,本篇文章介绍第一个初始化函数initLifecycle。 2. initLifecycle函数分析 initLif......

Vue 源码阅读 生命周期(二)

1. 前言 上篇文章中介绍了Vue实例的生命周期大致分为4个阶段,那么首先我们先从第一个阶段——初始化阶段开始入手分析。从生命周期流程图中我们可以看到,初始化阶段所做的工作也可大致分为两部分:第一部分是new Vue(),也就是创建一个Vue实例;第二部分是为创建好的Vue实例初始化一些事件、属性、响应式数据等。接下来我们就从源码角度来深入分析一下初始化阶段所做的工作及其内部原理。 2. n......

Vue 源码阅读 生命周期(一)

1. 前言 在Vue中,每个Vue实例从被创建出来到最终被销毁都会经历一个过程,就像人一样,从出生到死亡。在这一过程里会发生许许多多的事,例如设置数据监听,编译模板,组件挂载等。在Vue中,把Vue实例从被创建出来到最终被销毁的这一过程称为Vue实例的生命周期,同时,在Vue实例生命周期的不同阶段Vue还提供了不同的钩子函数,以方便用户在不同的生命周期阶段做一些额外的事情。那么,接下来的几篇......

Vue 源码阅读 深入响应式原理(三)

1. 前言 上一篇文章中我们介绍了Object数据的变化侦测方式,本篇文章我们来看一下对Array型数据的变化Vue是如何进行侦测的。 为什么Object数据和Array型数据会有两种不同的变化侦测方式? 这是因为对于Object数据我们使用的是JS提供的对象原型上的方法Object.defineProperty,而这个方法是对象原型上的,所以Array无法使用这个方法,所以我们需要对Arr......

Vue 源码阅读 深入响应式原理(二)

1. 前言 在上一篇文章中,我们知道:数据驱动视图的关键点则在于我们如何知道数据发生了变化,只要知道数据在什么时候变了,那么问题就变得迎刃而解,我们只需在数据变化的时候去通知视图更新即可。 要想知道数据什么时候被读取了或数据什么时候被改写了,其实不难,JS为我们提供了Object.defineProperty方法,通过该方法我们就可以轻松的知道数据在什么时候发生变化。 2. 使Object数......

Vue 源码阅读 深入响应式原理(一)

1. 前言 众所周知,Vue最大的特点之一就是数据驱动视图,那么什么是数据驱动视图呢?在这里,我们可以把数据理解为状态,而视图就是用户可直观看到页面。页面不可能是一成不变的,它应该是动态变化的,而它的变化也不应该是无迹可寻的,它或者是由用户操作引起的,亦或者是由后端数据变化引起的,不管它是因为什么引起的,我们统称为它的状态变了,它由前一个状态变到了后一个状态,页面也就应该随之而变化,所以我们......

阅读Vue Composition API 了解Vue3.x的设计思想(下篇)

API Reference 要看源码之前,首先要学会TypeScript(前十篇文档有Typescript学习指南),因为vue3.x 版本中+90%的代码是使用的Typescript,Vue3.x 源码地址。 ReadOnly 接收一个对象(reactive or plain)或ref并返回一个对原始对象的只读(and reactive)代理。 1234567891011121314c......

阅读Vue Composition API 了解Vue3.x的设计思想(上篇)

API Reference 要看源码之前,首先要学会TypeScript(前十篇文档有Typescript学习指南),因为vue3.x 版本中+90%的代码是使用的Typescript,Vue3.x 源码地址。 Setup 该setup功能是新的组件选项。它充当在组件内部使用Composition API的入口点。 调用时间 setup创建组件实例时,在初始道具解析后立即调用。在生命周期......

TypeScript 学习第十章 TypeScript 高级类型

高级类型 交叉类型 交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。 例如,Person & Loggable 同时是 Person 和 Loggable。 就是说这个类型的对象同时拥有了这两种类型的成员。 我们大多是在混入(mixins)或其它不适合典型面向对象模型的地方看到交叉类型的使用。 (在 JavaSc......