自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(22)
  • 收藏
  • 关注

原创 Vue 源码分析step_3-new Vue 之前发生了什么?

我们采用 HTML 模板的方式,引入带编译器的vue.js<script src="./vue.js"></script><div id="app"></div>我们先不调用 new Vue,只是引入 vue,看看会发生什么?在 vue 源码中,我们看到文件中执行了一系列方法// 给 Vue 原型挂载_init 方法initMixin(Vue)// 给 Vue 原型挂载$data $props $set $delete $watc

2020-09-26 15:30:34 23

原创 Vue 源码分析step_3-watch 和 computed

watch 的实现 Vue.prototype.$watch = function ( expOrFn, cb, options ) { const watcher = new Watcher(vm, expOrFn, cb, options) return function unwatchFn() { watcher.teardown() } }watch 的实现其实是把第一个参数设置成了响应式对象,watcher 构造函数

2020-09-25 22:31:12 12

原创 vue 源码分析 step_2-渲染函数如何生成 Vnode并最终生成真实 DOM?

我们知道经过编译器生成的代码字符串,最终要通过渲染函数 createElement 生成 Vnode,也知道编译生成的代码字符串会有_f,_m,_v,_c...的特征export function createComponent ( Ctor: Class<Component> | Function | Object | void, data: ?VNodeData, context: Component, children: ?Array<VNode>,

2020-09-25 21:20:53 22

原创 vue 源码分析 step_2-组件更新时候,diff 的对象从何而来?

已经知道了早初始化过程中,在update 方法里面间接调用了___patch__去更新,那么在今后的更新过程中,新老 Vnode 都存在,那么这些新老的 Vnode 是从哪里来的呢?来看一下 update 的源码 Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) { ... const prevVnode = vm._vnode vm._vnode = vnode ... .

2020-09-25 17:13:36 15

原创 vue 源码分析 step_2-初始化过程中的真实 DOM 是如何生成的?

在之前的分析中,我们知道在完全版本的 Vue 中,最终会通过编译生成代码字符串。那为什么生成了代码字符串就能有真实 DOM 出呢?可能会想到因为调用了 mounted 方法,那么 mounted 方法内部又是如何生成 DOM 的呢?找到 monte的实现:/* @flow */import Vue from 'core/index'import { mountComponent } from 'core/instance/lifecycle'import { inBrowser } fro

2020-09-25 14:47:28 16

原创 vue 源码分析 step_2-编译器

在前面知道,在完全版本的 Vue 中,比运行时版本多了一个编译器。 const { render, staticRenderFns } = compileToFunctions(template, { outputSourceRange: process.env.NODE_ENV !== 'production', shouldDecodeNewlines, shouldDecodeNewlinesForHref, delimiters:

2020-09-24 22:13:41 14

原创 Vue 源码分析step_1 - 源码层面的 Vue 实例

顾及到使用 Vue 的所有场景,今后分析的版本全部为完全的 vue 版本,即带编译器的版本。在 entry-runtime-with-compiler.js 中,有这么一个代码:// 引入 Vue 构造函数供外部使用import Vue from './runtime/index'//引入编译函数import { compileToFunctions } from './compiler/index'在对 Vue 版本以及版本之间的区别有一个较浅的认识之后,接下来分析 import Vue

2020-09-21 14:38:59 13

原创 Vue 源码分析step_1 -compileToFunctions是什么?

顾及到使用 Vue 的所有场景,今后分析的版本全部为完全的 vue 版本,即带编译器的版本。在 entry-runtime-with-compiler.js 中,有这么一个代码:// 引入 Vue 构造函数供外部使用import Vue from './runtime/index'//引入编译函数import { compileToFunctions } from './compiler/index'compileToFunctions是什么?顺着引入文件的路径往下找,在源码的编译

2020-09-21 11:27:06 23

原创 Vue 源码分析step_1-import Vue 的时候发生了什么?

顾及到使用 Vue 的所有场景,今后分析的版本全部为完全的 vue 版本,即带编译器的版本。在 entry-runtime-with-compiler.js 中,有这么一个代码:// 引入 Vue 构造函数供外部使用import Vue from './runtime/index'//引入编译函数import { compileToFunctions } from './compiler/index'import Vue 的时候发生了什么?打开'./runtime/index'/*

2020-09-21 11:06:50 12

原创 vue 源码分析 step_1-runtime与runtimeWithCompiler

源码地址:vuejs/vue1.体验vue 的两种方式工程化项目中,webpack结合 vue-loader 的情况, 非工程化项目中HTML 文件中引入 CDN这两种情况对应了vue的 runtime 与runtimeWithCompiler两个版本--------------------------------------------------------------------------------------------需要发布版本时,需要运行package.json 中的n

2020-09-20 21:42:22 34

原创 开发组件库使用到的知识点

1.require.context: 一个webpack的api,通过执行require.context函数获取特定上下文。主要用来实现自动化导入模块。接受的参数 a.路径:stringb.是否遍历子目录:boolean c.regExp:匹配文件的正则important Vue from 'vue'const componentFiles = require.contex...

2019-12-17 17:45:09 62

原创 如何提pull-request

参考链接:https://www.cnblogs.com/-walker/p/7278951.html1.将开源或者公共项目fock至自己的仓库2.将fock的仓库clone至本地3.修改,push至自己的fock仓库4.提merge-request(gitLab)/pull-request(gitHub): 选择需合并的目标分支->填写留言->选择review的人。通...

2019-12-13 10:03:51 104

原创 项目经验总结 2019-12-10

1.vue-cli 3.0 创建项目之后,webpack的配置被隐藏了。当你需要覆盖原有配置时,则需要在原有根目录下,创建vue.config.js来配置自己的配置。vue.config.js会自动加载。module.exports = { /* 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath ...

2019-12-10 10:20:47 59

转载 快速删除node_modules

解决方法:使用npm的一个名为rimraf的模块进行删除官方描述:The UNIX commandrm -rffor node,即node环境下模拟unix或者linux下的rm -rf(强制删除命令) 安装(推荐全局安装):npm install -g rimraf 使用:cd xxx [the folder which includes node_modules f...

2019-04-15 17:27:19 42

原创 CSS填坑

1.图片在固定宽高的容器中自适应: max-width: amax-height: bmargin: 0 autovehicel-alin:middle2.容器宽高自适应内容: fit-content

2019-01-07 19:14:03 63

原创 VUE开发中遇到的坑

1.父组件监听不到子组件向外触发的时间,原因可能是$emit传入的事件名称只能用小写,不可以使用驼峰式命名书写2.用异步传递过来的数据做组件的初始化时候,直接用,因为存在异步问题(延时,结果需在等待过程结束之后才返回),会出现not find props或者渲染出来全部为空的情况。解决办法:在子组件内watch这个参数,用watch的newVal参数来进行渲染3.vue循环中可以直接将数组...

2019-01-07 15:58:06 633

原创 Git常用命令-lg

1.git status: 本地代码所处状态,包括修改记录,添加记录,删除记录,以及本地代码与远程代码相差多少commit版本。2.git add + <file>: 添加将要commit的文件。3.git diff + <file>: 查看修改的文件。4.git checkout + <file> : 还原被修改过的文件。5.git com...

2019-01-07 15:45:41 38

原创 输入URL+ENTER之后,页面加载行为(DNS解析)

知识储备:I.DNS缓存存在于哪里?a. 浏览器DNS缓存(chrom默认缓存60S)b. 操作系统缓存(windows下etc/lmhosts, linix下dns/...cathe)c. host文件d. 路由器缓存e. 网络供应商DNS缓存(移动、网通、电信...,又叫本地DNS服务器)f. 根域名服务器DNS缓存(根域名服务器: 用来管理互联网的主目录,全世界只...

2018-11-26 16:43:16 84

转载 js sort方法根据数组中对象的某一个属性值进行排序

链接:https://blog.csdn.net/qq_17335153/article/details/52574531 此博客转自:勇敢的豆沙包 

2018-08-06 16:45:17 4326

原创 Buffer缓冲器(2)

1.Buffer.from(array)    作用:通过array创建一个新的Buffer。         var buf6=Buffer.from([1,2,3,62]);console.log(buf6)2.Buffer.from(arrayBuffer[, byteOffset[, length]])    作用:从arrayBuffer复制一个Buffer    参数含义:array...

2018-03-01 11:14:48 925

原创 Buffer缓冲器(1)

        ES6之前,JS并没有处理二进制数据流的机制,Buffer作为NodeJS的API,可以在文件系统操作等场景处理二进制数据流:     0.Buffer类的实例类似于整数数组    1.Buffer 的大小在被创建时确定,且无法调整;    2.Buffer 类在 Node.js 中是一个全局变量,因此无需使用 require('buffer').Buffer。1.Buffer.a...

2018-02-28 17:45:55 697

原创 assert断言(没有返回值,不需要console.log,断言未通过会抛出错误,通过不会抛出错误)

1.assert(value[, message])    保证value是true就不会抛出错误2.assert.deepEqual(actual, expected[, message])表达式:1.表示测试 actual 参数与 expected 参数是否深度相等。 原始值使用相等运算符(==)比较             2.message参数是自定义的抛出错误信息。如果未设置,则抛出默认...

2018-02-28 11:36:10 3272

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除