随笔分类 - vue2简易实现
vue2源码的简易实现
摘要：# vue双向数据绑定原理实现 ### 准备工作 新建一个index.js文件, 一个index.html文件 index.js文件中, 定义Vue类, 并将Vue并称全局变量 window.Vue = Vue index.html中引入index.js *index.js* ```
阅读全文
摘要：组件的虚拟节点 分全局组件 和 局部组件 全局组件 Vue.component('my-button', { template: '<button>点击</button>' }) 局部组件 const vm = new Vue({ el: '#app', data() { return {name:
阅读全文
摘要：watch的实现原理 watch和computed一样, 也是基于 Watcher 的 组件内部使用的watch 和 外部使用的 vm.$watch()都是调用的Vue.prototype.$watch方法 当依赖的属性发生变化, 更新的时候执行回调就行了 vue'中watch有多种写法, 这里只简
阅读全文
摘要：计算属性的实现原理 计算属性也是一个watcher 计算属性定义成方法, 使用的时候直接vm.XX,是因为使用Object.defineProperty在vm实例上定义了属性 计算属性的依赖更新值发生改变是通过脏值检测来实现的 计算属性watcher不能更新视图, 只会更新里面的dirty属性,真正
阅读全文
摘要：数组更新实现原理 之前我们给每个属性添加了dep, 让dep去收集依赖 当使用push方法改变数组的时候, 并没有改变属性, 而是改变了数组本身 因此, 需要让数组,或对象和属性一样, 也能收集依赖, 并且在检测到数组变化的时候触发更新 在Observer 类中对每一个对象对进行依赖收集 class
阅读全文
摘要：mixin的实现原理 在Vue.mixin()中的内容会被维护到Vue.options静态属性里面 然后通过mergeOptions以特定的合并策略将全局的属性和用户属性合并起来 在获取用户选项的时候, 调用mergeOptions合并全局Vue.mixin()里面的内容 就能使用Vue.mixin
阅读全文
摘要：异步更新原理 上一章实现了依赖收集和自动更新, 但是存在问题: 如果对同一个属性多次更新, 如: vm.name = 1 vm.name = 2, vm.name = 3, 就是触发多次update方法, 会导致效率底下. 考虑将需要更新的watcher不是立即执行, 而是维护到一个队列里面去, 同
阅读全文
摘要：vue中的依赖收集 vue中使用的是观察者模式 watcher是观察者, dep是被观察者 上一节已经可以做到手动渲染, 调用vm._update(vm._render())方法 将渲染的逻辑封装到watcher中, 给每一个属性添加上dep属性, 让dep属性去记录当前watcher 在值发生变化
阅读全文
摘要：解析模板,生成render函数,执行render函数,实现视图渲染 1.模板转化成ast语法树 2.ast语法树生成render函数 3.执行render函数生成虚拟dom 4.执行_update方法生成真实dom 5.真实dom替换掉模板 在初始化方法中(_init()), 对元素进行处理, 执行
阅读全文
摘要：数组的响应式原理 一般使用数组很少使用 arr[1] = 100, arr.length = 10 这两种方式修改数组, vue2同样也不支持 vue2中实现数组响应式的方法是重写能改变数组的7个方法 特殊情况: 形如: arr: [1,2,3, {num: 100}], 这种数组里面有嵌套对象的,
阅读全文
摘要：初始化数据和实现对象的响应式原理 (接上一章) 初始化数据 在dist目录下新建1.index.html文件, 内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
阅读全文
摘要：添加简单的配置文件 1. 配置rollup的开发环境 新建一个文件夹 // 初始化文件 npm init -y // 开发环境下安装这些插件 npm i rollup rollup-plugin-babel @babel/core @babel/preset-env @rollup/plugin-n
阅读全文
