发表于: 2021-04-15 23:49:49

1 951


今天完成的事情:

开始任务7


学习使用vue的双向绑定

vue双向绑定原理:

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调

    <div id="demo"></div>
    <input type="text" id="inp">
    <script>
        var obj  = {};
        var demo = document.querySelector('#demo')
        var inp = document.querySelector('#inp')
        Object.defineProperty(obj'name', {
            get: function() {
                return val;
            },
            set: function (newVal) {//当该属性被赋值的时候触发
                inp.value = newVal;
                demo.innerHTML = newVal;
            }
        })
        inp.addEventListener('input'function(e) {
            // 给obj的name属性赋值,进而触发该属性的set方法
            obj.name = e.target.value;
        });
        obj.name = 'fei';//在给obj设置name属性的时候,触发了set这个方法


vue代码实现

1. observer实现,主要是给每个vue的属性用Object.defineProperty()

    let data = {name:'my name',age:12};
    observe(data);
    function observe(data) {
        if(!data ||typeof data !=='object'){
            return;
        }
        //取出所有属性
        Object.keys(data).forEach(function (key){
            defineReactive(data,key,data[key]);
        })
    }
    function defineReactive(data,key,value){
        observe(value);
        Object.defineProperty(data,key,{
            enumerable:true,
            configurable:false,
            get:function () {
                return value;
            },
            set:function (newValue) {
                console.log("data发生了变化,新的值为"+newValue);
                value = newValue;
                //通知watcher进行接下来的操作
            }
        })
    }


2. watcher实现

function Watcher(vmnodenametype) {
    Dep.target = this;
    this.name = name;
    this.node = node;
    this.vm = vm;
    this.type = type;
    this.update();
    Dep.target = null;
}

Watcher.prototype = {
    update: function() {
        this.get();
        this.node[this.type] = this.value// 订阅者执行相应操作
    },
    // 获取data的属性值
    get: function() {
        console.log(1)
        this.value = this.vm[this.name]; //触发相应属性的get
    }
}


问题:

vue数据交互,表单验证还的继续看资料



返回列表 返回列表
评论

    分享到