猫哥不给力-CSDN博客

01 打开 a 文件，利用 read将数据保存在 buffer 暂存起来* 02 打开 b 文件，利用 write 将 buffer 中数据写入到 b 文件中*/ let buf = Buffer . alloc(10) // 01 打开制定的文件拷贝10个字节 fs . open('a.txt' , 'r' ,(err , rfd) => {// 03 打开 B 文件，用于执行数据写入操作 fs . open('b.txt' , 'w' ,(err , wfd) => {...

2022-08-31 09:26:42 432

原创 Node基础

Node 慢慢演化为一门服务端“语言”IO 是计算过程操作过程中最缓慢的环节Reactor 模式，单线程完成多线程工作Reactor 模式下实现异步IO、事件驱动Node.js 更适用于 IO 密集型高并发请求。

2022-08-22 16:41:58 211

原创 Fiber

Fiber

2022-08-15 09:57:43 230

原创 React Virtual DOM以及Diff算法

React Virtual DOM以及Diff算法

2022-08-12 09:59:31 64

原创 React基础

React基础

2022-08-11 13:43:41 106

原创 Vite实现原理

Viteweb 应用开发工具，基于 ES Modules 实现。解决 webpack-dev-server 冷启动时间过长，HMR 反应速度过慢的问题项目依赖：Vite@vue/compiler-sfc只支持 Vue.js 3.x 版本// 基本使用vite servevite build即时编译、按需编译使用 Rollup 打包使用 webpack 打包的原因：浏览器环境并不支持模块化 ——> 当代浏览器都支持模块化零散的模块文件会产生大量的 HTTP请求

2022-05-06 17:50:50 248

原创 Composition API

Composition APIvue.js 2.x 通过 new Vue() 创建实例，Vue.js 3.x 通过 createApp() 创建应用实例。const app = createApp({ data() { }})app.mount('#app') // 相当于 2.x 的$mount()setUp() 是 composition API的入口const app = createApp({ setup() { // 第一个参数： props, 它是响应式对

2022-05-06 17:49:53 146

原创 Vue.js 3.0响应式系统原理

Vue.js 3.0响应式系统原理Vue.js 响应式回顾Proxy 对象实现属性监听多层属性嵌套，在访问属性过程中处理下一级属性默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和length 属性可以作为单独的模块使用核心方法ref | toRefs | reactive | computedeffecttracktriggerProxy 对象回顾如果 target 中设置了getter, getter中的this指向 receive

2022-05-06 17:49:44 89

原创 Vue 3.0介绍

Vue3.0介绍码组织方式 Vue 3.0 的主要变化全部采用TS的方式重写独立的功能模块，都提取到包中性能大幅提升，使用 Proxy 重写了响应式数据代码使用 Vite 提升开发项目，不需要打包可直接运行代码源码组织方式：采用 TypeScript 重写使用 Monorepo 管理项目结构不同的构建版本不再构建 UMD 版本，packages/vue 中，存放了所有版本。cjsglobalbrowserbundlerComposition API 设计动机

2022-05-06 17:48:55 717

原创封装Vue.js组件库

封装Vue.js组件库常用组件库：ElementUIiView组件驱动开发 CDD（Component-Driven Development）自下而上从组件级别开始，到页面级别结束处理组件的边界情况$root : 将共享数据放入根实例，访问根实例获取数据，大部分情况使用vuex$parent / $children$children 获取的是包含多个子组件的数组$refs需要在mounted等待组件加载完毕依赖注入 provide / injec

2022-05-06 17:48:11 928

原创静态站点生成

Gridsome基础介绍Gridsome 是一个免费、开源、基于Vue.js 技术栈的静态网站生成器。官网： https://gridsome.org静态网站生成器：是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具。生成的网站不需要类似 PHP 这样的服务器，只需要放到支持静态网站的 Web Server 或 CDN 上即可运行。常见的静态网站生成器：gridsome (Node/vue)gatsby (Node/react)Jekyll (Ruby)

2022-04-25 20:37:30 1349

原创搭建自己的SSR

搭建自己的SSR一、基本使用渲染一个Vue实例在服务端把 Vue实例渲染为纯文本字符串mkdir vue-ssrcd vue-ssrnpm init -y npm install vue vue-server-renderer// server.jsconst vue = require('vue')const renderer = require('vue-server-renderer').createRenderer()const app = new Vue({ tem

2022-04-25 20:36:45 7036 1

原创 Nuxt基础

Nuxt基础NuxtJS介绍一个基于 Vue.js 生态的第三方开源服务端渲染应用框架官网： https://zh.nuxtjs.orgNuxtJS 基本使用创建新的项目已有的Node.js 服务端项目直接把 Nuxt 当作一个中间件集成到 Node Web Server中现有的Vue.js 项目非常熟悉 Nuxt.js至少 10% 的代码改动初始化 Nuxt.js 应用// 方式一：// 安装 npm init -y// 创建项目npx create-

2022-04-25 20:35:53 509

原创服务端渲染基础

SPA 单页面应用优点：用户体验好开发效率高渲染性能好可维护性好缺点：首屏渲染时间长不利于SEO借鉴了传统的服务端渲染：客户端请求一个地址服务端查询页面所需要的数据，数据库返回数据服务端将数据结合页面模板渲染为HTML，返回HTML给客户端客户端激活为SPA应用同构应用通过服务端渲染首屏直出，解决SPA应用首屏渲染慢以及不利于SEO的问题通过客户端渲染接管页面内容交互得到更好的用户体验渲染把【数据】 + 【模板】拼接到一起传统的服务端渲染

2022-04-25 20:35:34 108

原创 Vuex状态管理

组件间通信方式组件内的状态管理流程state: 驱动应用的数据源view: 以声明方式将state 映射到视图actions：响应在view 上的用户输入导致的状态变化view --> actions —> state: 单项数据流组件间通信方式父组件给子组建的传值父组件中给子组件通过相应的属性传值子组件通过 props 接收数据子组件给父组件的传值自定义事件this.$emit( ‘fn’ , data)<Child @enla

2022-04-23 18:26:48 1277

原创模板编译与组件化

模板编译介绍将模板（template）转换为渲染函数（render）自己编写vnode比较复杂，.vue文件会被webpack 在构建过程中转换成 render函数（vue-loader）。运行时编译构建时编译编译生成的函数的位置_c() : src/core/instance/render.js_m() / _v() / _s() : src/core/instance/render-helpers/index.js_m() : renderStatic_v(): cr

2022-04-23 18:26:20 1472

原创 NUXTJS

NuxtJS一、Nuxt.js是什么一个基于Vue.js生态的第三方开源服务端渲染应用框架它可以帮我们轻松的使用Vue.js技术栈构建同构应用官网：https://zh.nuxtjs.org/Github仓库：https://github.com/nuxt/nuxt.js二、Nuxt.js的使用方式初始化项目已有的Node.js服务端项目直接把Nuxt当做一个中间件集成到Node Web Server中现有的Vue.js项目非常熟悉Nuxt.js至少百分之10的代码改动

2022-03-28 20:57:24 2603

原创 Vue.js源码剖析-虚拟DOM

虚拟DOM回顾1. 什么是虚拟DOM虚拟DOM就是使用JavaScript对象描述真实DOMVue中的虚拟DOM借鉴Snabbdom，并添加了Vue的特性，例如指令和组件机制2. 为什么要使用虚拟DOM避免直接操作DOM，提高开发效率作为一个中间层可以跨平台虚拟DOM不一定可以提高性能首次渲染的时候会增加开销复杂视图情况下提升渲染性能Vue.js 中的虚拟 DOM1. h函数vm.$createElement(tag, data, children, normaliz

2022-03-09 16:54:05 474

原创 Vue.js源码剖析-响应式原理

准备工作1. Vue源码的获取项目地址：https://github.com/vuejs/vueFork一份到自己仓库，克隆到本地，可以自己写注释提交到GitHub为什么分析Vue2.6到目前为止Vue3.0的正式版还没有发布新版本发布后，现有项目不会升级到3.0，2.x还有很长的一段过渡期3.0项目地址：http://github.com/vuejs/vue-next2. 源码目录结构src|——compiler 编译相关|——core Vue核心库|——platfor

2022-03-08 16:13:11 107

原创 Virtual Dom的实现原理

Virtual DOM介绍什么是Virtual DOMVirtual DOM（虚拟DOM），是由普通的JS对象描述DOM对象，因为不是真实的DOM对象，所以叫做Virtual DOM真实的DOM成员非常非常多，所以创建一个DOM对象的成本非常高可以通过Virtual DOM来描述真实DDOM，示例：{ sel: 'div', data: {}, text: 'Hello Virtual DOM', elm: undefined, key: undefined}

2022-03-02 09:23:11 117

原创模拟Vue.js响应式原理

整体分析Vue基本结构打印Vue实例观察整体结构Vue把data中的成员注入到Vue实例，并且把data中的成员转成gettter、setter功能负责结构初始化的参数（选项）负责把data中的属性注入到Vue实例，转化成getter、setter负责调用observer监听data中的所有属性的变化负责调用compiler解析指令、插值表达式结构$options$el$data_proxyData()Observer能够对数据对象的所有属性进行监听，

2022-02-28 14:54:01 259

原创 Vue-Router原理实现

vue-router核心代码:App.vue<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/ablout">About</router-link> </div> <router-view/> /

2022-02-25 16:02:15 126

原创 webpack源码

打包后源码分析path: path.resolve(‘dist’) 为输出目录的路径对输出文件进行分析1.模块定义“./src/index.js”: //路径模块id 视为键值对(function (module, exports) {console.log(‘index.js内容’)module.exports = ‘入口文件导出内容’ //模块定义})//值是一个函数的调用//传递模块的参数打包后的文件就是一个函数自调用，当前函数调用时传入一个对象这个对象我们为了方便将

2022-02-24 15:58:01 382

原创规范化标准

规范化标准为什么要有规范化标准软件开发需要多人协同不同开发者具有不同的编码习惯和喜好不同的喜好增加项目维护成本每个项目或者团队需要明确统一的标准哪里需要规范化标准代码、文档、甚至是提交日志开发过程中人为编写的成果图代码标准化规范最为重要实施规范化的方法编码前人为的标准约定通过工具实现Lint常见的规范化实现方式ESLint 工具使用定制ESLint校验规则ESLint对TypeScript的支持ESLint结合自动化工具或者Webpack基于ESLint的衍

2022-02-21 10:19:30 80

原创 Rollup

Rollup也是一款ESModule打包器，可以将项目中的细小模块打包成整块代码，使得划分的模块可以更好的运行在浏览器环境或者是Nodejs环境。Rollup与Webpack作用非常类似，不过Rollup更为小巧。webpack结合插件可以完成前端工程化的绝大多数工作，而Rollup仅仅是一款ESM打包器，没有其他功能，例如Rollup中并不支持类似HMR这种高级特性。Rollup并不是要与Webpack全面竞争，而是提供一个充分利用ESM各项特性的高效打包器。rollup使用./src/message

2022-02-21 09:06:48 2013

空空如也

空空如也