- 博客(51)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue2源码学习笔记 - 20.渲染与编译—createComponent 创建组件VNode
如上所述，函数先处理组件的构造函数，然后整理相关数据，再安装钩子函数，最后创建组件占位 vnode 对象。值得注意的是，这个 vnode 对象并不是实际渲染时 DOM 元素对应的 vnode，正如它的名字一样，它更像是用来占位的。其中的钩子函数在渲染时会创建组件实例，这个后面我们继续研究学习。...
2022-08-05 11:23:41
886
原创 Vue2源码学习笔记 - 19.渲染与编译—createElement 函数
函数主要是在调用 render 函数时创建元素的vnode。对于各种类型的子节点在调用 normalizeChildren\simpleNormalizeChildren 规范化扁平化之后存于children属性中。对于HTML\SVG 类标签直接 new VNode 创建，组件则调用 createComponent 创建。最后返回 Vnode 对象或者数组，以供后续渲染操作。...
2022-08-04 10:35:54
2306
原创 Vue2源码学习笔记 - 18.渲染与编译—Vnode
VNode 是对真实 DOM 元素和组件标签（Vue组件）元素的一个抽象，它是一个很纯粹的对象数据结构，没有包括任何操作相关方法，这些方法在其他模块中实现。它有很多属性，我们在后续学习渲染的时候会慢慢介绍。......
2022-08-03 10:22:31
436
原创 Vue2源码学习笔记 - 17.注册组件
不管是全局注册的Vue.component方法还是局部注册的options.components选项属性，它们底层都是调用的Vue.extend去继承父类（通常是Vue）创建子类构造函数，只是extend的时机不同。全局注册的组件会在Vue.options.components中存储，局部的会在Vue的对象实例vm.$options.components中存储。https。...
2022-08-02 10:00:24
360
原创 Vue2源码学习笔记 - 16.响应式原理—更新调度
在任务调度中，本质还是调用nextTick设置下一个调度任务，并在此回调函数中对由Watcher对象组成的队列排序并调用其接口方法run执行必要的操作，比如重新渲染页面和调用侦听属性的回调函数等，总体来说流程比较简单。https。...
2022-08-01 11:49:40
201
原创 Vue2源码学习笔记 - 15.响应式原理—nextTick
nextTick函数代码量不大，简而言之它就是设置一个任务（微任务优先，不支持则使用宏任务），在任务被调度执行时执行用户传入的回调函数。httpshttps。
2022-07-31 11:31:27
210
原创 Vue2源码学习笔记 - 14.响应式原理—核心本质
这节内容主要从多个不同类型的Watcher为切入点来研究学习Vue的响应式原理，虽然类型不同，但是它们的核心还是不离前面提到的那几个类和函数，比如类，等函数，这些是响应式的核心。因为前面有章节已经详细阐述过，且配有大量形象的图片说明，这节内容有些环节简要带过。如果有什么不明白的地方，请先阅读前面几节内容吧~......
2022-07-30 16:59:27
349
原创 Vue2源码学习笔记 - 13.响应式原理—Watcher 类详解
渲染函数，计算属性和侦听属性等都有需要监视变量变动的需求，Watcher正是在这种情况下应运而生，Watcher作为观察者，配合Dep一起组成响应式的核心部件。这个类代码量比较多，我们也花了很多笔墨来研究学习，我觉得这是值得的。接下来我们会把前面学的这些类串起来，学习整个响应式的核心流程与逻辑。...
2022-07-29 11:34:23
1186
原创 Vue2源码学习笔记 - 12.响应式原理—Dep 类详解
Dep类对于整个响应式功能模块是非常重要的，它与要实现响应式功能的数据对象和对象属性关联，它只在Observer类构造函数和函数中实例化，并在setter\getter方法中的特定场景下执行依赖收集（执行Dep.depend方法）和派发更新通知（执行Dep.notify方法）。Dep类代码量不大但很重要，它与其他类和模块配合完成响应式的功能，后面我们还会继续研究学习它。httpshttpshttpshttpshttpshttps。...
2022-07-28 11:49:11
2119
原创 Vue2源码学习笔记 - 11.响应式原理—Observer 类详解
如图所示，Observer类比较简单，它对数据对象做简单判断然后调用defineReactive把对象属性定义为响应式的属性。它的实例对象是与数据对象关联的，这个关联在后面我们继续会说到。httpshttpshttps。
2022-07-27 10:24:11
559
原创 Vue2源码学习笔记 - 10.响应式原理一computed与watch浅析
实例化时传入构造函数中，与此同时，还传入了Watcher的选项配置，其中user选项属性为真，这表示我们实例化了一个用户定义的观察者对象，这个后面在Watcher类详解会细说，这里我们只用知道在这个Watcher对象已经帮我们配置好了侦听属性，它在侦听到属性有变动时会主动调用配置的回调函数即可。从计算属性和侦听属性的初始化流程来看，Watcher是实现这个功能的核心，这个类我们在接下来会研究学习，同时也会继续研究学习计算属性和侦听属性与Watcher的关联与配合工作的细节。...
2022-07-26 09:54:14
326
原创 Vue2源码学习笔记 - 9.响应式原理一再看数据对象初始化
对于数据的处理，先proxy代理到vm实列上，这样用户就可以在必要的地方直接通过this.xxx的方式引用。然后调用observe函数做响应式观察处理，可以简单的理解为传入observe函数处理的对象，都具备了响应式的能力，对数据对象的属性的引用this.xxx与修改this.xxx=yyy都会触发某些处理，这个我们后续章节继续研究学习。https。...
2022-07-25 10:19:24
461
原创 Vue2源码学习笔记 - 8.响应式原理一def、proxy及defineReactive函数
这一节我们简单研究学习def、proxy和defineReactive函数的实现原理。def只是简单的给数据对象定义属性值；proxy实现了this._data.xxx到this.xxx的代理；defineReactive则实现了数据的响应式，getter中收集依赖，setter中通知依赖。它们的底层核心都是依靠调用Object.defineProperty修改配置属性的getter/setter来实现。https。...
2022-07-24 21:25:39
1152
原创 Vue2源码学习笔记 - 7.响应式原理一基础
这一节我们大概学习下响应式底层调用的核心方法Object.defineProperty和Proxy类，它们虽然不同，但是无非都是在更新和引用的时候触发特点的方法setter/getter，似乎也可以称为钩子方法，在执行这些方法时去做一些希望的操作来实现响应式。下一篇我们继续深入Vue的响应式实现。httpshttpshttpshttps。......
2022-07-23 10:04:53
379
2
原创 Vue2源码学习笔记 - 6.实例的挂载渲染
简而言之，在这个环节Vue就是把模板编译成render渲染函数，然后newWatcher实例化一个Watcher对象，在这个对象中调用updateComponent执行首次渲染。这个Watcher对象很特别，它还会在依赖的响应式数据变动时收到事件通知，然后又会去调用updateComponent重复渲染，如此反复循环不息。这个_update和_render在后面章节我们会详细研究学习，这里我们先只熟悉挂载渲染的整个流程即可。httpshttps。...
2022-07-22 11:09:45
333
原创 Vue2源码学习笔记 - 5.options选项合并
这里我们主要详细学习newVue应用实例化的选项合并策略，简而言之就是合并Vue.options与newVue(options)中的options为新的选项对象并保存在实例vm的$options属性上。合并的具体策略是函数mergeField调用strats中定义的合并函数并返回，如上图所示。组件的选项合并分了两个阶段，我们在学习组件的相关知识点时在详细介绍。https。...
2022-07-21 10:37:24
494
原创 Vue2源码学习笔记 - 4.new Vue应用实例化
在上一节我们已经学习了 Vue 的类是如何定义的，这一节我们来学习一下 Vue 的实例化，就是我们经常写的创建 Vue 应用 new Vue。我们先在这里学习应用实例化创建的大致过程，对于过程中的诸多细节，我们后续慢慢研读。从 Vue 的定义我们知道，Vue 在 new 的时候只调用了一个动态方法，那就是 _init。我们来看看这个 _init，它紧跟在定义 Vue 构造函数之后通过调用 initMixin(Vue) 被定义到 Vue 的原型上，它的源码在 /src/core/instance/init.
2022-07-20 09:38:11
302
原创 node-sass编译安装
node-sass是一个编译sass源文件为css的nodejs库，这是一个用C++写的底层库，在我们使用命令安装的时候会使用node-gyp库去编译安装，这里我大概记录下安装流程和注意事项。
2022-07-19 18:01:55
913
2
原创 Vue2源码学习笔记 - 3.Vue类的定义
在第一篇 前置准备 章节我们新建了一个 HTML 文件，里面引用并构建了一个简单的 Vue 应用。构建一个 Vue 应用是通过 new Vue 一个对象开始的，这一节我们先来看看 Vue 类是怎样定义的，以方便我们后续的学习。......
2022-07-19 16:18:42
1089
原创 Vue2源码学习笔记 - 2.构建Vue
在上一篇的 index.html 中我们引用了 /vue/dist/vue.js 来构建一个应用，这个 vue.js 是 Vue 使用 rollup 来打包生成的，在源码目录中可以根据 package.json 文件的 scripts 字段查看 Vue 的构建命令。
2022-07-18 16:46:56
278
原创 Vue2源码学习笔记 - 1.前置准备
这是Vue2源码分析学习笔记系列第一节，本笔记系列文章，我主要以 UMD 完整版的 Vue为主来学习，UMD 版可以通过 标签直接用在浏览器中，而完整版是同时包含编译器和运行时的版本，这样就便于我们直接修改代码打印一些调试信息和编译模板。...
2022-07-08 17:13:50
257
原创 Vue2函数调用流程图
整个流程图有10M左右，建议下载后 边读Vue源码，边看图；注意图片右下角的提示信息下载地址：链接: https://pan.baidu.com/s/1ZSexdLX7YJO0W14gV7QGlQ?pwd=52ce提取码: 52ce或者 githubhttps://github.com/dclnet/vue...
2022-01-12 16:00:44
214
1
原创 JS动态生成SVG对象动态设置use和属性
需求：JS动态生成SVG对象，然后动态生成use子元素并设置xlink:href属性；然后appendChild到页面DOM；这是我在使用svg制作icon图标的时候遇到的问题，就是symbol 然后svg use引用，方便制作icon；通用方法：直接外围一个div, 然后div.innerHTML = '<svg class="icon"><use xlink:href="#'+name+'"></use></svg>'这样是可以的
2021-11-30 17:28:47
2175
原创 electron安装失败electron failed to install correctly
Electron安装失败问题，重试N次还是失败，可以试试如下方法我在macOS上安装7.3.3版本，一直提示错误。npm i -D [email protected]可在执行上面命令后试着执行node node_modules/electron/install.js会真正下载安装软件包，装好就OK了， 记得提前换到淘宝的镜像参考自国外某小伙伴的提示...
2021-10-19 14:50:08
216
原创 shiny-server启动、重启、停止和自启动
shiny server是一个管理和运行shiny应用的服务软件，详情可见其官方网站 https://www.rstudio.com/products/shiny/shiny-server/systemd (RedHat 7, Ubuntu 15.04+, SLES 12+)启动sudo systemctl start shiny-server停止sudo systemctl stop shiny-server重启sudo systemctl restart shiny-s
2021-10-14 17:30:09
991
原创 R语言自定义扩张包
编写R的扩展包，包含C语言代码模块，for Windows\MacOSC语言模块部分在Windows平台上编译成 dll文件， 在macos平台上编译成 so文件参照已发布的扩展包 fastICAhttps://cran.r-project.org/web/packages/fastICA/index.html环境R: 4.0.3(windows10) \ 3.6.3(MacOS 10.15.7)Windows上还需要官方的 Rtools 工具包里面有编译器等工具...
2021-08-10 18:29:44
537
翻译 shiny教程一 -- shiny入门
Shiny是一个R软件包，可轻松从R直接构建交互式Web应用程序。本课程将使您立即开始构建Shiny应用程序。如果还未安装Shiny软件包，打开R会话窗，确保联网状态，然后运行install.packages("shiny")Shiny软件包具有11个内置示例，每个示例都演示Shiny的工作方式。 且每个都是独立的Shiny应用程序。“Hello Shiny”示例绘制了R的 faithful 数据集的直方图，并带有可配置数量的bin。 用户可以使用滑杆更改bin的数量，该应用程序将立即响应他.
2021-05-24 18:09:44
3938
原创 nodejs AsyncLocalStorage并发请求数据隔离
项目场景：nodejs koa web服务1、并发请求日志须包含traceId以便方便分析2、请求周期内用户数据隔离两种解决办法都可以AsyncLocalStorage用 AsyncLocalStorage 存储Context Request直接在request 中保存const uuid = require('uuid');const { AsyncLocalStorage } = require('async_hooks');const als = new AsyncLoca
2021-03-26 17:48:53
1197
1
原创 [Vue源码分析]Vue.extend与Vue.component的区别
版本：Vue.js v2.6.11Vue.extend与Vue.component的区别，网上搜了很多资料说的都挺好，但是心里似乎总有那么点恍惚，于是找来Vue的源码，一探它底层的实现原理。直入主题，Vue.extend代码如下/** * Class inheritance */ Vue.extend = function (extendOptions) { extendOptions = extendOptions || {}; var S
2020-05-30 17:20:39
521
原创 客户端/electron集成Facebook登录
本文记录下我的electron客户端软件集成Facebook登录，根据Facebook的开发文档来看，其他pc等端的（c/c++/c#等）客户端软件也可以集成该登录功能使用户快速登录。所需SDK：无需； 流程概述：在客户端中使用webview类的组件库请求访问Facebook的URL，并带上必要参数，登录成功后回调跳转到特定url，客户端监听webview的URL变动，并提取其中的token...
2019-10-30 11:16:00
518
原创 electron中使用axios网络请求失败404错误
Electron5.x项目使用axios访问网络请求API，发现404报错各种百度未果，结果bing上搜到axios的issues中有类似解答；应该在electron环境下强制使用node的网络请求模块才能解决，代码如下，在使用前设置下即可正常访问const axios = require('axios');// 使用前设置axios.defaults.adapter = ...
2019-07-27 16:33:58
3420
2
原创 webpack devServer开启https(vue/cli-3.x)
版本vue/cli-3.xwebpack devServer开启HTTPS；注意https参数为true，port 同时为443；端口为80或者443，在Mac或者Linux系统上启动时记得加sudo, 如 sudo npm run serve如果要用域名访问的话，host设为 0.0.0.0 然后改下hosts域名指向127.0.0.1就行了...
2019-07-17 15:51:11
9533
原创 近期前端开发总结之架构与代码规范
近期做了一些项目，h5、web、小程序都有，胡言乱语几句总结1、关于组件设计因为是维护的老代码，引发了这个思考，比如这个上传功能的按钮，旧的遗留代码是这个按钮，以及上传功能（包括各种渠道：不同地区，不同端的业务逻辑）以及上传后的结果展示，都放在一个vue组件里面，然后代码一千多行（代码我就不展示了，商用代码），我看到这代码的时候我内心是比较崩溃的，万一产品改了上传按钮的样式和位置，还有...
2019-04-22 15:58:30
211
原创 华为自带浏览器虚拟导航栏导致页面按钮响应错位问题
华为自带浏览器，我遇到的是华为华为 nove 3e，自带浏览器，见图问题描述： 在vue项目中，进入个人中心页面（如图1），然后进入其他页面-会员开通（如图2），然后上滑该页面，使头部导航栏上缩隐藏，底部虚拟导航栏也隐藏（如图3），然后再返回个人中心，这样就会出现个人中心头部部分区域被隐藏，页面可点击元素的错位（如图4）图1图2图3图4 这应该是浏览器在隐藏上下的虚拟按钮栏之后，对...
2018-11-20 19:18:55
3269
1
原创 wordpress函数wp_http_validate_url畸形IP绕过验证SSRF漏洞
阿里云提示：wordpress /wp-includes/http.php文件中的wp_http_validate_url函数对输入IP验证不当，导致黑客可构造类似于012.10.10.10这样的畸形IP绕过验证，进行SSRF；修复方法：http.php 540行preg_match('#^(([1-9]?\d|1\d\d|25[0-5]|2[0-4]\d)\.){3}([1-9]?...
2018-08-20 12:28:39
12520
1
原创 swiper在vue项目中loop循环轮播失效
长话短说，在vue(2.5.x)中使用swiper(4.3.3)，轮播加了autoplay和loop、observer、observeParents等参数还是很诡异的无法循环轮播；那么可以这样写代码试试：this.$api.queryImages().then((resp) => { if(resp && resp.data.resultCode == "0"...
2018-07-07 15:44:31
12689
3
原创 字节转其他单位的两种不同方法
字节转KB、MB、GB等单位是比较常用的方法了，以下两个函数代码思路来自知乎，仅供学习参考。未优化版：function byteFormat(value, precision) { var suffixes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; var factor = Math.pow(10, precision...
2018-06-12 15:54:58
179
原创 swiper使用和修改子项两个注意事项
swiper是一个滑动轮播的库，使用方便，功能强大，这自不必多说；1、使用注意事项：在使用swiper的地方的父div不能是display: none; 因为这会影响swiper的初始化；解决：比如在弹出层使用滑动轮播展示图片，正如上所说，初始化swiper前记得先显示弹出框（先display: block）2、修改子项注意事项：直接删除增加swiper-slide轮播子项导致轮播页数错误，轮播到...
2018-05-23 16:47:51
1476
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人