随笔分类 -  源码

从函数式组件引发的性能思考
摘要：简介 vue函数式组件大部分人在开发过程中用到的不多，就连官方文档位置放置的也比较隐晦，但是在我们对项目做性能优化时，却是一个不错的选择。本文将对函数式组件初始化过程做一个系统性的阐述，通过本文，你将了解到以下内容： 什么是函数式组件 函数式组件与普通组件间的差异 vue相似性能优化点 什么是函数式 阅读全文
posted @ 2021-07-17 16:32 Gerryli 阅读(551) 评论(0) 推荐(0)
Vue指令实现原理
摘要：前言 自定义指令是vue中使用频率仅次于组件，其包含bind、inserted、update、componentUpdated、unbind五个生命周期钩子。本文将对vue指令的工作原理进行相应介绍，从本文中，你将得到： 指令的工作原理 指令使用的注意事项 基本使用 官网案例： <div id='a 阅读全文
posted @ 2021-06-27 16:02 Gerryli 阅读(1332) 评论(4) 推荐(0)
Vue插槽实现原理
摘要：前言 vue.js的灵魂是组件，而组件的灵魂是插槽。借助于插槽，我们能最大程度上实现组件复用。本文主要是对插槽的实现机制进行详细概括总结，在某些场景中，有一定的用处。知其然知其所以然，掌握vue.js实现原理，不仅可以提升自身解决问题的能力，还可以学习到大神们编程思想和开发范式。 样例代码 <!-- 阅读全文
posted @ 2021-06-19 16:46 Gerryli 阅读(1246) 评论(0) 推荐(0)
vue响应式原理
摘要：vue是一个轻量级、数据驱动的渐进式框架，其核心就是数据驱动。一直以来，对vue响应式原理的理解还是停留在利用Object.defineProperty中的get和set进行数据劫持，至于内部是如何运转的，并没有一个全面的认知。本文就简要概述下，vue响应式原理具体的实现。 就一般而言，props、 阅读全文
posted @ 2020-01-10 11:10 Gerryli 阅读(942) 评论(0) 推荐(0)
浅析vue封装自定义插件
摘要：在使用vue的过程中，经常会用到Vue.use，但是大部分对它一知半解，不了解在调用的时候具体做了什么，因此，本文简要概述下在vue中，如何封装自定义插件。 在开始之前，先补充一句，其实利用vue封装自定义插件的本质就是组件实例化的过程或者指令等公共属性方法的定义过程，比较大的区别在于封装插件需要手 阅读全文
posted @ 2020-01-07 12:30 Gerryli 阅读(2714) 评论(0) 推荐(1)
vue实例化过程
摘要：我们在用vue进行开发项目时，是否存在疑惑，new Vue(xxx)的过程中，究竟发生了什么？定义的数据，是如何绑定到视图上的？本篇主要介绍在实例化vue时，主要做了哪些事，文章比较长，主要篇幅内容为数据初始化和数据视图绑定过程。主要代码执行时序图如下所示： 在vue源码中，vue构造函数的定义是在 阅读全文
posted @ 2019-12-07 16:04 Gerryli 阅读(6393) 评论(0) 推荐(1)
Vue初始化过程
摘要：用vue也有一两年了，始终对vue一知半解，不怎么了解内部的执行过程，最近在看vue源码，还是不少收获的，其中不乏浏览器事件轮询机制、闭包、设计模式等，还是非常值得一读。本篇简要记录下vue的初始化过程，具体初始化过程及内容的时序如下图所示： 初始化主要执行了vue-dev\src\core\ind 阅读全文
posted @ 2019-12-05 19:30 Gerryli 阅读(2193) 评论(0) 推荐(1)
浅析vue混入(mixin)
摘要：vue中的混入，可以在一定程度上提高代码的复用性。通俗来说，混入类似于“继承”，当前组件对象继承于组件对象，一般情况下遵循“就近原则”。但是与继承不同的是，继承一般都跟随着属性的重写与合并，混入在不同的配置项中，有着不同的混入策略，下面会一一进行介绍vue不同配置项的混入策略。vue混入的基本流程如 阅读全文
posted @ 2019-11-25 20:02 Gerryli 阅读(8231) 评论(1) 推荐(2)
vue如何debugger源码
摘要：在我们阅读vue源码时，一般引用vue的版本都是打包编译后的版本，无法debugger源码，要debugger源码，就需要给代码添加sourcemap，他存储源码与编译后代码的一种对应关系，详细内容可以参考阮老师的博文（http://www.ruanyifeng.com/blog/2013/01/j 阅读全文
posted @ 2019-11-12 11:27 Gerryli 阅读(2951) 评论(1) 推荐(1)
element-ui源码之组件通信那些事
摘要：最近在用element-ui重构前端项目，无意之中翻阅到一个比较好用的组件间通信方式，借助于vue的封装的发布-订阅消息模式与mixin语法。在开始之前先总结下vue常用的组件间通信方式，具体如下： 1、props与自定义事件 优点：常用的父子、子父组件传递方式，简单易懂 缺点：子父、父子之间传参比 阅读全文
posted @ 2019-06-29 19:07 Gerryli 阅读(1197) 评论(0) 推荐(1)