精华内容
下载资源
问答
  • 主要为大家详细介绍了Vue.js双向绑定实现原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue.js是MVVM结构的,同类的还有AngularJs;至于MVC、MVP、MVVM的比较网上已经有很多了,这样不再...这篇文章将给大家深入的介绍vue.js双向绑定的实现原理,有需要的朋友们可以参考借鉴,下面跟着小编一起来看看吧。
  • vue实现双向数据绑定原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。 在MDN上对该方法的说明是:Object.defineProperty() 方法会直接在一个对象...
    vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
    在MDN上对该方法的说明是:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
    它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。重点就是最后的属性描述符。
    属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。上面说的get和s
    et就是属于存取描述符对象的属性。
    然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。
    ``
    
    
    展开全文
  • Vue.js 可以说是MVVM 架构的最佳实践,专注于 MVVM 中的 ViewModel,不仅做到了数据双向绑定,而且也是一款相对来比较轻量级的JS 库,API 简洁,很容易上手。  Vue的基础知识网上有现成的教程,此处不再赘述, 下面...

    Vue.js

    Vue.js 可以说是MVVM 架构的最佳实践,专注于 MVVM 中的 ViewModel,不仅做到了数据双向绑定,而且也是一款相对来比较轻量级的JS 库,API 简洁,很容易上手。
      Vue的基础知识网上有现成的教程,此处不再赘述, 下面简单了解一下 Vue.js 关于双向绑定的一些实现细节:

    Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的。
      
      当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。
      
      用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

    Observer :数据监听器,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者,内部采用Object.defineProperty的getter和setter来实现
      Compile :指令解析器,它的作用对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
      Watcher :订阅者,作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数
      Dep :消息订阅器,内部维护了一个数组,用来收集订阅者(Watcher),数据变动触发notify 函数,再调用订阅者的 update 方法
      在这里插入图片描述

    从图中可以看出,当执行 new Vue() 时,Vue 就进入了初始化阶段,一方面Vue 会遍历 data 选项中的属性,并用 Object.defineProperty 将它们转为 getter/setter,实现数据变化监听功能;
      
      另一方面,Vue 的指令编译器Compile 对元素节点的指令进行扫描和解析,初始化视图,并订阅 Watcher 来更新视图, 此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。
      
      当数据发生变化时,Observer 中的 setter 方法被触发,setter 会立即调用Dep.notify(),Dep 开始遍历所有的订阅者,并调用订阅者的 update 方法,订阅者收到通知后对视图进行相应的更新。

    展开全文
  • Vue.js双向数据绑定实现

    千次阅读 2017-12-28 10:23:24
    js中对象属性类型有数据属性和访问器属性,这里实现简单的双向数据绑定是利用了对象的访问器属性中包含的get和set 修改属性的默认特性使用Object.defineProperty()方法 addEventListener(event,function,...

    js中对象属性类型有数据属性和访问器属性,这里实现简单的双向数据绑定是利用了对象的访问器属性中包含的get和set

    修改属性的默认特性使用Object.defineProperty()方法

    addEventListener(event,function,useCapture)绑定事件,实时检测,useCapture可选布尔值,默认为false,事件在冒泡阶段执行。

    事件触发过程中,DOM事件流包含三个阶段:事件捕获,处于目标,事件冒泡

    <input type="text" id="txt">
    <span id="span"></span>

    var obj = {};
    //obj定义一个名字为hello的访问器属性
    Object.defineProperty(obj,"hello",{
        get:function(){
            console.log("get方法被调用了");
        },
        set:function(val){
            console.log('set方法被调用了,参数是' + val);
        }
    });
    
    obj.hello; //get方法被调用了
    obj.hello = "nihao"; //set方法被调用了,参数是nihao


    var obj = {};
    Object.defineProperty(obj,'hello',{
        set:function(newVal){
            document.getElementById('txt').value = newVal;
            document.getElementById('span').innerHTML = newVal;
        }
    });
    document.addEventListener('keyup',function(e){
        console.log(e.target);
        obj.hello = e.target.value;
    },true);


    展开全文
  • 在使用Vue.js时,可以使用Vue.extend()方法创建一个子类,传入参数包含了一个对象。其中,在extend中的data和vue实例化对象中的data写法不一样。下面利用实例说明,操作如下: 第一步,创建一个静态页面并引入vue....
  • 这两天学习了vue.js数据绑定这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。 前言 感觉 vue 的很多方面的内容,都参考了 angular 的东西,数据绑定方面,更是赤裸裸的“抄袭”。对照来看,更有助于...
  • 主要介绍了vue.js使用v-model实现表单元素(input) 双向数据绑定功能,结合完整实例形式分析了v-model实现表单input元素数据双向绑定相关操作技巧,需要的朋友可以参考下
  • vue.js如何实现数据双向绑定呢? 与angular不同。 vue利用的是es5的defineproperty特性。 1.一个小例子 <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title><...
  • Vue.js双向数据绑定原理

    千次阅读 2017-09-06 22:43:56
    vue双向绑定就是指model层与view层的同步,两者之间任意一个发生变化都会同步更新到另一者。View为视图层,Model为数据层,ViewModel为逻辑控制层。 vue.js采用数据劫持结合发布者-订阅者模式的方法,通过Object....

    vue双向绑定就是指model层与view层的同步,两者之间任意一个发生变化都会同步更新到另一者。

    这里写图片描述

    View为视图层,Model为数据层,ViewModel为逻辑控制层。
    vue.js采用数据劫持结合发布者-订阅者模式的方法,通过Object.defineProperty()劫持各个属性的setter,getter在数据变动时发布消息给订阅者,触发相应的监听回调。
    (这里看不懂没关系,接着往下看…….)

    1. Object.defineProperty()方法
    Object.defineProperty(obj,prop,descriptor)
    obj:目标对象
    prop:目标对象的属性
    descriptor:属性的描述符

    先来看一段代码:

     var obj = {
         name:"张三"
     };
     console.log(obj.name);  //张三
    

    这种方法可以直接访问到obj中的name属性。
    我们也可以使用defineProperty()方法为obj定义name属性,代码如下:
    这个name属性为访问器属性,它是对象的特殊属性,不能在对象中直接设置,必须通过defineProperty()方法设置。

    var obj = {};
        Object.defineProperty(obj,"name",{
            get:function(){
                console.log("get方法被调用了");
                return name;
            },
            set:function(val){
                name = val;
                console.log("set方法被调用了,参数是"+val);
            }
        });
        obj.name="张三";
        console.log(obj.name);

    代码执行结果为:
    这里写图片描述
    obj.name=”张三”,为属性赋值,就是调用set函数,赋值就是进行传参。
    console.log(obj.name),读取属性,就是调用get方法,读取的值就是get函数的返回值。

    2. 简单双向绑定的实现

    <input type="text" id="text">
    <p id="show"></p>
    <script>
        var obj = {};
        Object.defineProperty(obj,"name",{
            get:function(){
                return name;
            },
            set:function(value){
                document.getElementById("text").value = value;
                document.getElementById("show").innerHTML = value;
            }
        });
        var input = document.getElementById("text");
        input.addEventListener("input",function(event){
            var text = event.target.value;
            obj.name = text;
        });
    </script>
    <input type="text" id="text">
    <p id="show"></p>
    <script>
        var obj = {};
        Object.defineProperty(obj,"name",{
            get:function(){
                return name;
            },
            set: function(value){
                document.getElementById("show").innerHTML = value;
            }
        });
        var input = document.getElementById("text");
        input.addEventListener("input",function(event){
            var text = event.target.value;
            obj.name = text;
        },false)
    </script>

    随着文本输入框文字的变化,p元素中会显示相同的文字内容。实现了model=>view的绑定。
    在控制台修改obj.name,视图会相应更新。实现了view=>model的绑定。
    这里写图片描述

    3. 实现双向绑定要实现的几点
    第一点:对数据进行劫持监听,设置一个数据监听器Observer,用来监听所有属性,如果有属性发生变化,就通知订阅者。
    第二点:设置一个订阅者Watcher,订阅者可以收到属性的变化通知,从而执行相应的函数,来进行视图更新。
    第三点:设置一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。
    第四点:入口函数。

    这里写图片描述

    图片说明:因为存在多个订阅者,所以需要一个消息订阅器Dep来专门收集这些订阅者。
    第一点说明:利用Object.defineProperty()来监听属性变动,为每一个属性添加setter和getter,一旦属性发生改变,触发setter,就能监听到数据变化。
    第二点说明:订阅者Watcher是Observer和Compile之间通信的桥梁。
    第三点说明:Compile实现步骤:
    解析模板指令,并替换模板数据,初始化视图;
    将模板指令对应的节点绑定对应的更新函数,添加监听数据的订阅者,一旦数据发生变化,则更新视图。

    总结:
    数据实现双向绑定,包含两个方面:model层=>view层,view层=>model层。
    实现view层=>model层,可以通过事件监听。如上述例子,对input标签监听oninput事件,代码obj.name = text直接调用set函数,将监听到的数据直接赋值给p元素的内容。
    实现model层=>view层的重点是如何知道数据发生了改变。通过Object.defineProperty()方法对属性设置一个set函数,当model层数据发生改变时就会触发这个函数。

    主要参考了下面的这篇博文,里面有非常详细的源码解读:链接参考博文

    展开全文
  • 今天小编就为大家分享一篇Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • —— 什么是Vue.js —— Vue.js是一套构建用户界面的渐进式框架 Vue被设计为可以自底向上逐层应用。 Vue的核心库只关注视图层,不仅易于上手 还便于和第三方库或既有项目整合。... 将视图与模型双向数据绑定的...
  • Vue框架很核心的功能就是双向数据绑定。下面这篇文章主要给大家介绍了关于Vue.js数据绑定的语法教程,文中通过示例代码介绍的非常详细,相信对大家具有一的参考学习价值,需要的朋友们下面来一起看看吧。
  • 版权声明:本文为博主原创文章,转载请保留原文链接。... 有关双向数据绑定的原理...当然,vue双向绑定实际更复杂,但最基本的原理就是基于Object.defineProperty()方法改变数据存取的默认行为来实现的。
  • 这么说吧,vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的Object.observe方法也被草案发起人撤回了(此方法在node环境中仍能使用)。可见defineProperty的威力之大。 Object....
  • proxy方法 ...可查看Vue 2.0双向绑定原理的实现 具体实现过程的代码如下: 1、定义构造函数 function Vue(option){ this.$el = document.querySelector(option.el); //获取挂载节点 this.$data =
  • Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.jsVue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery...
  • vue.js初级入门之最基础的双向绑定操作,具体内容如下 首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了...
  • 给大家带来了Vue.js 踩坑记之双向绑定问题,非常不错,具有参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起学习吧
  • 本篇文章主要介绍了Vue.js之视图和数据双向绑定(v-model),使用v-model指令,使得视图和数据实现双向绑定,有兴趣的可以了解一下
  • 我们都清楚v-model其实就是vue的一个语法糖,用于在表单控件或者组件上创建双向绑定。 //表单控件上使用v-model <input type=text v-model=name /> <input type=checkbox v-model=checked/> <!-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,419
精华内容 16,967
关键字:

vue.js双向数据绑定原理

vue 订阅