摘要：
mixin的实现原理 在Vue.mixin()中的内容会被维护到Vue.options静态属性里面 然后通过mergeOptions以特定的合并策略将全局的属性和用户属性合并起来 在获取用户选项的时候, 调用mergeOptions合并全局Vue.mixin()里面的内容 就能使用Vue.mixin 阅读全文
posted @ 2022-06-27 00:13
littlelittleship
阅读(163)
评论(0)
推荐(0)
摘要：
异步更新原理 上一章实现了依赖收集和自动更新, 但是存在问题: 如果对同一个属性多次更新, 如: vm.name = 1 vm.name = 2, vm.name = 3, 就是触发多次update方法, 会导致效率底下. 考虑将需要更新的watcher不是立即执行, 而是维护到一个队列里面去, 同 阅读全文
posted @ 2022-06-26 23:19
littlelittleship
阅读(100)
评论(0)
推荐(0)
摘要：
vue中的依赖收集 vue中使用的是观察者模式 watcher是观察者, dep是被观察者 上一节已经可以做到手动渲染, 调用vm._update(vm._render())方法 将渲染的逻辑封装到watcher中, 给每一个属性添加上dep属性, 让dep属性去记录当前watcher 在值发生变化 阅读全文
posted @ 2022-06-26 22:15
littlelittleship
阅读(55)
评论(1)
推荐(1)
摘要：
解析模板,生成render函数,执行render函数,实现视图渲染 1.模板转化成ast语法树 2.ast语法树生成render函数 3.执行render函数生成虚拟dom 4.执行_update方法生成真实dom 5.真实dom替换掉模板 在初始化方法中(_init()), 对元素进行处理, 执行 阅读全文
posted @ 2022-06-26 17:02
littlelittleship
阅读(244)
评论(0)
推荐(0)
摘要：
数组的响应式原理 一般使用数组很少使用 arr[1] = 100, arr.length = 10 这两种方式修改数组, vue2同样也不支持 vue2中实现数组响应式的方法是重写能改变数组的7个方法 特殊情况: 形如: arr: [1,2,3, {num: 100}], 这种数组里面有嵌套对象的, 阅读全文
posted @ 2022-06-23 01:04
littlelittleship
阅读(158)
评论(0)
推荐(0)
摘要：
初始化数据和实现对象的响应式原理 (接上一章) 初始化数据 在dist目录下新建1.index.html文件, 内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com 阅读全文
posted @ 2022-06-22 16:34
littlelittleship
阅读(31)
评论(0)
推荐(0)
摘要：
添加简单的配置文件 1. 配置rollup的开发环境 新建一个文件夹 // 初始化文件 npm init -y // 开发环境下安装这些插件 npm i rollup rollup-plugin-babel @babel/core @babel/preset-env @rollup/plugin-n 阅读全文
posted @ 2022-06-21 15:59
littlelittleship
阅读(47)
评论(1)
推荐(0)
浙公网安备 33010602011771号