⑧ 总结
摘要：Vue 的工作原理：Vue 在实例化时，会遍历 data 下的属性，通过 Object.defineProperty 将它们转为 setter|getter，在内部通过追踪依赖，在属性被修改和访问时通知变化。
阅读全文
posted @
2021-01-26 16:59
pleaseAnswer
阅读(45)
推荐(0) 编辑
⑦ Vuex源码解析
摘要：1 安装 1.1 Vuex 的安装 Vue.use(Vuex); new Vue({ el: '#app', store }); 1.2 Vuex 是怎样把 store 注入到 Vue 实例中的呢？ Vue 提供了 Vue.use 方法用来给 Vue.js 安装插件，内部通过调用插件的 instal
阅读全文
posted @
2021-01-26 16:58
pleaseAnswer
阅读(86)
推荐(0) 编辑
⑥ Vuex状态管理的工作原理
摘要：1 为什么要使用 Vuex 解决多组件通讯问题 Vuex 是一个专门为 Vue.js 框架设计的状态管理工具 Vuex 借鉴了 flux、redux 的基本思想，将状态抽离到全局，形成一个 Store Vuex 内部采用了 new Vue 来将 Store 内的数据进行 响应式化 2 安装 2.1
阅读全文
posted @
2021-01-26 16:56
pleaseAnswer
阅读(188)
推荐(0) 编辑
⑤ 批量异步更新策略及 nextTick 原理
摘要：1 为什么要异步更新？ Vue 是如何在修改 data 中的数据后修改视图的：setter -> Dep -> Watcher -> patch -> 视图 1.1 栗子 <template> <div> <div>{{number}}</div> <div @click="handleClick"
阅读全文
posted @
2021-01-26 16:55
pleaseAnswer
阅读(125)
推荐(0) 编辑
④ 数据状态更新时的差异diff及patch机制
摘要：1 数据更新视图 2 跨平台 因为使用了 Virtual DOM，Vue.js 具有了跨平台能力 Virtual DOM 只是 js 对象，是如何调用不同平台的 api 的？ 依赖于适配层：将不同平台的 api 封装在内，以同样的接口对外暴露 2.1 举个栗子 提供 nodeOps 对象做适配，根据
阅读全文
posted @
2021-01-26 16:53
pleaseAnswer
阅读(116)
推荐(0) 编辑
③ 实现Virtual DOM的下一个VNode节点
摘要：1 什么是VNode？ render function 会被转化成 VNode 节点 1.1 Virtual DOM 一个结构类似于真实 DOM 的 js 对象 1.2 实现一个简单的 VNode 类，加入一些基本属性 class VNode { constructor (tag, data, ch
阅读全文
posted @
2021-01-26 16:43
pleaseAnswer
阅读(72)
推荐(0) 编辑
② 响应式系统的依赖收集追踪原理
摘要：1 为什么要依赖收集 1.1 栗子1 1. new 一个 Vue 实例 new Vue({ template: ` <div> <span>{{ text1 }}</span> <span>{{ text2 }}</span> </div> `, data: { text1: 'text1', te
阅读全文
posted @
2021-01-26 16:42
pleaseAnswer
阅读(77)
推荐(0) 编辑
① 响应式系统的基本原理
摘要：1 Object.defineProperty Vue.js基于 Object.defineProperty 实现响应式系统 使用方法： /* * obj: 目标对象 * prop: 需要操作的目标对象的属性名 * descriptor: 描述符 * return value 传入对象 */ Obj
阅读全文
posted @
2021-01-26 16:33
pleaseAnswer
阅读(213)
推荐(0) 编辑
