小灰灰的空间-CSDN博客

原创 Vue 异步组件实现原理

`Vue` 作为单页面应用在加载首页时常会遇到加载缓慢的问题，导致在使用体验较差，这是因为在打包单页面应用时，页面会吧脚本打包成一个文件，这个文件包含了所有业务和非业务的代码，脚本文件过大导致渲染页面时缓慢。在进行首屏性能优化时，最常用的方法就是对于文件的拆分和代理的分离...

2022-06-23 23:38:41 1008 1

代理基础ES 6 中新增了代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。可以给目标对象定义一个关联一个代理对象，而这个代理对象抽象的目标对象来使用。在对目标对象的跟踪操作影响到目标对象之前，可以在代理对象中对这些操作进行控制创建空代理最简单的代理就是空代理，在这种情况下，在代理对象上进行的所有操作都会无障碍的传播到目标对象上。使用 Proxy 构造函数创建代理，改构造函数接收两个参数：目标对象和处理程序对象。const target = { name: "hui"}const

2022-05-19 14:22:16 337

原创 Vue 源码分析 —— 实例挂载流程

实例挂载基本流程Vue 在选项合并完成之后，进行了一系列函数调用，这些函数包括了初始化事件中心、定义渲染函数等等。在 _init 方法的最后，会对象 el选项进行判断，如果 el 选项存在，则会调用 $mount 方法挂载实例。/* istanbul ignore else */if (process.env.NODE_ENV !== 'production') { initProxy(vm)} else { vm._renderProxy = vm}// expose real se

2022-03-02 22:00:29 1004

原创 Vue源码分析 —— 选项合并策略（2）

选项合并策略分析（2）选项合并策略分析（1）生命周期钩子函数合并策略在 Vue 中，生命周期是一个很重要的知识点，我们可以在生命周期各个阶段做不同的事情。现在我们来看一下 Vue 生命周期钩子函数的合并策略LIFECYCLE_HOOKS.forEach(hook => { strats[hook] = mergeHook})function mergeHook ( parentVal: ?Array<Function>, childVal: ?Function |

2022-02-22 22:23:32 299

原创 Vue 源码分析 ——选项合并策略（1）

文章首发于个人博客小灰灰的空间选项合并策略分析在对 props inject directive 三个选项转换成统一格式之后，即开始合并选项，看一下选项合并的代码// core/instance/init.js// 开始合并选项const options = {}let keyfor (key in parent) { // 首先将父实例中的选项合并到目标对象中 mergeField(key)}for (key in child) { // 遍历 child，如果 chi.

2022-02-21 21:52:19 308

原创 Vue 源码分析 —— 规范化选项

规范化选项在 new Vue 创建 Vue 实例进行初始化时，最先进行的操作就是合并选项。在合并选项时，对于不同的场景有不同的合并策略if (options && options._isComponent) { // 在初始化子组件时，合并子组件的 options initInternalComponent(vm, options)} else { // 外部调用 new Vue 时合并 options vm.$options = mergeOptions( r

2022-02-19 21:49:54 474

原创 Vue 源码分析——new Vue 发生了什么

文章首发于个人博客小灰灰的空间。新人刚开始写博客记录生活，请多指教new Vue 过程Vue 构造器的定义function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { // 确保只能使用 new 关键字来创建 vue 实例，而不能通过函数的普通调用方式 warn('Vue is a constructor .

2022-02-15 21:54:07 362

原创 Vue源码分析——Vue的引入

文章首发于个人博客坏孩子的天空。新人刚开始写博客记录生活，请多指教Vue 的引入Vue 构造器Vue 本质上是一个函数，在函数内部保证了只能使用 new 关键字类创建 Vue 实例function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be .

2022-02-13 22:23:50 386

原创 JavaScript 中的 typeof 和 instanceof

使用 typeof 和 instanceof 都可检测变量类型，typeof 可以判断基本数据类型以及函数，但是无法判断数组、对象以及 nulltypeofvar num = 123, str = "123", flag = true, unde = undefined;console.log(typeof num);console.log(typeof str);console.log(typeof flag);console.log(typeof unde);var ...

2021-12-22 22:14:32 376

yan__shang的博客