手写一个Vue的数据绑定

Vue的数据绑定原理

具体废话我也不多啰嗦了，大家既然要看原理，网上一搜就是一大堆，无非就是利用了Object.defineProperty数据劫持这么个东西去设置和获取对象，那么大道理我就不废话，直接上干货

首先要写HTML

<div id="app">
       <input type="text" "In(event)" id="cur">
       <p id="text"></p>
</div>

Script

	class MyVue{
            constructor(options){
                // 接收参数
                this.$data = options;
                // 调用观察者
                this.Observer(this.$data)
            }

            Observer(val){
                // 在观察者中判断是否存在并且是否是个对象，因为Object.defineProperty是针对于对象来设置的
                if(!val || typeof val !== 'object'){
                    return
                }
                //利用Object.keys()来循环出下标
                Object.keys(val).forEach( keys => {
                    this.defineProperty(val, keys, val[keys])
                })
            }

            defineProperty(obj, key, value){
                //递归一遍观察者避免有嵌套关系
                this.Observer(value)
                Object.defineProperty(obj, key, {
                    get(){
                        return document.querySelector('#text').innerHTML
                    },
                    set(newValue){
                        // 如果相等直接返回
                        if(value == newValue){
                            return
                        }
                        document.querySelector('#text').innerHTML = newValue
                        // 这里需要注意一定要将新的值赋给旧的值，否则只会修改标签里面的值，不会修改对象中的值，最后导致数据清空不干净
                        value = newValue
                    }
                })
            }

        }
        
        var obj = {name:''}
        
        var my = new MyVue(obj)
        
        obj.name = 'Xiaoli'


        function In(e){
            obj.name = e.target.value
            console.log(obj)
        }

附图：

Vue工作机制

好了，以上就是完整的代码了，重点是在MyVue这个类中，接收完传递的参数，就去调用这个方法就可以了，有什么问题，各位兄弟联系我~