- 博客(23)
- 收藏
- 关注
RSS订阅原创 React 项目配置代码提交规范 ESLint、Pretttier、Husky、CommitLint
团队开发的成员越来越多，项目都是由多个人进行开发和维护，每个人的代码书写习惯和风格又不尽相同，commit 的提交log 也是乱七八糟，为以后的开发和维护增添了很多困难，所以规范和约束在多人协作下，就显得尤为重要。本文将以React 项目为例，在项目中配置 eslint + pretttier + husky + commitLint 代码提交规范。
2024-04-07 10:16:44
1023
原创 React性能优化最佳实践
React 组件性能优化最佳实践React 组件性能优化的核心是减少渲染真实 DOM 节点的频率，减少 Virtual DOM 比对的频率。1. 组件卸载前进行清理操作在组件中为 window 注册的全局事件, 以及定时器, 在组件卸载前要清理掉, 防止组件卸载后继续执行影响应用性能.需求：开启定时器然后卸载组件，查看组件中的定时器是否还在运行。import React, { useState, useEffect } from "react"import ReactDOM from "reac
2021-09-22 14:57:09
239
原创 Vue3.0 响应式原理实现
Vue3.0 的响应式系统底层使用了 Proxy 对象实现，在初始化的时候不需要遍历所有的属性，再把属性通过 defineProperty 转化成 getter和setter，另外如果有多层属性嵌套的话，只有访问某个属性的时候才会递归处理下级的属性，所以Vue3.0中的响应式系统的性能要比Vue2 好。Vue3的响应式默认可以监听动态添加的属性，还可以监听属性的删除操作以及数组的索引和length属性的修改操作，另外，Vue3响应式系统还可以作为一个模块单独使用，接下来我们分别来实现Vue3.0中几个核心
2020-10-28 19:51:47
820
1
原创 大前端学习总结
学习体会2020.5.13 加入拉勾教育大前端高薪 1 期训练营，到今天已经是有了4个月多月的时间，相比较与以前，自己变得更加忙碌了，因为拉勾教育，基本每天下班都在学习,看视频，做笔记～～～，因为目前完成了一个大模块的学习任务，所以今晚就来总结下这一个多月以来所学习的内容。主要还是 学习了基于 Vue 深入SSR的实现、服务器部署相关、封装 Vue.js组件库，以及Vue 3.0的介绍、Vue3.0 Composition API、Vue3.0 原理剖析，课程设计到的知识体系非常多，讲师在每一个知识点上也
2020-09-29 07:47:41
804
原创 大前端学习-Vue3.0 响应式原理
Vue.js响应式回顾Proxy对象实现属性监听多层属性嵌套，在访问属性过程中处理下一级属性默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和length属性可以作为单独的模块使用核心方法reactive / ref / toRefs / computedeffecttracktriggerProxy 对象回顾'use strict'// 问题1： set 和 deleteProperty 中需要返回布尔类型的值// 在严格模式下，如果返回 f
2020-09-27 00:02:18
405
原创 大前端学习- Vue 3.0 Composition API 快速入门
文章内容输出来源 拉勾教育大前端高薪训练营本文主要围绕 Composition API 来讲解如何使用，分别是以下几个API 函数, 通过学习，可以让你可以更快上手 Composition API ，把握 Vue.js 3.0 的新特性。生命周期钩子变化reactive APItoRefs APIref APIcomputed API变化watch API变化toRefs 原理watchEffect API1、Compostion API安装Vue3.0 ，体验 crea.
2020-09-26 21:09:43
492
原创 大前端学习-Vue3.0 Composition API -TodoList 案例
文章内容输出来源 拉勾教育大前端高薪训练营本篇内容将使用 Vue3.0 Composition API 去实现一个 ToDoList 案例，通过学习，可以让我们更好的学习Vue3.0 的内容, 体会到 Vue3.0 和 2.0 的区别1、TodoList 项目结构main.js 导入了 vue 的模块，从 Vue 模块又导入了createApp 函数，导入 app组件,将app 组件挂在到div 上2、添加待办事项模版代码<header class="header"> .
2020-09-26 20:41:38
707
原创 大前端学习-Vue3.0介绍
文章内容输出来源 拉勾教育大前端高薪训练营1、Vue.js 3.0源码组织方式的变化Compositons API性能提示Vite源码组织方式源码采用 TypeScript 重写使用 Monorepo 管理项目结构packages 目录结构pageages 目录下都是独立发行的包，可以独立使用，以compiler 开头的包，它们都是和编译相关的代码compiler-core和平台无关的编译器compiler-dom 是浏览器平台的编译器， 依赖与compiler-.
2020-09-25 22:06:47
721
原创 大前端学习-Vue服务端渲染Nuxt.js
内容输出来源 拉勾教育大前端高薪训练营一、Nuxt.js是什么Nuxt.js 一个基于Vue.js生态的第三方开源服务端渲染应用框架它可以帮我们轻松的使用Vue.js技术栈构建同构应用官网GitHub仓库二、Nuxt.js的基本使用可以初始项目在已有的Node.js服务端项目或者直接把Nuxt当作一个中间件集成到Node Web Server中如果在现有的Vue.js项目上使用的话,我们需要非常熟悉Nuxt.js,除此之外呢,可能还需要至少10%的代码改动,会遇到坑。.
2020-08-07 00:43:21
401
原创 大前端学习-SPA应用的服务端渲染基础
内容输出来源,拉勾教育大前端高薪训练营 Vue.js 服务端渲染一、服务端渲染基础优点用户体验好开发效率高渲染性能好可维护性好缺点首屏渲染时间长不利于SEO解决,借鉴了传统的服务端渲染,在服务器端执行前端代码,来生成网页内容,然后将生成好的网页内容返回给客户端,客户端只需要负责展示就行了为了更好的用户体验以及页面交互，同时会在客户端将来自服务端的内容激活为一个spa应用,也就是说之后的页面内容都是由客户端来处理的同构应用通过服务端渲染首屏直出,解决首屏SPA应用.
2020-08-04 20:44:05
1961
5
原创 手写Vue-router核心原理
内容输出来源 拉勾教育大前端高薪训练营一、基本使用import Vue from 'vue'import VueRouter from 'vue-router' // 路由组件import index from '@/views/index' // 组成插件Vue.use(VueRouter)// 路由规则const routes = [ { name: 'index', path: '/', component: index} ]// 路由对象const.
2020-08-03 00:33:41
279
1
原创 大前端学习-使用Vuex实现购物车
内容输出来源 拉勾教育大前端高薪训练营最近在学习Vuex,主要是使用Vuex来实现一个购物车,如下在实现之前呢,我们来先了解以下关于Vuex的概念一.什么是VuexVuex是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件 的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到 Vue 的官方调 试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调 试功能。Vuex .
2020-08-02 21:19:21
918
原创 大前端学习-两个月的学习和体会
Hello，大家好，我是大白菜～截止到今天,我已经在 拉勾教育大前端训练营 已经学习两个月了,在学习过程中,我每天都会给自己制定计划,并且严格执行,因为有了计划才知道自己每天应该做什么,然后在去做总结。整个7月都是在学习关于Vue源码方面的知识,说实话,学习源码刚开始很枯燥,听着听着容易走神,但是自己还是在努力用心去学,不懂的就多看几遍视频,在听着视频讲解的知识点,跟着牛老师的思路走,以及跟上断点调试,一步一步操作，然后去思考,记笔记,自我总结,经过这段时间的夜以继日的折腾，现在我已经对Vue.js的源
2020-07-31 22:30:20
420
原创 大前端学习-5张图助你更好的阅读Vue源码
文章内容输出来源 拉勾教育大前端高薪训练营一、Vue模版编译入口二、Vue首次渲染过程三、Vue模版编译过程四、Vue响应式处理过程五、Vue整体过程分析
2020-07-31 22:14:29
389
原创 大前端学习-简述 Vue 响应式原理
内容输出来源 拉勾教育大前端高薪训练营Vue的响应式是从Vue的实例init()方法中开始的，在init()方法中先调用initState()初始化Vue实例的状态，在initState方法中调用了initData()， initData()是把data属性注入到Vue实例上，并且调用observe(data)将data对象转化成响应式的对象。observe是响应式的入口, 在observe(value)中，首先判断传入的参数value是否是对象，如果不是对象直接返回。再判断value对象.
2020-07-30 23:05:47
515
原创 大前端学习-Vue首次渲染过程
文章内容输出来源：拉勾教育大前端高薪训练营最近在学习Vue源码,然后主要是对Vue的首次渲染做一个总结～首先来看下图把,接下来会一步一步讲解Vue源码地址,这里主要看src目录下面的源码一、从入口文件开始定义在 src/platform/web/entry-runtime-with-compiler.js二、Vue初始化过程1.首先取出Vue的$mount,对$mount进行重写,给$mount增加新的功能// src/platform/web/entry-runtime-with-c.
2020-07-30 13:37:07
2886
1
原创 大前端-模拟Vue响应式原理,实现一个简易版Vue
先实现mini 版Vue之前,我们先来了解一些概念一、数据驱动数据驱动响应式的核心原理发布订阅模式和观察者模式数据驱动数据响应式、双向绑定、数据驱动数据响应式数据模型仅仅是普通对象的JavaScript,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率双向绑定数据改变,视图改变,数据也随之改变我们可以使用v-model在表单元素上创建双向数据绑定数据驱动是Vue最独特的特性之一开发过程中仅需要关注数据本身,不需要关系数据时如何
2020-07-28 23:37:17
334
原创 大前端学习-手写Promise源码
以下内容来自拉勾教育大前端高薪训练营 JavaScript深度剖析的一个模块的学习笔记,也加入了自己一些总结。Promise解决了什么问题Promise解决了回调地狱的问题,一层一层嵌套的代码非常不美观,它带来了两个问题,可读性问题和信任问题信任问题,在传统的异步编程中,往往会出现回调过早、回调过晚或者没有回调、回调次数过多等等一些问题Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了,Promise 将回调嵌套改成了链式调用,增加了可读性和信任问题看一个最
2020-07-25 20:20:01
261
原创 大前端学习之手摸手系列深度解锁Webpack4
该文将使用Webpack 版本4.43.0, node.js 版本 10.21,将从以下二个部分来使用webpack进行深入使用从简单的使用Webpack到深入Webpack的原理, 正在整理中…一、Webpack 是什么Webpack是一种前端构建工具, 一个静态模块打包器(module bunder).在Webpack看来, 前端所有的资源文件(js/json/css/img/less/…)都会作为模块处理它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。.
2020-07-16 22:38:31
351
原创 大前端-Vue源码分析
文章内容输出来源：拉勾教育大前端高薪训练营Vue源码解析-响应式原理笔记将会对以下三点进行总结Vue.js 的静态成员和实例成员初始过程首次渲染的过程数据响应式原理一. 准备工作Vue源码的获取项目地址 Vue源码获取Fork 一份到自己的仓库,克隆到本地,可以自己写注释提交到github为什么分析Vue2.6到目前为止 Vue3.0 的正式版本还没有发布新版本发布后,现有的项目不会升级到3.0, 2.x还有很长的一段过渡期 Vue3.0项目地址源码目录结构我们.
2020-07-12 22:56:53
1093
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人