精华内容
下载资源
问答
  • Vue数据双向绑定原理

    2020-01-09 17:12:44
    Vue数据双向绑定原理 vue实现数据双向绑定主要是通过 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter方法;在数据变动时发布消息给订阅者,触发相应监听回调...

    Vue数据双向绑定原理

    vue实现数据双向绑定主要是通过 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter方法;在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通的js对象传给Vue实例来作为他的data选项时,Vue将遍历他的属性,用Object.defineProperty()将他们转为getter/setter。用户看不到getter/setter,但是在内部他们让Vue追踪依赖,在属性被访问和修改时通知变化

    Vue的数据双向绑定将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中时用来解析{{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化——>视图更新;视图交互变化(input)——>数据model变更双向绑定效果

    js实现简单双向数据绑定

    <body>
    	<div id="app">
    		<input  type="text" id="txt"/>
    		<p id="show"></p>
    	</div>
    </body>
    <script>
    	var obj = {}
    	Object.defineproperty(obj, 'txt', {
    		get: function () {
    			return obj
    		},
    		set: function (newV) {
    			document.getElementById('txt').value = newV
    			document.getElementById('show').innerHTML = newV
    		}
    	})
    	document.affEventListener('keyup', function(e){
    		obj.txt = e.target.value
    	})
    </script>
    
    展开全文
  • vue数据双向绑定原理

    2020-06-30 17:40:16
    vue数据双向绑定原理即就是 1.使用Object.defineProperty进行数据劫持,把data对象,computed等里的所有属性进行数据劫持。数据劫持的意思可以看:JavaScript中的Object.defineProperty()函数 2、使用观察者模式,...

    vue数据双向绑定原理即就是
    1.使用Object.defineProperty进行数据劫持,把data对象,computed等里的所有属性进行数据劫持。数据劫持的意思可以看:JavaScript中的Object.defineProperty()函数

    2、使用观察者模式,完成发布订阅。发布订阅者模式可以看:观察者模式

    1)、模板里使用data对象属性的dom对象都订阅。

    2)、当data对象里的属性的值发生变化时,就会发布,发布时,就改变了dom里的内容。

    以下为源码:

    这个代码只是模拟数据绑定的原理,并没有考虑vue的虚拟dom和异步更新队列等问题。

    1、模拟vue.js的代码(文件名:vue.js)

    class Vue{
    constructor(obj){
    //2、数据挂载
    //2.1) 、把obj对象的每个属性,作为vue对象的属性(属性名前面加上 KaTeX parse error: Expected '}', got 'EOF' at end of input: … this["“+key] = obj[key];
    }
    //2.2)、把obj.data对象的属性,作为vue对象的属性,并且要有数据劫持的功能和发布订阅的功能
    let myObserver = {};
    observer.make(myObserver);
    for(let key in obj.data){
    this[”"+key] = obj.data[key];
    Object.defineProperty(this,key,{
    //数据劫持
    set:function(newValue){
    //数据劫持的目的是,当key发生变化时,需要渲染页面
    this["
    "+key] = newValue;
    //数据变了,就得渲染页面,发布订阅功能
    myObserver.publish(newValue);
    },
    get:function(){
    return this["_"+key];
    }
    });
    }
    //2.3)、订阅(模板里的标签需要订阅data中的数据)
    let box = document.getElementById(obj.el.substring(1));//“box”
    //2.3.1)查找使用msg属性的dom元素,放在数组msgDom里
    let msgDom = [];
    for(let i=0;i<box.children.length;i++){
    if(box.children[i].innerHTML.includes("{{msg}}")){
    //放到数组里,为了订阅服务
    msgDom.push({
    “dom”:box.children[i],
    “vinnerHTML”:box.children[i].innerHTML// 原始的html,即:没有进行模板渲染的html
    });
    //把里面的{{msg}}的内容得替换掉
    box.children[i].innerHTML = box.children[i].innerHTML.replace(/{{msg}}/g,obj.data.msg)
    }
    }
    //2.3.2) 让数组数组msgDom里的每个元素订阅msg的值。
    for(let i=0;i<msgDom.length;i++){
    myObserver.addSubscriber(function(msg){
    msgDom[i].dom.innerHTML = msgDom[i].vinnerHTML.replace(/{{msg}}/g,msg)
    });
    }
    }
    }

    //观察者模式的代码

    var observer={
    //订阅:给数组里添加函数
    addSubscriber:function(cb){
    this.subscribers.push(cb);
    },

    //退订:删除数组里的函数
    removeSubscriber:function(cb){
    let index = this.subscribers.indexOf(cb);
    this.subscribers.splice(index,1);
    },

    //发布
    publish:function(what){
    this.subscribers.forEach(element => {
    if(typeof element ==“function”){
    element(what);
    }
    });

    },

    //让某个对象具备发布订阅功能
    make:function(obj){
    for(let key in this){
    obj[key] = this[key];
    }
    obj.subscribers = [];
    }
    }

    2、使用模拟的vue的html文件的代码

    Document
    信息:{{msg}}

    let vm = new Vue({
    el:"#box",
    data:{
    msg:“hello”
    }
    });

    function fn(){
    // vm.msg = “你好”;
    vm.msg = document.getElementById(“txt”).value;
    }

    展开全文
  • vue 数据双向绑定原理

    2020-04-20 21:14:54
    vue实现数据双向绑定 vue.js采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript ...

    vue实现数据双向绑定
    vue.js采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

    vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。

    展开全文
  • Vue 数据双向绑定原理

    2019-06-27 15:19:53
    Vuejs双向数据绑定原理:当你把一个普通的 JavaScript 对象传入 Vue 实例作为data选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是 ES5 ...

    Vuejs双向数据绑定原理:当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setterObject.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

    下面看一个例子:

       let obj = {};
        let temp = {};
        Object.defineProperty(obj, 'val', {
            get(val) {
                return temp.val;
            },
            set(val) {
                temp.val = val;
                text.innerText = val;
                npt.value = val;
            }
        });
        npt.oninput = function () {
            obj.val = this.value;
        }

    text是一个p标签,npt是一个input,这里使用temp变量是为了防止obj变量进入死循环。

    展开全文
  • vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的.本文重点给大家介绍Vue数据双向绑定原理及简单实现方法,感兴趣的朋友跟随脚本之家小编一起学习吧
  • 主要介绍了Vue数据双向绑定原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,649
精华内容 1,059
关键字:

vue数据双向绑定原理

vue 订阅