06 2021 档案

摘要:vue组件的更新:异步、批量 Vue组件的更新: 异步 批量 主要利用浏览器事件轮询的微任务机制来实现组件的异步批量更新。 当侦测到数据变化,vue会开启一个队列,将相关联的Watcher实例存入队列,将回调函数存入callbacks队列。异步执行回调函数,遍历watcher队列进行渲染。 异步: 阅读全文
posted @ 2021-06-28 17:38 shine_lovely 阅读(1021) 评论(0) 推荐(0) 编辑
摘要:new Vue()的过程 new Vue()的大致流程 new Vue() => _init() => $mount() => mountComponent() => new Watcher() => updateComponent() => render() => _update() 用户调用 n 阅读全文
posted @ 2021-06-24 15:57 shine_lovely 阅读(1146) 评论(0) 推荐(0) 编辑
摘要:EventLoop事件轮询 宏任务和微任务 浏览器从服务器获取到代码后,浏览器会开辟一个GUI渲染线程,GUI从上到下开始执行代码。 浏览器是多线程的,包含GUI渲染线程、HTTP网络请求线程(并发数6-7)、事件监听\定时器监听。但JS代码的运行是单线程的。 执行过程:执行完宏任务 ⇒ 执行微任务 阅读全文
posted @ 2021-06-24 11:24 shine_lovely 阅读(147) 评论(0) 推荐(0) 编辑
摘要:vue2源码学习 — new Vue() 参考:https://blog.csdn.net/qq_36782473/article/details/109108477 调试环境 获取vue源码 项目地址:https://github.com/vuejs/vue 调试环境搭建 安装依赖: npm i 阅读全文
posted @ 2021-06-17 17:07 shine_lovely 阅读(82) 评论(0) 推荐(0) 编辑
摘要:手写router(简单实现嵌套路由) 需求分析: 简单实现嵌套路由 ① 记录当前路由的深度depth ② 路由匹配,得到深度对应的组件 代码实现 // 简单实现嵌套路由 // ① 记录当前路由router-view的深度 // ② 路由匹配,得到深度对应的组件 let Vue; class Rout 阅读全文
posted @ 2021-06-10 21:12 shine_lovely 阅读(148) 评论(0) 推荐(0) 编辑
摘要:手写Vuex 需求分析 Vue.use(Vuex) ⇒ 这是一个插件,需要实现一个静态方法 install new Vuex.Store(options) ⇒ 需要实现一个Store类 页面中可以通过 this.$store.xxx 可以访问store实例 ⇒ 需要挂载$store到Vue.prot 阅读全文
posted @ 2021-06-10 14:35 shine_lovely 阅读(71) 评论(0) 推荐(0) 编辑
摘要:手写vue-router(未实现嵌套路由) 需求分析: 页面无刷新跳转 ⇒ ① hash模式,监听onhashchange事件 ; ② history api ,利用H5的history api,来实现页面不刷新跳转 路由变化 ⇒ 页面更新 ==> 当前路由是个响应式数据 Vue.use(VueRo 阅读全文
posted @ 2021-06-08 17:56 shine_lovely 阅读(159) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示