メSerendipity - 博客园

Vue响应式原理底层代码模拟实现

摘要：整体分析Vue的基本结构如下图所示：（备注：完整代码github地址https://github.com/1512955040/MiniVue）上图中,为我们模拟最小vue的整体结构,首先创建一个vue类型,它负责把data中的成员注入到vue实例中,并且转化成getter/setter,obse 阅读全文

posted @ 2021-08-15 18:40 メSerendipity 阅读(568) 评论(0) 推荐(0)

浅谈vue响应式原理及发布订阅模式和观察者模式

摘要：一.Vue响应式原理首先要了解几个概念：数据响应式：数据模型仅仅是普通的Javascript对象，而我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率。双向绑定：数据改变，视图改变，数据也随之改变，我们可以使用v-model在表单上创建双向数据绑定。数据驱动是Vue最独特的阅读全文

posted @ 2021-08-08 18:25 メSerendipity 阅读(1852) 评论(1) 推荐(2)

Vue Router的原理及history模式源码实现

摘要： Hash 模式 URL中 # 后面的内容作为路径地址，可以通过location.url直接切换路由地址,如果只改变了#后面的内容,浏览器不会向服务器请求这个地址, 会把这个地址记录到浏览器的访问历史中,当hash发生改变之后会触发hashchange事件,在hashchange事件中记录当前的路由地阅读全文

posted @ 2021-07-15 22:44 メSerendipity 阅读(838) 评论(0) 推荐(0)

Vue路由之Hash模式和history模式的区别及History模式的解决办法

摘要：一.表现形式的区别二.原理的区别三.History模式下出现的问题及解决办法 History需要服务器的支持刷新页面之后浏览器会发送请求,单页面应用中,服务端不存在像http://www.testurl.com/login这样的地址,当刷新页面会返回找不到该页面,因为单页面应用中只有index 阅读全文

posted @ 2021-07-03 20:34 メSerendipity 阅读(627) 评论(0) 推荐(0)

webpack4.X之complier方法的实现及make前流程回顾

摘要：一.complier方法的实现 complier贯穿整个打包的流程，具体执行顺序如下: 1.newCompilationParams 方法调用,返回 params,normalModuleFactory 2.上述的操作是为了获取parms 3.接着调用了 beforeCompile 钩子监听,在它的阅读全文

posted @ 2021-04-10 21:59 メSerendipity 阅读(309) 评论(0) 推荐(0)

webpack4.X之EntryOptionPlugin流程书写

摘要： EntryOptionPlugin为Webpack挂载内置插件入口的核心代码,EntryOptionPlugin会解析传给 webpack 的配置中的 entry 属性 lib下新建WebpackOptionsApply.js,EntryOptionPlugin.js,SingleEntryPlug 阅读全文

posted @ 2021-03-28 15:13 メSerendipity 阅读(367) 评论(0) 推荐(0)

webpack4.X之核心打包流程

摘要：一.webpack打包流程如下图所示：二.项目的具体目录结构如下： 1.在根目录下创建run.js，代码如下： //webpack核心代码引入webpack模块 let webpack = require('webpack') //获取webpack.config的信息 let options 阅读全文

posted @ 2021-03-21 23:51 メSerendipity 阅读(80) 评论(0) 推荐(0)

webpack4.X之tapable实例对象AsyncParallelHook源码

摘要：模拟手写AsyncParallelHook源码部分。 let Hook = require('./Hook.js') class HookCodeFactory { args({ after, before } = {}) { let allArgs = this.options.args if ( 阅读全文

posted @ 2021-03-01 23:36 メSerendipity 阅读(142) 评论(0) 推荐(0)

webpack4.X之tapable实例对象SyncHook源码

摘要：模拟手写SyncHook源码 const SyncHook=require('./SyncHook.js') let hook=new SyncHook(["name","age"]) hook.tap('fn1',function(name,age){ console.log('fn1 >',na 阅读全文

posted @ 2021-02-27 22:35 メSerendipity 阅读(95) 评论(0) 推荐(0)

webpack4.X核心工具库之tapable实例对象Hook

摘要：一.tapable简介 tapable为webpack底层的核心工具库，webpack许多功能的实现都是跟它密不可分的,webpack的编译流程为配置初始化 >内容编译 >输出编译后内容，这三个的整体执行过程可以称之为事件驱动型事件流工作机制，这个机制将不同的工作流串联起来完成所有的工作，其中最为阅读全文

posted @ 2021-02-22 17:42 メSerendipity 阅读(271) 评论(0) 推荐(1)