- 博客(50)
- 收藏
- 关注
RSS订阅原创 Vue.js 框架源码与进阶 - Vue.js 3.0 介绍
15.1 源码组织方式采用 TypeScript 的方式重写为了提升代码的可维护性，Vue 3.x 的源码全部采用 TypeScript 编写大型项目的开发都推荐使用类型化的语言，在编码的过程当中帮我们检查类型的问题使用 Monorepo 管理项目结构把独立的功能模块都提取到不同的包中，每个功能模块之间的划分明确，模块之间的依赖关系也明确每个功能模块都可以单独测试、单独发布以及单独使用packages 目录结构packages 目录下都是独立发行的包，可以独立使用
2021-03-14 18:03:06
1633
原创 三分钟分清包管理命令 -S -D -g
三分钟分清包管理命令 -S -D -gnpm-S--save 保存到生产依赖 Dependencies--save 和 -S 是一样的，-S 是 --save 简写npm 5 以前不会保存依赖信息，需要手动加 --save， npm 5 之后 npm i xxx 默认就是 --save-D--save -dev 保存到开发依赖 devDependencies--save -dev 和 - D 是一样的，-D 是 --save -dev 简写如果需要包的依赖信息保存到 devDepe
2021-03-13 13:58:27
282
原创 Mac M1 搭建 React Native 环境
Mac M1 搭建 React Native 环境环境安装可以参考对照官方文档，本文针对M1芯片目前未完全适配情况下的方案，算是临时解决方案，不具有时效性。你需要自行准备的依赖：Xcode >10、Node >v12、Npm、Yarn、ruby、git更改编译环境首先要做的是进入 访达>应用程序>实用工具>右键 终端.app 显示简介>使用Rosetta打开勾选这一点极其重要，如果你使用的为其他终端工具，请勾选此选项，有关ffi的兼容问题，这只是临时解决方案
2021-03-12 18:34:20
3524
1
原创 Vue.js 框架源码与进阶 - 封装 Vue.js 组件库
封装 Vue.js 组件库组件化开发基础概念处理组件的边界情况$attrs / $listeners组件化开发基础概念CDDCDD（Component-Driven Development）自上而下从组件级别开始，到页面级别结束先从相对完的的设计中抽象出来组件，先隔离开发组件然后再开发页面CDD的好处组件在最大程度被重用并行开发对单个组件的开发使用CDD可以让以页面级开发无法实现的方式在不同团队之间共享任务：开发相对隔离的组件可视化测试通过一些工具可以直接
2021-03-05 20:46:00
330
原创 Vue.js 框架源码与进阶 - 搭建自己的SSR
NuxtJS案例 - Realworld项目 - 文章/发布部署Vue SSR 介绍是什么使用场景如何实现 Vue SSRVue SSR 基本使用渲染一个 Vue 实例与服务器集成使用一个页面模板在模板中使用外部数据构建同构渲染 - 构建流程构建同构渲染 - 源码结构App.vueapp.jsentry-client.jsentry-server.jsserver.jsindex.template.html构建同构渲染 - 构建配置安装依赖配置文件及打包命令启动应用解析渲染流程构建同构渲染 - 构建开发模式
2021-02-26 17:34:46
367
原创 Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 文章/发布部署
NuxtJS案例 - Realworld项目 - 文章/发布部署11.5 文章11.6 发布部署11.5 文章11.6 发布部署
2021-01-13 22:51:40
391
原创 Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 首页
NuxtJS案例 - Realworld项目 - 首页11.4 首页业务介绍公共文章列表列表分页-分页参数的使用列表分页-页码处理文章标签列表优化并行异步任务标签列表链接和数据导航栏-业务介绍导航栏-展示状态处理导航栏-标签高亮及链接导航栏-用户关注的文章列表统一设置用户Token文章发布时间格式化处理文章点赞11.4 首页业务介绍公共文章列表列表分页-分页参数的使用列表分页-页码处理文章标签列表优化并行异步任务标签列表链接和数据导航栏-业务介绍导航栏-展示状态处理导航栏-标签高亮及链
2021-01-08 20:04:05
262
原创 Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 登录注册
NuxtJS案例 - Realworld项目 - 登录注册11.3 登录注册实现基本登录功能封装请求方法表单验证错误处理用户注册解析存储登录状态实现流程将登录状态存储到容器中登录状态持久化处理导航栏链接展示状态处理页面访问权限11.3 登录注册实现基本登录功能封装请求方法表单验证错误处理用户注册解析存储登录状态实现流程将登录状态存储到容器中登录状态持久化处理导航栏链接展示状态处理页面访问权限...
2021-01-05 23:15:34
479
2
原创 Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 项目初始化
NuxtJS案例 - Realworld项目 - 项目初始化11.1 案例介绍案例相关资源11.2 项目初始化创建项目导入样式资源配置布局组件导入登录注册页面导入剩余页面处理顶部导航链接处理导航链接高亮封装请求模块11.1 案例介绍案例相关资源GitHub仓库：https://github.com/gothinkster/realworld在线示例：https://demo.realworld.io/#/接口文档：https://github.com/gothinkster/realworld
2021-01-04 22:52:58
400
原创 Vue.js 框架源码与进阶 - NuxtJS 基础
NuxtJS 基础10.1 NuxtJS 介绍NuxtJS 是什么NuxtJS 特性NuxtJS 框架是如何运作的10.2 创建项目初始化 NuxtJS案例代码分支说明10.3 NuxtJS 路由基础路由路由导航动态路由嵌套路由自定义路由配置10.4 NuxtJS 视图模板布局页面10.5 NuxtJS 异步数据asyncData上下文对象10.6 NuxtJS 生命周期10.7 NuxtJS 渲染流程10.1 NuxtJS 介绍NuxtJS 是什么官网GitHub 仓库Nuxt.js 是一个
2021-01-03 21:56:25
368
原创 【面试题】详述虚拟DOM中的diff算法
详述虚拟DOM中的diff算法解题思路：首先要先讲一下虚拟DOM是如何实现的虚拟DOM是通过js语法来在内存中维护一个通过数据解构描述出来的一个模拟DOM树，当数据发生改变的时候，会先对虚拟DOM进行模拟修改，然后在通过新的虚拟DOM树与旧的虚拟DOM树来对比，而这个对比就是通过diff算法来进行的虚拟DOM最大的意义不在于性能的提升（JavaScript对象比DOM对象性能高），而在于抽象了DOM的具体实现（对DOM进行了一层抽象）接着，来看一下diff算法是如何进行比对的正常的dif
2021-01-02 23:24:57
513
1
原创 【面试题】阐述一下VUE中 eventbus 的原理
阐述一下 VUE中 eventbus 的原理解题思路：EventBus 是消息传递的一种方式，基于一个消息中心，订阅和发布消息的模式，称为发布订阅者模式。on('name', fn)订阅消息，name: 订阅的消息名称， fn: 订阅的消息emit('name', args)发布消息, name: 发布的消息名称， args: 发布的消息代码实现：class Bus { constructor () { this.callbacks = {} } $on(name,fn)
2021-01-02 23:24:21
1626
1
原创 【面试题】Vue中的双向数据绑定是如何实现的？
Vue中的双向数据绑定是如何实现的？解题思路：Vue的双向数据绑定是通过数据劫持结合发布者订阅者模式来实现的 要实现这种双向数据绑定，必要的条件有：实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从
2021-01-02 23:23:32
638
原创 【面试题】写 React/Vue 项目时为什么要在组件中写 key，其作用是什么？
写 React/Vue 项目时为什么要在组件中写 key，其作用是什么？解题思路：key 的作用是为了在 diff 算法执行时更快的找到对应的节点，提高 diff 速度。vue 和 react 都是采用 diff 算法来对比新旧虚拟节点，从而更新节点。在 vue 的 diff 函数中。可以先了解一下 diff 算法。在交叉对比的时候，当新节点跟旧节点头尾交叉对比没有结果的时候，会根据新节点的 key 去对比旧节点数组中的 key，从而找到相应旧节点（这里对应的是一个 key => index
2021-01-02 23:22:50
175
原创 【面试题】什么是闭包, 如何使用它, 为会要使用它?
什么是闭包, 如何使用它, 为会要使用它?解题思路：闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。使用闭包的注意点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包
2021-01-02 23:22:07
154
原创 【面试题】几个有关 JS 异步执行顺序 的面试题
几个有关 JS 异步执行顺序 的面试题阅读下面代码，我们只考虑浏览器环境下的输出结果，写出它们结果打印的先后顺序，并分析出原因1 console.log("AAAA");2 setTimeout(() => console.log("BBBB"), 1000);3 const start = new Date();4 while (new Date() - start < 3000) {}5 console.log("CCCC");6 setTimeout(() => c
2021-01-02 23:21:31
1617
原创 【面试题】这个关于 var 的坑你踩过吗？
这个关于 var 的坑你踩过吗？随着 ES6 的流行，var 已经被逐渐摒弃，但是不少面试题还会问到有关 var 的问题，这里来分享一道看似简单，但极容易踩雷的 var 的面试题console.log(a)console.log(fn)var a = 1console.log(a)function fn() { console.log(a) var a = 2 console.log(a)}fn()console.log(a)可以自己先试着做一下，再来看跟标准答案有无出路：
2021-01-02 23:20:49
841
原创 【面试题】从源码来理解 fn1.call.call(fn2)
从源码来理解 fn1.call.call(fn2)问题如下：function fn1() { console.log("1")}function fn2() { console.log('2')}fn1.call(fn2)fn1.call.call(fn2)问：输出结果是多少?答案：12解题思路：对于第一个fn1.call(fn2)，相信大家不难理解，这里调用了fn1函数，虽然改变了 this 指向，但是并不影响结果我们这里着重看第二个 fn1.call.cal
2021-01-02 23:20:18
713
原创 【面试题】JavaScript不支持函数重载，但TypeScript是否支持函数重载？
JavaScript不支持函数重载，但TypeScript是否支持函数重载？解题思路：是的，TypeScript支持函数重载。但是它的实现很奇怪，当我们在TypeScript中执行函数重载时，我们只能实现一个带有多个签名的函数。//带有字符串类型参数的函数 function add(a:string, b:string): string; //带有数字类型参数的函数function add(a:number, b:number): number; //函数定义functio
2021-01-02 23:19:39
268
原创 Vue.js 框架源码与进阶 - 服务端渲染（SSR）基础
服务端渲染基础9.1 什么是渲染9.2 传统的服务端渲染9.3 客户端渲染客户端渲染 概述为什么客户端渲染 首屏渲染慢为什么客户端渲染 不利于 SEO9.4 现代化的服务端渲染（同构渲染）现代化的服务端渲染 概述通过 Nuxt 体验 同构渲染同构渲染的 SPA 应用同构渲染问题9.1 什么是渲染渲染指的是把（数据 + 模板）拼接到一起的这个事儿。例如对于我们前端开发者来说最常见的一种场景就是：请求后端接口数据，然后将数据通过模板绑定语法绑定到页面中，最终呈现给用户。这个过程就是我们这里所指的渲染。渲
2021-01-02 17:15:13
313
原创 Vue.js 框架源码与进阶 - Vuex 状态管理 - 购物车案例
Vuex 状态管理 - 购物车案例8.4 Vuex 购物车案例案例演示模板商品列表添加购物车我的购物车 - 列表我的购物车 - 统计我的购物车 - 删除购物车组件 - 购物车列表购物车组件 - 统计本地存储8.4 Vuex 购物车案例接下来我们通过一个购物车案例来演示 Vuex 在项目中的使用方式，首先把购物车的 项目模板 下载下来。案例演示模板商品列表添加购物车我的购物车 - 列表我的购物车 - 统计我的购物车 - 删除购物车组件 - 购物车列表购物车组件 - 统计本地存储
2020-12-31 19:22:16
800
原创 Vue.js 框架源码与进阶 - Vuex 状态管理
Vuex 状态管理8.1 组件通信方式组件内的状态管理流程组件间通信方式父组件给子组件传值子组件给父组件传值不相关组件传值通过 ref 获取子组件简易的状态管理方案8.2 Vuex 核心概念什么是 Vuex什么情况下使用 VuexVuex 的核心概念8.3 Vuex 基本使用StateGetterMutationActionMoudule严格模式8.4 Vuex 购物车案例案例演示模板商品列表添加购物车我的购物车 - 列表我的购物车 - 统计我的购物车 - 删除购物车组件 - 购物车列表购物车组件 - 统计
2020-12-31 17:13:20
167
原创 【大前端03-02】Vue.js 源码分析（响应式、虚拟 DOM、模板编译和组件化）
【作业】Vue.js 源码分析（响应式、虚拟 DOM、模板编译和组件化）【简答题】一、请简述 Vue 首次渲染的过程。【简答题】二、请简述 Vue 响应式原理。【简答题】三、请简述虚拟 DOM 中 Key 的作用和好处。【简答题】四、请简述 Vue 中模板编译的过程。【简答题】一、请简述 Vue 首次渲染的过程。【简答题】二、请简述 Vue 响应式原理。【简答题】三、请简述虚拟 DOM 中 Key 的作用和好处。【简答题】四、请简述 Vue 中模板编译的过程。...
2020-12-19 21:59:05
182
原创 Vue.js 框架源码与进阶 - Vue.js源码剖析 - 组件化
Vue.js源码剖析 - 组件化7.1 组件化组件注册Vue.extend调试组件注册过程组件创建过程组件的 patch 过程7.1 组件化组件化机制组件化可以让我们方便的把页面拆分成多个可重用的组件组件是独立的，系统内可重用，组件之间可以嵌套有了组件可以像搭积木一样开发网页下面我们将从源码的角度来分析 Vue 组件内部如何工作组件实例的创建过程是从上而下组件实例的挂载过程是从下而上组件注册Vue.extend调试组件注册过程组件创建过程创建根组件，首次 _render
2020-12-19 18:41:08
172
2
原创 Vue.js 框架源码与进阶 - Vue.js源码剖析 - 模板编译
响应式原理 - 模板编译和组件化6.1 模板编译6.2 模板编译过程6.1 模板编译6.2 模板编译过程
2020-12-18 23:43:39
257
1
原创 Vue.js 框架源码与进阶 - Vue.js源码剖析 - 虚拟 DOM
响应式原理 - 虚拟 DOM5.1 虚拟 DOM什么是虚拟 DOMVue.js 中的虚拟 DOM5.2 createElement5.3 update5.4 patch5.5 createElm5.6 patchVnode5.7 updateChildren5.8 总结5.1 虚拟 DOM什么是虚拟 DOM虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM，虚拟 DOM 的本质就是 JavaScript 对象，使用 JavaScript 对象来描述 DOM 的结构
2020-12-16 20:24:26
155
原创 Vue.js 框架源码与进阶 - Vue.js源码剖析 - 响应式原理（下）
响应式原理 - 实例方法/数据4.5 实例方法/数据vm.$setvm.$deletevm.$watch异步更新队列 nextTick()4.5 实例方法/数据vm.$setvm.$deletevm.$watch异步更新队列 nextTick()
2020-12-13 21:34:44
128
原创 Vue.js 框架源码与进阶 - Vue.js源码剖析 - 响应式原理（中）
响应式原理 - 数据响应式核心4.4 数据响应式核心响应式处理入口ObserverdefineReactive依赖收集数组Watcher总结4.4 数据响应式核心响应式处理入口ObserverdefineReactive依赖收集数组Watcher总结
2020-12-13 14:31:26
201
原创 Vue.js 框架源码与进阶 - Vue.js源码剖析 - 响应式原理（上）
响应式原理 - 成员初始化及首次渲染4.1 准备工作源码目录结构调试设置Vue 的不同构建版本寻找入口文件从入口开始4.2 Vue初始化初始化过程两个问题静态成员实例成员 - init实例成员 - initState4.3 Vue首次渲染首次渲染过程首次渲染总结4.1 准备工作源码目录结构调试设置Vue 的不同构建版本寻找入口文件从入口开始4.2 Vue初始化初始化过程两个问题静态成员实例成员 - init实例成员 - initState4.3 Vue首次渲染首次渲染过程首次渲
2020-12-11 19:32:40
789
原创 【大前端03-01】手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法
【作业】手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法【简答题】一、当我们点击按钮的时候动态给 data 增加的成员是否是响应式数据，如果不是的话，如何把新增成员设置成响应式数据，它的内部原理是什么。【简答题】二、请简述 Diff 算法的执行过程【编程题】一、模拟 VueRouter 的 hash 模式的实现，实现思路和 History 模式类似，把 URL 中的 # 后面的内容作为路由的地址，可以通过 hashchange 事件监听路由地址的变化。【编程题】二、在模拟 Vue
2020-11-24 19:41:34
299
原创 Vue.js 框架源码与进阶 - Virtual DOM 的实现原理
Virtual DOM 的实现原理3.1 Virtual DOM什么是 Virtual DOM为什么使用 Virtual DOMVirtual DOM 的作用Virtual DOM 库3.2 Snabbdom 基本使用Snabbdom 创建项目导入 SnabbdomSnabbdom 使用Snabbdom 中的模块3.3 Snabbdom@0.7.4 源码解析如何学习源码Snabbdom 的核心h 函数VNode 函数Vnode 渲染成真实 DOM（Snabbdom核心）init 函数patch 函数crea
2020-11-22 17:40:02
221
原创 Vue.js 框架源码与进阶 - 模拟 Vue.js 响应式原理
模拟 Vue.js 响应式原理2.1 数据驱动2.2 数据响应式的核心原理Vue 2.x - definePropertyVue 3.x - Proxy2.3 发布订阅模式和观察者模式发布/订阅模式观察者模式发布订阅/观察者模式 总结2.42.1 数据驱动在学习 Vue 的过程中，经常会看到三个词：数据响应式、双向绑定、数据驱动数据响应式数据（即数据模型）仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率双向绑定数
2020-11-21 18:48:19
217
原创 Vue.js 框架源码与进阶 - Vue-Router 原理实现
Vue.js 框架源码与进阶1.1Vue-Router 使用步骤1.1Vue-Router 使用步骤yarn add vue-router --devimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)样式案例：// router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Index fr
2020-11-20 16:23:11
351
原创 【大前端02-02】模块化开发与规范化标准
【作业】模块化开发与规范化标准【简答题】一、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。【简答题】二、Loader 和 Plugin 有哪些不同？请描述一下开发 Loader 和 Plugin 的思路。【编程题】一、使用 Webpack 实现 Vue 项目打包任务【简答题】一、Webpack 的构建流程主要有哪些环节？如果可以请尽可能详尽的描述 Webpack 打包的整个过程。【简答题】二、Loader 和 Plugin 有哪些不同？请描述一下开
2020-11-04 22:52:49
848
2
原创 前端工程化实战 - 规范化标准
前端工程化实战 - 规范化标准规范化标准概述ESLintESLint 介绍ESLint 快速上手ESLint 配置文件解析ESLint 配置注释ESLint 结合自动化工具（gulp-eslint）ESLint 结合 Webpack（eslint-loader）ESLint 检查 TypeScriptStylelintStylelint 介绍Stylelint 快速上手PrettierPrettier 介绍Prettier 快速上手ESLint 结合 Git HooksGit Hooks 介绍Git Hoo
2020-11-03 23:13:02
247
原创 前端工程化实战 - 模块化开发
前端工程化实战 - 模块化开发4.1模块化开发概述4.2模块化演变过程4.3模块化规范的出现4.1模块化开发概述模块化可以说是最重要的前端开发范式之一。随着前端应用的日益复杂，我们的项目代码已经逐渐膨胀到了不得不花大量时间管理的程度了。而模块化就是一种最主流的代码组织方式，它通过把复杂代码按照功能的不同，划分为不同的模块单独维护的这种方式提高我们的开发效率，降低维护成本。但就模块化这个词而言，它仅仅是一种思想或者说是一种理论，并不包含具体实现。早期的前端技术标准根本没有预料到前端行业会有今天这样一
2020-10-23 20:03:18
523
原创 【大前端02-01】开发脚手架及封装自动化构建工作流
【作业】开发脚手架及封装自动化构建工作流【简答题】一、谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。【简答题】二、你认为脚手架除了为我们创建项目结构，还有什么更深的意义？【编程题】一、概述脚手架实现的过程，并使用 NodeJS 完成一个自定义的小型脚手架工具【编程题】二、尝试使用 Gulp 完成项目的自动化构建【编程题】三、使用 Grunt 完成项目的自动化构建【简答题】一、谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带
2020-10-20 10:33:52
288
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人