yhzzy-CSDN博客

原创 vite简要解析以及模拟一个简单的vite

文章内容输出来源：拉勾教育前端高薪训练营Vite是一个面向现代浏览器的一个更轻、更快的Web应用开发工具它基于ECMAScript标准原生模块系统（ES Moudule）实现，解决webpack-dev-server冷启动时间过长，HMR热更新反应速度慢Vite和Vue-CLIVite使用浏览器原生支持的ES Module加载模块，在开发模式下不需要打包可以直接运行Vite在生产环境下使用Rollup打包（基于ES Module的方式打包，不需要基于babel将import转换成requ.

2021-11-03 16:50:08 1035

原创 vue3简要解析以及模拟vue3的响应式原理

Vue3.0和Vue2.0的区别源码全部采用typescript重写，使用Monorepo的组织方式把独立的功能模块都提取到不同的包中增加Composition API（组合API）使用proxy重写响应式，对编译器做了优化，重写了虚拟DOM，让渲染和update的性能大幅度提升，服务端渲染的性能也提升了2-3倍官方开发工具Vite提升了开发效率Vue3.0不同的构建版本cjsvue.cjs.jsvue.cjs.prod.jsglobalvue.global.jsvue.gl

2021-11-03 16:48:47 505

原创使用gridsome和strapi搭建静态站点

文章内容输出来源：拉勾教育前端高薪训练营什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具这个功能也叫预渲染生成的网站不需要类似PHP这样的服务器只需要放在支持静态资源的Web Server或CDN上即可运行静态网站的好处省钱，不需要专业的服务器，只要能托管静态文件的空间即可快速，不经过后端服务器的处理，只传输内容安全，没有后端程序执行，自然会更安全常见的静态网站生成器Jekyll（Ruby）Hexo (Node)H.

2021-10-27 11:40:35 722

原创简析vue组件库的开发流程

动态路由基于文件的方式src/pages/user/[id].vue becomes /user/:id.src/pages/user/[id]/settings.vue becomes /user/:id/settings.

2021-10-21 14:13:57 489

原创 vue-ssr的使用

文章内容输出来源：拉勾教育前端高薪训练营简单的初始化体验安装yarn init --yesyarn add vue vue-server-renderer渲染一个 Vue 实例server.js// 第 1 步：创建一个 Vue 实例const Vue = require('vue')const app = new Vue({ template: `<div>{{ msg }}</div>`, data: { msg: 'Hello World.

2021-10-13 14:52:28 577

原创服务端渲染和客户端渲染以及服务器部署

#mermaid-svg-j3piQItacr2BWSwJ .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-j3piQItacr2BWSwJ .label text{fill:#333}#mermaid-svg-j3piQItacr2BWSwJ .node rect,#mermaid-svg-j3piQItacr

2021-09-23 13:24:40 601

原创 Vuex的使用和模拟一个Vuex

文章内容输出来源：拉勾教育前端高薪训练营什么是VuexVuex是专门为Vue.js设计的状态管理库Vuex采用集中式的方式存储需要共享的状态Vuex的作用时进行状态管理，解决复杂组件通信，数据共享Vuex集成到了devtools中，提供了time-travel时光旅行历史回滚功能什么情况下使用Vuex非必要的情况下不要使用Vuex（项目不大，组件间数据共享不多）大型的单页应用程序多个视图依赖于同一状态来自不同视图的行为需要变更同一状态Vuex核心概念Store：Vue.

2021-09-07 15:57:17 85

原创 Vue组件间的通讯方式

文章内容输出来源：拉勾教育前端高薪训练营组件内的状态管理流程state：驱动应用的数据源view：以声明方式将state映射到视图actions：响应在view上的用户输入导致的状态变化数据state绑定到视图view，当用户通过acions更改数据后，再把更改后的数据重新绑定到视图组件间的通信方式父组件给子组件传值父组件中给子组件通过相应属性传值parent<template> <div> <h1>Props Down Pa.

2021-09-07 15:55:50 52

原创 Vue组件化过程

文章内容输出来源：拉勾教育前端高薪训练营一个Vue组件就是一个拥有预定义选项的一个Vue实例一个组件可以组成页面上一个功能完备的区域，组件可以包含脚本、样式、模板组件的创建是先创建父组件再创建子组件，组件的挂载是先挂载子组件再挂载父组件注册组件export function initAssetRegisters (Vue: GlobalAPI) { /** * Create asset registration methods. */ // 遍历 ASSET_TYPES.

2021-09-03 16:38:08 163

原创 Vue中模板编译的过程

文章内容输出来源：拉勾教育前端高薪训练营模板编译的作用Vue2.x使用VNode描述视图以及各种交互，如果用户自己编写VNode需要调用h函数，书写比较复杂用户只需要编写类型HTML的代码-Vue.js模板，通过编译器将模板转换为返回VNode的render函数.vue文件会被webpack在构建的过程中通过vue-loader转换成render函数模板编译的结果<div id="app"> <h1>Vue<span>模板编译过程</spa.

2021-09-03 16:37:15 543

原创 Vue中的虚拟DOM

Vue.js 源码剖析-响应式原理、虚拟 DOM、模板编译和组件化简答题1、请简述 Vue 首次渲染的过程。带编译器版本$mount初始化，注册Vue.compile方法首先确定目标模板el（el不能是body或者html标签），如果没有传递render函数，就把template通过compilerToFunctions()编译后转换成render函数并记录到options.render中，如果传递了render，直接调用mount挂载DOM// query方法，el为DOM对象时直接返回，字

2021-09-03 15:42:27 461

原创 Vue的初始化和响应式原理剖析

-UMDCommonJSES ModuleFullvue.jsvue.common.jsvue.esm.jsRuntime-onlyvue.runtime.jsvue.runtime.common.jsvue.runtime.esm.jsFull(production)vue.min.jsRuntime-only(production)vue.runtime.min.js

2021-08-30 17:27:47 531

原创 vue的底层虚拟DOM库——snabbdom

Created with Raphaël 2.3.0我的操作确认？Dep发布者yes

2021-07-26 18:02:15 338

原创 vue中的响应式和设计模式

#mermaid-svg-BS5ktMji4gJOc8wn .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-BS5ktMji4gJOc8wn .label text{fill:#333}#mermaid-svg-BS5ktMji4gJOc8wn .node rect,#mermaid-svg-BS5ktMji4g

2021-07-26 18:00:04 1094 2

原创解析vue-router

文章内容输出来源：拉勾教育前端高薪训练营history路由模式配置history需要服务器支持单页应用中，服务端不存在http://www.testurl.com/login这样的的地址，会返回找不到该页面在服务端应该除了静态资源外都返回单页应用的index.htmlNode.js处理history模式const path = require('path')// 导入处理history模式的模块const history = require('connect-history-api-.

2021-07-26 17:57:25 157

原创 webpack4打包流程分析，实现一个简易的webpack打包器

文章内容输出来源：拉勾教育前端高薪训练营webpack打包的流程大致可以归纳成：options：通过config文件传递进来的配置参数webpack：生成Compiler实例及其他webpack初始化逻辑compiler：编译的核心桥梁，根据配置文件，通过执行webpack(options)，生成的并返回一个Compiler实例compiler（自我理解为一个编译工厂）2.1 在生成的Compiler实例上将options配置参数挂载到compiler.options，以方便将来获取配置参数.

2021-07-07 16:47:56 347

原创 webpack的事件机制底层——tapable

tapable是一种事件驱动型事件流机制，是一个类似于 Node.js 中的 EventEmitter的库，但更专注于自定义事件的触发和处理。webpack 通过 tapable 将实现与流程解耦，所有具体实现通过插件的形式存在。，其工作流程为1.实例化Hook注册事件监听2.通过Hook触发事件监听3.执行懒编译生成的可执行代码Hook的执行机制可分为同步和异步两种，其中异步又分为并行和串行两种模；Hook的钩子类型分为四种：Hook：普通钩子，监听器之间互相独立不干扰BailHook：熔断

2021-07-06 16:21:46 744

原创 webpack4打包后的代码分析

此文分析时使用的依赖包版本号如下："devDependencies": { "html-webpack-plugin": "4.5.0", "webpack": "4.44.2", "webpack-cli": "3.3.12"}webpack配置文件如下：const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { devtool:

2021-07-05 16:33:15 287

原创 webpack的配置与使用

文章内容输出来源：拉勾教育前端高薪训练营打包工具解决的是前端整体的模块化，并不单指javascript模块化模块打包工具的由来ES Modules存在环境兼容问题模块文件过多，网络请求频繁所有的前端资源都需要模块化模块打包工具的目的将开发阶段的es6+等新特性在生产阶段编译成es5将开发阶段多个分散的多个模块文件在生产阶段打包成一个bundle.js支持不同类型的资源模块打包webpack使用准备阶段安装webpack依赖$ yarn add webpack webpa.

2021-06-29 14:58:17 267

原创前端模块化的进化史，及最终形态ES Modules

文章内容输出来源：拉勾教育前端高薪训练营模块化的演变过程stage1-文件划分方式将每个功能和状态数据存放在不同的文件中，约定每个文件就是独立的模块，使用时将每个文件在html中同锅script引入缺点：所有模块都在全局范围工作，污染全局作用域，出现命名冲突，模块成员可以被修改，无法管理模块依赖关系等问题stage2-命名空间方式将每个功能和状态数据存放在不同的文件中，约定每个文件只暴露一个全局对象，所有的模块成员都挂载到这个全局对象下缺点：模块成员依然可以被修改，无法管理模块依赖关系等问.

2021-06-29 14:44:45 169

原创关于前端工程化的一些理解，以及配置gulp自动化和自定义一个前端脚手架

文章内容输出来源：拉勾教育前端高薪训练营关于前端工程化前端工程化是什么工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其以提高效率、降低成本、质量保证为目的。工程化不等于某个具体的工具，工程化是指项目整体的规划和架构，工具只是落地实施的手段。工程化主要解决的问题传统语言或语法的弊端，如需要使用ES6+的新特性，但是存在兼容问题，亦或是使用Less/Sass/PostCSS时，运行环境不能支持支持无法使用模块化/组件化，来提高项目的可维护性，但运行环境.

2021-06-29 14:24:53 226

原创脚手架工具Yeoman和Plop的简单使用

文章内容输出来源：拉勾教育前端高薪训练营YeomanYeoman常规使用步骤明确你的需求找到合适的Generator全局范围安装找到的Generator通过yo运行对应的Generator通过命令行交互填写选项生成你所需要的项目结构自带generator演示# 全局安装yeoman$ yarn global add yo# or$ npm install yo --global# 安装对应的generator$ yarn global add generator-no.

2021-06-29 13:57:02 146

原创 JS中的防抖与节流

文章内容输出来源：拉勾教育前端高薪训练营为什么需要防抖和节流在网页应用或app操作时，经常会有轮播图切换、点击操作、鼠标滚动（scroll）、调整窗口大小（resize）、敲击键盘输入匹配（keyup）等这些高频率事件，这类事件在触发时往往频率极高，如果不加以限制，往往会频繁的执行代码逻辑或频繁的修改DOM，此时就有可能造成程序的卡顿等问题。浏览器默认情况下都会有自己的监听事件间隔（4ms-6ms），但是这对于运行环境来说间隔时间往往太短，为了规避次类型的问题，我们往往会使用节流（throttle.

2021-06-29 13:04:11 175

原创 JS中的堆栈执行的一些理解，及相关优化的一些小技巧

堆栈的一些概念JS执行环境（V8引擎等）执行环境栈（ECStack，execution context stack），浏览器渲染界面时在内存中开辟的一块空间执行上下文，管理不用的区域，每个执行上下文中的代码需要执行时，进栈执行，栈底永远都有一个全局的执行上下文EC(G)VO(G)，全局变量对象无论是栈内存还是引用类型数据的堆内存，都是属于计算机内存堆栈对基本数据类型处理基本数据类型是按值进行操作基本数据类型值是存放在栈区的，不会分配16进制的内存地址，也没有开辟内存空间// 1、创

2021-06-29 12:03:42 268

原创 JS中的内存管理与垃圾回收

1.内存管理内存：由可读写单元组成，表示一片可操作空间管理：人为的去操作一片空间的申请、使用和释放内存管理：开发者主动申请空间、使用空间、释放空间管理流程：申请-使用-释放// 申请let foo// 使用foo = 1// 释放foo = null2.垃圾回收js中的垃圾js中内存管理是自动的对象不再被引用时是垃圾对象不能从根上访问到时是垃圾js中的可达对象可以访问到的对象就是可达对象（引用、作用域链）可达的标准就是从根出发是否能够被找到js中的根就可以理

2021-06-29 11:20:58 117

原创 es6+的一些新特性

1.ES6+的一些新特性1.1 let、const、var变量提升：var会产生变量提升效果，使用undefined初始化变量值，可以在声明前访问，在声明前访问输出undefined；let和const仅在自身作用域内提升，并且不会挂载到window上，但是会有TDZ暂时性死区，在声明前访问会报错，只能在声明之后访问作用域：由于var会产生变量提升，所以会有全局作用域；let和const的作用域仅限于自身声明的代码块内初始化：var和let都可以仅声明，不进行初始化值；const必须在声明的同时初

2021-06-29 00:49:44 203

原创关于近一个多月的学习心得和想法

作为一个走在奔四道路上的程序猿，不久前也陷入了各种焦虑中，觉得自己提升速度越来越慢，加班没有年轻人那种精力了，由于长期编写重复的业务代码，越来越厌倦这种节奏，曾经想一度想放弃这一行，投身祖国的基层队伍中去（考公务员），直到我遇到了拉勾教育的大前端高薪训练营，让我觉得自己还有希望，可以救一救，尤其在听完开班直播后，让我更加有信心学习下去了，焦虑症都是因为没有系统的学习，知识不成体系，技术提升慢，听完课程后，技术成体系了，核心技术能力提升迅速，走到哪里都不怕了。☺其实自己平时也经常研究一些非业务代码的东西.

2021-06-28 23:45:28 205

yhzzy的博客