- 博客(16)
- 收藏
- 关注
RSS订阅原创 var变量提升
概要原本只是想复习一下变量提升的知识，没想到引发了一系列知识点出来，什么执行上下文、环境记录、词法环境、变量环境。。。真滴是活到老学到老。理清执行上下文、作用域、环境记录、词法环境等概念：https://blog.csdn.net/comedyking/article/details/119722561先看下什么是变量提升变量提升 指的是 js代码执行过程中，js引擎把变量声明部分和函数声明部分提升到作用域顶端，并设置默认值undefinedshowName()console.log
2021-08-16 10:13:51
3556
原创 Vue模板编译原理详解
概要：Vue有自带编译器的版本和不带编译器的版本，即runtime +complier 和 runtime 版本。编译器的主要作用是将 .vue的模板编译为render函数，因为在开发的时候，写render函数不符合我们的开发习惯，所以我们平常开发用的都是runtime+complier的版本。而项目打包时，就将编译的工作交由webpack来执行打包编译，即打包后的项目已经是编译好的render函数，这样就不需要vue自带的编译器了，即不需要编译部分的代码，可以减少项目体积。主要源码expo.
2021-08-13 15:46:56
4193
原创 Vue异步更新过程及$nextTick原理详解
源码调试地址https://github.com/KingComedy/vue-debugger什么是异步更新在本轮宏任务内，组件内多个属性更新，或者一个属性更新多次，最终这个组件只会重新渲染一次，即组件里的dom只会做一次重新渲染 如：以下代码只会触发组件的一次更新渲染...
2021-06-08 16:03:47
991
原创 Vue-Watcher观察者源码详解
源码调试地址https://github.com/KingComedy/vue-debugger什么是WatcherWatcher是Vue中的观察者类，主要任务是：观察Vue组件中的属性，当属性更新时作相应的操作，即实例化时传入的回调函数 在Vue的对属性做响应式处理时，会收集每个属性的依赖，即每个属性所依赖的watcher，当属性更新时，通知watcher执行更新dom操作。 Watcher有三种类型的，一个是计算属性computed创建的computedWatcher，一个是侦听器wat
2021-06-08 14:39:48
1870
原创 Vue源码解析——组件更新过程
updateChildren更新子节点，即执行diff操作创建两组子节点数组的开头索引和结束索引，分别为newStartIndex,newEndIndex,oldStartIndex,oldEndIndex4个索引，通过索引获取数组中的节点进行对比 开始循环对比：(直到两个开始索引 都小于等于 两个结束索引，即oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) sameVnode对比是否相同节点，相同节点执行patc
2021-04-20 13:30:04
1355
原创 Vue源码解析——Vue初始化及首次渲染过程
源码调试地址https://github.com/KingComedy/vue-source-debuggerVue的初始化在引入的Vue的时候，定义了Vue的构造函数，以及初始化了Vue的实例方法和静态方法，总结了有以下一些比较重要的方法：初始化实例方法,主要在src\core\instance\index.js文件里_init方法（Vue实例初始化的方法） 初始化set、set、delete、$watch方法（用于监听或触发响应式更新的方法） 初始化on、on、off、once
2021-04-09 15:16:35
916
原创 简易版Vue响应式流程源码实现
Vue的响应式实现流程Vue初始化时，会把data里的所有数据通过Object.defineProperty进行数据劫持，即重写数据的get和set。所以只有初始化时的属性才有响应式，新增的属性得通过$set,才会进行响应式处理 data里的每个属性，都会有属于自己的依赖收集的实例，new Dep。属性get时，进行依赖收集，属性set时，通知所有watcher执行更新函数 对数据做响应式处理后，执行编译。当编译到指令执行dom更新时，同时创建watcher，传入更新函数 watcher初始化时
2021-03-23 15:41:22
268
原创 简易版Vuex源码实现
Vuex使用1、注册Vuex插件import Vuex from 'vuex'Vue.use(Vuex)2、创建Store实例export default new Vuex.Store({ state: { count: 0 }, mutations: { add(state, payload) { state.count += payload } }, actions: { delayAdd(context, payl
2021-03-14 13:48:22
149
原创 简易Vue-Router版源码实现
Vue-Router的两种模式Hash模式1、hash即URL中#后面的部分。 2、如果网页URL带有hash，页面会定位到id与hash一样的元素的位置，即锚点 3、hash的改变时，页面不会重新加载，会触发hashchange事件，而且也会被记录到浏览器的历史记录中 4、vue-router的hash模式，主要就是通过监听hashchange事件，根据hash值找到对应的组件进行渲染
2021-03-10 06:44:29
135
原创 JavaScript数据类型之null、undefined、boolean类型
Boolean类型类型转换1、Number类型：除了0和NaN为false,其他数值都为true,包括无穷大new Boolean(Infinity) // truenew Boolean(0) // false2、String类型： 除了空字符串为false，其他字符串都为truenew Boolean('') // falsenew Boolean('abc') // true3、null和undefined都为false4、Object类型：所有引用类型，包括基本引
2021-02-28 21:06:09
320
1
原创 JavaScript 数据类型
JavaScript 数据类型JavaScript的数据类型有8种，7种基础数据类型：Number，Boolean，String，Null，Undefined，BigInt，Symbol，还有一种引用类型Object。
2021-01-28 13:21:51
105
原创 微信h5分享图标没有展示
微信h5分享图标没有展示图标的尺寸太小，在webpack打包时被压缩成base64格式的，而微信分享的图标不支持这种格式。解决办法： 1 把图标上传到cdn上，分享的地址写 图标上传后的地址即可，或者通过接口请求图标地址也可以，这种方法也容易更换2 把图标的大小变大...
2020-12-18 11:22:09
1751
原创 记一次mpvue开发考试小程序的坑
1 需求是 题目能够左右滑动。一开始是把一道题做成组件，然后全部渲染出来。但是题目太多 有上千题，这样一次性渲染出来会导致小程序很卡，基本是几秒才会响应一次，肯定是不行的。后面用的小程序自带的 基础组件swiper，初始化的时候从缓存取出3道题放入数组变量，然后滑动的时候在重新去缓存取 相应的左右题目。举个例子，如果当前数组变量 = [题目1，题目2，题目3]，现在滑块2往滑块3 方向滑动，则数组...
2019-01-20 15:12:52
149
原创 webstorm 创建nodeJs+express+ejs项目
想自己做个微信小程序的Demo边学边写，当然就得自己写接口获取数据，又不想去搭建Java框架，于是决定简单的用nodeJS做一个自己的后台，顺便也多练习下node，因为没有去学jade还是习惯把模板引擎改为ejs的比较容易理解，并将文件后缀改为html，感觉看上比较爽哈哈。觉得以后应该回经常搭建node，所以给自己做个笔记。 1 webstrom创建nodeJs项目 ...
2018-07-10 20:17:09
2792
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人