Vue 源码解析 实例方法
数据相关 通过 stateMixin 方法中挂载到 vue 原型上 12345export function stateMixin(Vue) { Vue.prototype.$set = set; Vue.prototype.$delete = del; Vue.prototype.$watch = function (expOrFn, cb, options) {};} vm.$set 全局 Vue.set 的别名，其用法相同。对象不能是 Vue 实例，或者 Vue 实例的根数据对象 1234567891011121314151617181920212223242526272829303132333435363738394041export function set(target, key, val) { if ( process.env.NODE_ENV !== "production" && (isUndef(target) ||...
Vue 源码解析 生命周期
初始化阶段 为 Vue 实例上初始化一些属性，事件以及响应式数据 new Vue() 合并属性: mergeOptions 把 parent 和 child 这两个对象根据一些合并策略，合并成一个新对象并返回 resolveConstructorOptions: 返回 vm.constructor.options，相当于 Vue.options。 initGlobalAPI 中定义了 Vue.options 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124function Vue(options)...
Vue 源码解析 模版编译
将模板转化成供 Vue 实例在挂载时可调用的 render 函数。分为三个节点 模板解析阶段 优化阶段 代码生成阶段 123456789101112131415161718export const createCompiler = createCompilerCreator(function baseCompile( template, options) { // 模板解析阶段: 用正则等方式解析 template 模板中的指令、class、style等数据，形成AST const ast = parse(template.trim(), options); if (options.optimize !== false) { // 优化阶段: 遍历AST，找出其中的静态节点，并打上标记 optimize(ast, options); } // 代码生成阶段: 将AST转换成渲染函数 const code = generate(ast, options); return { ast, ...
Vue 源码解析 Diff
VdomVNode123456789101112131415161718192021222324252627282930313233343536373839404142export default class VNode { constructor( tag?: string, data?: VNodeData, children?: ?Array<VNode>, text?: string, elm?: Node, context?: Component, componentOptions?: VNodeComponentOptions, asyncFactory?: Function ) { this.tag = tag; /*当前节点的标签名*/ this.data = data; /*当前节点对应的对象，包含了具体的一些数据信息，是一个VNodeData类型，可以参考VNodeData类型中的数据信息*/ this.children = children;...
Vue 源码解析 双向绑定
整体流程 vue2.x 源码 Data 通过 observer 转换成了 getter/setter 的形式来追踪变化 当外界通过 Watcher 读取数据时，会触发 getter 从而将 Watcher 添加到依赖中 当数据发生了变化时，会触发 setter，从而向 Dep 中的依赖 (即 Watcher) 发送通知 Watcher 接收到通知后，向外界发送通知，变化通知到外界后可能会触发视图更新，也有可能触发用户的某个回调函数等 Observer 监测数据，给数据打上响应式标记: __ob__在 getter 中收集依赖，在 setter...
JS 模块化
演进历程无模块化 面临问题 需要在页面中加载不同的 JS: 动画、组件、格式化 多种 js 文件会被分在不同的文件中 不同的文件又被同一个模板所引用 手动拆分各文件 IIFE作用域 利用函数的块级作用域 - 隔离区 123456789const iifeModule = (() => { let count = 0; const increase = () => ++count; const reset = () => { count = 0; }; console.log(count); increase();})(); 问题 1: 独立模块本身的额外依赖，如何优化 依赖其他模块的传参型 123456789const iifeModule = ((dependencyModule1, dependencyModule2) => { let count = 0; const increase = () => ++count; const reset = ()...
Vue 简介
父子组件生命周期 父子组件的生命周期是一个嵌套的过程 渲染的过程 父 beforeCreate-> 父 created-> 父 beforeMount-> 子 beforeCreate-> 子 created-> 子 beforeMount-> 子 mounted-> 父 mounted 子组件更新过程 父 beforeUpdate-> 子 beforeUpdate-> 子 updated-> 父 updated 父组件更新过程 父 beforeUpdate-> 父 updated 销毁过程 父 beforeDestroy-> 子 beforeDestroy-> 子 destroyed-> 父 destroyed computed / watch 相同点 基于 vue 的依赖收集机制 都是被依赖的变化触发，进行改变进而进行处理计算 不同点 入和出 computed: 多入单出，多个值变化，组成一个值的变化 watch:...
node
node 简介 node.js 是⼀个 JS 的服务端运⾏环境，基于 V8，是在 JS 语⾔规范的基础上，封装了⼀些服务端的 runtime，能够简单实现⾮常多的业务功能。在 2009 年 (第一版 npm 被创建) 诞生之初是为了实现高性能的 web 服务器，再后来 node.js 慢慢演化为了一门服务端 “语言”commonjs 是一个 规范，node.js 是 cjs 的实现 引入node 作用 跨平台开发: PC web H5 RN Weex 后端开发: API, RPC 前端开发: 前端工具链 工具开发: 脚本、脚手架、命令行。 举例 压缩: UglifyJS、JSMin 管理: npm、yarn、bower 模块系统: Commonjs, ESM 模块构建: Babel、Browserify、Webpack、Gulp、Grunt 生成器: yeoman、slush、CRA、CLI node 缺陷 单线程很脆弱，但是可以通过 cluster / pm2 多核并发实现负载均衡 node 对 MongoDB、Mysql、redis 的支持比较好，对...
webpack
案例引入 基于 Module Federation 的一些微前端方案 基于 webpack-dev-server 的一些 热更新 基于 tree-Shaking, code spliting, terser / minify / uglify 的一些压缩方案 lazy import 的一些懒加载方案 Js, Json，二进制的解析、生成能力 整体流程 bundle: 由 webpack 打包出来的文件chunk: 指 webpack 在进行模块依赖分析的时候，代码分割出来的代码块module: 开发中的单个模块 输入 从文件系统中读取代码 entry: 用于定义项目的入口，Webpack 会从这些入口文件中找到所有文件 (SFC 单文件组件) context: 定义项目的执行上下文 模块递归处理 调用 Loader 转译 Module 内容，并将结果转换为 AST，从中分析出模块依赖关系，进一步递归调用模块处理过程，直到所有依赖文件都处理完毕； resolve: 用于配置模块路径的解析规则，可以帮助 webpack 更精确，更高效的找到指定模块； module:...
打包工具
gulp 流式工程化 pipeline 12345var gulp = require('gulp');gulp.src('xxx.js') // 获取流的目标 .pipe( // 途径过程编排 gulp.dest('dist/xxx.js'); // 流目的地 ) src() 获取到想要处理的流文件 1234567891011gulp.src(globs[, options]); // => stream 并非原本文件流，虚拟文件对象流 => 减少IO次数// 1. globs 文件匹配模式// 使用数组的方式匹配文件种类gulp.src(['./js/*.js', './css/*.css'])// 2. options 处理文件的配置项// options.buffer - boolean 返回buffer，使用场景大文件 => false时，返回一个抽象的stream而非文件本身// options.read -...
