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