vue源码学习
小孩不能抽烟
这个作者很懒,什么都没留下…
展开
-
mehtods、computed、watch有什么区别
无原创 2022-06-28 22:39:46 · 255 阅读 · 1 评论 -
VUE响应式原理-vue类
class Vue{ constructor(options) { // 1 存储数据 // 存储属性 如果没有传入参数,即当做eventBus来使用时,给options传入一个空对象 this.$options = options || {} this.$data = options.data || {} // 判断el的值的类型,并进行存储 const {el} = options this.$el = typeof el === "str.原创 2021-10-17 14:40:20 · 82 阅读 · 0 评论 -
vue响应式原理
发布订阅模式 消息中心DEP 订阅者subscribe 发布者publisher 发布订阅模式 由发布者订阅者和消息中心组成,适合消息事件更复杂的场景使用 特性:特殊事件发生后,有发布者向消息中心发布指令,消息中心会根据指令向不同的订阅者发布信息 观察者模式 观察者模式是由观察者和被观察者组成,适合组件内部使用 特性:特殊事件发生后,观察目标统一通知所有观察者 vue响应式模式流程 vue 目标:将data注入vue实例,方便方法内操..原创 2021-10-13 22:58:27 · 53 阅读 · 0 评论 -
VUE响应式原理-Observer类
class Observer{ // 接受传入的对象,将这个对象转换为getter/setter constructor(data) { this.data = data // 遍历数据 this.walk(data) } // 封装用于数据遍历的方法 walk(data) { // 将遍历后的数据都转换成getter/setter Object.keys(data).forEach(key => { this.conver.原创 2021-10-18 22:26:16 · 345 阅读 · 0 评论 -
VUE响应式原理-Dep类
class Dep{ constructor() { // 存储订阅者 this.subs = [] } // 添加订阅者 addSub(sub){ if(sub && sub.update) { this.subs.push(sub) } } // 通知订阅者 notify() { // 变量订阅者,执行更新 this.subs.forEach(item => item.update()) .原创 2021-10-24 22:34:49 · 274 阅读 · 0 评论 -
VUE响应式原理-Watch类
class Watcher { constructor(vm, key, cb) { // 当前vue实例 this.vm = vm // 订阅的属性名 this.key = key // 数据变化后要执行的函数 this.cb = cb // 触发getter之前,要将当前订阅者实例存储在dep Dep.target = this // 记录下原来的值, 用于更新检测(导致了getter属性的触发) this.oldV.原创 2021-11-01 23:21:16 · 92 阅读 · 0 评论