手写vue源码，实现一个微型vue以及总结和遇到的坑

向右看齐 2023-01-02 01:26 107阅读 0赞

# this.vm\[key\] 是 undefined问题 #

Compiler中的compilText和compileElement能拿到this.vm实例 但具体拿属性值时，例如this.vm\[msg\]却是undefined，找了很长时间发现是，方法调用的顺序错了，应该先调用proxyData后再去创建Observer和Compiler。  
问题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]  
解决![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]  
这样就能正常拿到值了。原因很简单…不先设置setget拿到undefined很正常，但这里打印的时候看到了set和get（调用完类后调用proxyData方法才出现setget），造成了误导定位问题

# \_proxyData #

挂载前  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]  
后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]

class Vue { 
        constructor(options) { 
            this.$options = options || { }
            this.$data = options.data || { }
            this.$el = typeof options.el === 'string' ?
                document.querySelector(options.el)
                : options.el
            // console.log(JSON.stringify(this));
            // 挂载到vue实例，这样就可以用插值表达式{ {}}
            this._proxyData(this.$data)
            new Observer(this.$data)
            new Compiler(this)
            // console.log(JSON.stringify(this));
        }
        _proxyData(data) { 
            // console.log(this);
            Object.keys(data).forEach(key => { 
                Object.defineProperty(this, key, { 
                    enumerable: true,
                    configurable: true,
                    get() { 
                        return data[key]
                    },
                    set(newValue) { 
                        if (newValue === data[key]) { 
                            return
                        }
                        data[key] = newValue
                    }
                })
            })
        }
    }
    class Observer { 
        constructor(data) { 
            this.walk(data)
        }
        walk(data) { 
            if (!data || typeof data != 'object') { 
                return
            }
            Object.keys(data).forEach(key => { 
                this.defineReactive(data, key, data[key])
            })
        }
        defineReactive(obj, key, val) { 
            this.walk(val)
            let dep = new Dep()
            let that = this
            Object.defineProperty(obj, key, { 
                get() { 
                    Dep.target && dep.addSub(Dep.target)
                    return val
                },
                set(newValue) { 
                    if (val === newValue) { 
                        return
                    }
                    val = newValue
                    that.walk(val)
                    dep.notify()
                }
            })
        }
    }
    class Compiler { 
        constructor(vm) { 
            // console.log(vm);
            this.el = vm.$el
            this.vm = vm
            this.compile(this.el)
        }
        compile(el) { 
            // console.log(el);
            let childNodes = el.childNodes
            Array.from(childNodes).forEach(node => { 
                // console.log(node);
                if (this.isText(node)) { 
                    this.compilText(node)
                    // console.log('text---');
                } else if (this.isElement(node)) { 
                    this.compileElement(node)
                    // console.log('isElement---'+JSON.stringify(node));
                }
                if (node.childNodes && node.childNodes.length) { 
                    this.compile(node)
                }
            })
        }
        compilText(node) { 
            let reg = /\{ \{ (.+?)\}\}/
            let value = node.textContent
            if (reg.test(node.textContent)) { 
                let key = RegExp.$1.trim()
                // console.log(this.vm);
                // console.log(this.vm['msg']);
                node.textContent = value.replace(reg, this.vm[key])
            }
        }
        compileElement(node) { 
            // console.log(node.attributes);
            Array.from(node.attributes).forEach(attr => { 
                // console.log(attr);
                let attrName = attr.name
                if (this.isDirective(attrName)) { 
                    attrName = attrName.substr(2)
                    let key = attr.value
                    this.update(node, key, attrName)
                }
            })
        }
        update(node, key, attrName) { 
            let updateFn = this[attrName + 'Updater']
            updateFn && updateFn.call(this, node, this.vm[key], key)
        }
        textUpdater(node, value, key) { 
            node.textContent = value
            new Watcher(this.vm, key, (newValue) => { 
                node.textContent = newValue
            })
        }
        modelUpdater(node, value, key) { 
            node.value = value
            new Watcher(this.vm, key, (newValue) => { 
                node.value = newValue
            })
            node.addEventListener('input', () => { 
                // console.log(node.value);
                this.vm[key] = node.value
                // console.log(this.vm);
            })
        }
        compilText(node) { 
            let reg = /\{ \{ (.+?)\}\}/
            let value  = node.textContent
            if(reg.test(value)){ 
                let key = RegExp.$1.trim()
                node.textContent = value.replace(reg,this.vm[key])
                new Watcher(this.vm, key, (newValue) => { 
                    node.textContent = newValue
                })
            }
        }
        isText(node) { 
            return node.nodeType === 3
        }
        isElement(node) { 
            return node.nodeType === 1
        }
        // 判断元素属性是否是指令
        isDirective(attrName) { 
            return attrName.startsWith('v-')
        }
    }
    class Dep { 
        constructor() { 
            this.subs = []
        }
        addSub(sub) { 
            if (sub && sub.update) { 
                this.subs.push(sub)
            }
        }
        notify() { 
            console.log(this.subs);
            this.subs.forEach(sub => { 
                sub.update()
            })
        }
    }
    class Watcher { 
        constructor(vm, key, cb) { 
            this.vm = vm
            this.key = key
            this.cb = cb
            this.oldValue = this.vm[key]
            Dep.target = this
            // 触发get方法，在get方法中会调用addSub,添加进去后会清空
            this.oldValue = vm[key]
            Dep.target = null
        }
        update() { 
            let newValue = this.vm[this.key]
            if (newValue === this.oldValue) { 
                return
            }
            this.cb(newValue)
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221120/0e40f02c34414414a7f6449c176a8e96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/9ccacd3e5d524c79880bf114a127048e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]: /images/20221120/593bf388ade54b629927fe4e3d9f9495.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]: /images/20221120/733a5f0555914544960766c7367dc3d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]: /images/20221120/dc768ca387d642b184ceefbfd01707fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]: /images/20221120/09095c875d0843de89b2627e15b0a1e1.png