w1fl1w-优快云博客

原创 8.4.1 搭建自己的SSR

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

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

原创 8.5.4 Vite实现原理

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

2020-11-20 15:54:42 319

原创 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 239

原创 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 276

原创 8.5.1 Vue3.0介绍

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

2020-11-20 15:49:26 275

原创 8.4.3 封装Vue.js组件库

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

2020-11-20 15:47:20 256

原创 8.4.2 静态站点生成

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

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

原创 8.3.4 NuxtJS综合案例

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

2020-09-24 13:35:27 939

原创 8.3.3 NuxtJS基础

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

2020-09-24 11:02:33 295

原创 8.3.2 服务器端渲染基础

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

2020-09-24 11:00:25 322

原创 8.3.1 Vuex 状态管理

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

2020-09-24 10:57:48 278

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

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

2020-08-07 14:40:19 257

原创 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 242

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

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

2020-08-07 14:31:21 687

原创 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-demo cd snabbdom-demo yarn init -y yarn add parcel-bundler //package.json script

2020-08-07 14:13:30 217

原创 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 264

原创 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 164

原创 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 171

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

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

2020-07-06 16:55:12 790

原创 6.前端工程化笔记

自动化步骤创建项目编码格式化代码校验代码风格编译/构建/打包预览/测试 Web Server/Mock Live Reloading/HMR Source Map 提交 Git Hooks Lint-staged 持续集成部署 CI/CD 自动发布 5个维度讲解前端工程化脚手架工具开发自动化构建系统模块化打包项目代码规范化自动化部署常见创建脚手架 create-react-app vue-cli angular-cli yeoman Install

2020-06-06 02:46:32 405

原创 5.JavaScript性能优化笔记

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

2020-06-06 02:45:17 201

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

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

2020-06-06 02:44:00 391

原创 3.TypeScript语言笔记

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

2020-06-06 02:43:05 180

原创 2.JavaScript异步编程笔记

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

2020-06-06 02:39:49 207

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

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

2020-06-06 02:26:45 497

w1fl1w的博客