w1fl1w-CSDN博客

原创 8.4.1 搭建自己的SSR

本文为拉勾网大前端高薪训练营第一期笔记心得体会SSR是未来前端页面必不可少的一个组成成分，掌握了Vue SSR基本上其他框架都非常类似。3-4-1 搭建自己的SSRVue SSR 介绍是什么官方文档:https://ssr.vuejs.org/Vue SSR(Vue.js Server-Side Rendering) 是 Vue.js 官方提供的一个服务端渲染(同构应用)解决方案使用它可以构建同构应用还是基于原有的 Vue.js 技术栈官方文档的解释:Vue.js 是构建客户端应

2020-11-21 00:05:21 7137 1

原创 8.5.4 Vite实现原理

本文为拉勾网大前端高薪训练营第一期笔记Vite概念Vite是一个面向现代浏览器的一个更轻、更快的web应用开发工具基于ECMAScript标准原生模块系统(ES Modules)实现Vite项目依赖Vite@vue/compiler-sfcvite指令vite servevite buildHMRVite HMR: 立即编译当前所修改的文件Webpack HMR: 会自动以这个文件为入口重写build一次，所有的涉及到的依赖也都会被加载一遍build内部是rollup，最后

2020-11-20 15:54:42 232

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

本文为拉勾网大前端高薪训练营第一期笔记Vue.js响应式Proxy对象实现属性监听多层属性嵌套，在访问属性过程中处理下一级属性默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和length属性可以作为单独的模块使用Proxy注意事项<script> 'use strict' // 问题1： set 和 deleteProperty 中需要返回布尔类型的值 // 在严格模式下，如果返回 false 的话会出现 Type E

2020-11-20 15:54:00 142

原创 8.5.2 Composition API

本文为拉勾网大前端高薪训练营第一期笔记心得体会Vue3.0的重要变动就是composition API，在查看代码方面比之前真的好太多了，感觉起来和React.js的Hook很类似。composition api举例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width

2020-11-20 15:53:10 171

原创 8.5.1 Vue3.0介绍

本文为拉勾网大前端高薪训练营第一期笔记Vue.js 3.0源码组织方式的变化采用TypeScript重写使用Monorepo管理项目结构Composition API性能提升Vitepackages目录结构compiler-core平台无关的编译器compiler-dom浏览器平台下的编译器，依赖于compiler-corecompiler-sfcsingle file component，用来编译单文件组件，依赖于compiler-core和comp

2020-11-20 15:49:26 183

原创 8.4.3 封装Vue.js组件库

本文为拉勾网大前端高薪训练营第一期笔记CDD（Component-Driven Development)自下而上从组件级别开始，到页面级别结束CDC的好处组件在最大程度被复用并行开发可视化测试组件的边界情况root: 获取根组件parent: 获取父组件children: 获取所有子组件ref：拿到组件或者domprovide&inject: 类似于react的context provider，上层定义一个provide的一些变量，下层任意一层都能inject获取

2020-11-20 15:47:20 189

原创 8.4.2 静态站点生成

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

2020-11-20 15:43:51 371 1

原创 8.3.4 NuxtJS综合案例

本文为拉勾网大前端高薪训练营第一期笔记心得体会本章节花了很多时间看和学，主要是我对Vue.js和Nuxt.js并不是特别熟悉，之前写React.js比较多，这次真的是用一个非常实战的例子来学和实践，老师在视频里基本上只是把重点给做了，还有很多页面需要自己补全功能，经过这次作业有了一次全方位的理解，硕果累累，真的推荐学的人都自己实践一下。实现的过程会遇到很多奇奇怪怪的问题，具体的问题和解决办法在本文最后，nuxtjs的报错真的不告诉是代码的哪一行真的很麻烦。还有个意外收获就是因为这次作业是需要部署到

2020-09-24 13:35:27 639

原创 8.3.3 NuxtJS基础

本文为拉勾网大前端高薪训练营第一期笔记Nuxt.js 介绍官网:https://zh.nuxtjs.org/GitHub 仓库:https://github.com/nuxt/nuxt.jsNuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，它可以帮我们轻松的实现同构应用。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有Node.js 项目中使用 Nuxt.j

2020-09-24 11:02:33 186

原创 8.3.2 服务器端渲染基础

本文为拉勾网大前端高薪训练营第一期笔记在今天看来，这种渲染模式是不合理或者说不先进的。因为在当下这种网页越来越复杂的情况下，这种模式存在很多明显的不足:应用的前后端部分完全耦合在一起，在前后端协同开发方面会有非常大的阻力;前端没有足够的发挥空间，无法充分利用现在前端生态下的一些更优秀的方案;由于内容都是在服务端动态生成的，所以服务端的压力较大;相比目前流行的 SPA 应用来说，用户体验一般;但是不得不说，在网页应用并不复杂的情况下，这种方式也是可取的。SPA单页面应用概述随着前端技术栈和

2020-09-24 11:00:25 204

原创 8.3.1 Vuex 状态管理

本文为拉勾网大前端高薪训练营第一期笔记组件内的状态管理流程Vue 最核心的两个功能:数据驱动和组件化。组件化开发给我们带来了:更快的开发效率更好的可维护性每个组件都有自己的状态、视图和行为等组成部分。new Vue({ // state data() { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // action

2020-09-24 10:57:48 191

原创 8.2.3 Vue.js 源码剖析-模板编译和组件化

本文为拉勾网大前端高薪训练营第一期笔记8.2.3 Vue.js 源码剖析-模板编译和组件化模板编译模板编译的主要目的是将模板 (template) 转换为渲染函数 (render)<div> <h1 @click="handler">title</h1> <p>some content</p></div>渲染函数 renderrender (h) { return h('div', [ h('h

2020-08-07 14:40:19 182

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

本文为拉勾网大前端高薪训练营第一期笔记8.2.2 Vue.js 源码剖析-虚拟 DOM虚拟 DOM 回顾什么是虚拟 DOM虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM，虚拟 DOM 的本质就是 JavaScript 对象，使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM，最终映射到 DOM。Vue.js 中的虚拟 DOM 借鉴了 Snabbdom，并添加了一些 Vue.js 中的特性，例如:指令和组件

2020-08-07 14:37:48 152

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

本文为拉勾网大前端高薪训练营第一期笔记8.2.1 Vue.js 源码剖析-响应式原理Vuejs 2.6 https://github.com/vuejs/vueVuejs 3.0 https://github.com/vuejs/vue-nextVue.js使用flow进行静态类型检查Vue.js源码的打包工具是RollupVue.js 源码的打包工具使用的是 Rollup，比 Webpack 轻量Webpack 把所有文件当做模块，Rollup 只处理 js 文件更适合在 Vue.js

2020-08-07 14:31:21 584

原创 8.1.4 Virtual DOM 的实现原理

本文为拉勾网大前端高薪训练营第一期笔记8.1.4 Virtual DOM 的实现原理虚拟DOM虚拟DOM就是js对象描述dom对象，成本比真实DOM低很多，因为真实DOM的属性特别多以snabbdom为例，导入时需要这样写import {init, h, thunk} from 'snabbdom'创建脚手架md snabbdom-democd snabbdom-demoyarn init -yyarn add parcel-bundler//package.jsonscript

2020-08-07 14:13:30 153

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

本文为拉勾网大前端高薪训练营第一期笔记8.1.3 模拟 Vue.js 响应式原理Vue数据驱动数据响应式数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率双向绑定数据改变，视图改变；视图改变，数据也随之改变我们可以使用v-model在表单元素上创建双向数据绑定数据驱动是Vue最独特的特性之一开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图Vue2.x数据响应式实现原理是Object.d

2020-08-07 14:09:58 171

原创 8.1.2 Vue Router原理实现

本文为拉勾网大前端高薪训练营第一期笔记8.1.2 Vue Router原理实现Vue router初始化vue的时候选择router，会自动生成router相关代码Vue.use(VueRouter)use传参如果是函数，会调用函数注册组件，如果是对象的话会调用对象的install方法import Vue from 'vue'import VueRouter from 'vue-router'import Index from '../views/Index.vue'// 1. 注册路由

2020-08-07 14:07:58 98

原创 8.1.1 Vue.js基础

Vuejs基础本文大部分Vuejs介绍来自Vuejs官方文档Vue生命周期图示单文件页面建议提前编译template，优化性能Vue.js语法和概念建议https://cn.vuejs.org/v2/guide/查看官方文档插值表达式<span>Message: {{ msg }}</span>指令指令 (Directives) 是带有 v- 前缀的特殊 attribute跟angular的ng-if很接近<p v-if="seen">现

2020-08-07 14:03:42 108

原创 7.模块化开发笔记（主要webpack）

script type=‘module’自动严格模式单独私有作用域通过CORS的方式请求外部JS模块，且必须http这种形式，不能通过文件等同于defer，延迟执行脚本import exportes module import和export都可以用as重命名import和export是传引用（变量地址），而不是传值import的不能改，是const的import a from 'a.js’不能省略.jsimport b from ‘./b/index.js’ 不能省略index.jsi

2020-07-06 16:55:12 652

原创 6.前端工程化笔记

自动化步骤创建项目编码格式化代码校验代码风格编译/构建/打包预览/测试Web Server/MockLive Reloading/HMRSource Map提交Git HooksLint-staged持续集成部署CI/CD自动发布5个维度讲解前端工程化脚手架工具开发自动化构建系统模块化打包项目代码规范化自动化部署常见创建脚手架create-react-appvue-cliangular-cliyeomanInstall

2020-06-06 02:46:32 320

原创 5.JavaScript性能优化笔记

Javascript中的垃圾对象不再被引用时对象不能从根上访问到时(不是可达对象)常见的GC算法引用计数设置引用数，判断当前引用数是否为0优点发现垃圾时立即回收最大限度减少程序卡顿，因为回收比较及时缺点无法回收循环引用的对象资源开销大标记清除分标记和清除两个阶段完成1.遍历所有对象找标记活动对象2.遍历所有对象清除没有标记对象3.回收相应的空间优点：解决了引用计数的函数里的循环引用不可回收的问题缺点：回收后地址不连续，垃圾碎片化不能

2020-06-06 02:45:17 136

原创 4.函数式编程范式笔记

函数式编程的意义随着react的流行受到越来越多的关注Vue 3也开始用函数式编程抛弃this打包过程可以更好的tree shaking过滤无用代码方便测试，方便并行处理很多库可以帮助做函数式开发，lodash、underscore、ramdaMDN first-class function函数可以存储在变量函数可以作为参数函数作为返回值函数可以存在变量const BlogController = {create(content){ return Db.create(con

2020-06-06 02:44:00 292

原创 3.TypeScript语言笔记

强类型与弱类型（类型安全）静态类型与动态类型（类型检查）强类型语言不允许有任意的隐式类型转换，弱类型允许举例‘100’-50动态类型语言里，变量是没有类型的，变量中存放的值是有类型的弱类型的问题类型异常需要等到运行时发现类型不明确，函数功能发生改变对对象索引器错误的用法强类型优势错误更早暴露代码更智能，编码更准确重构更牢靠减少不必要的类型判断使用flowyarn add flow-bin —devjs文件里首部加@flow成员加类型注释 a: numberyarn

2020-06-06 02:43:05 119

原创 2.JavaScript异步编程笔记

JavaScript执行时是单线程的，但是浏览器不是单线程的，比如内部API webapi会有别的线程执行，比如setTimeoutPromise对象的then方法会返回一个全新的Promise对象后面的then方法就是在为上一个then返回的Promise注册回调前面then方法中回调函数的返回值会作为后面then方法回调的参数如果回调中返回的是Promise，那后面then方法的回调会等待它的结束then里其实传两个回调参数，第一个onFulfilled，第二个onRejected，只是一

2020-06-06 02:39:49 122

原创 1.前端ES新特性详解笔记

let const varhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/letps:mozilla解释真的是太详细了var会提升到代码最前声明，但是不赋值let不会var会全局变量let只会在块作用域里const就是常量的let，必须在声明时赋值数组解构数组解构可以简化代码对象解构对象解构可以:anotherName换变量名模板字符串模板字符串方便拼接字符串和变量带标签的模

2020-06-06 02:26:45 387

w1fl1w的博客