• vue实现数据双向绑定的原理


    vue实现数据双向绑定的原理就是用Object.defineproperty()重新定义(set方法)对象设置属性值和(get方法)获取属性值的操纵来实现的

    Object.property()方法的解释:Object.property(参数1,参数2,参数3)   返回值为该对象obj

    其中参数1为该对象(obj),参数2为要定义或修改的对象的属性名,参数3为属性描述符,属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。这两种对象只能选择一种使用,不能混合使用。而get和set属于存取描述符对象的属性。

    这个方法会直接在一个对象上定义一个新属性或者修改对象上的现有属性,并返回该对象

    var keyvalue=1;

    var obj={};

    Object.defineproperty(obj,"key",{

        enumberable:true,

        configurable:true,

        set:function (newvalue) {

        keyvalue=newvalue

        console.log("keyvalue的值已经发生了改变,目前的值是:${keyvalue}")

    },

        get : function () { 

        return keyvalue

    }

    })

    对象obj获取key属性时,会触发 get方法,得到是变量keyvalue的值。当重新设置key值时,会触发set方法,将变量keyvalue的值设置成已经变换的值。如此 就实现了一个简单的数据双向绑定,当改变变量keyvalue的值的时候,obj.key也会发生改变,设置obj.key时,变量keyvalue也会改变。

    vue的数据双向绑定是通过数据劫持和发布-订阅者功能来实现的

    实现步骤:1.实现一个监听者Oberver来劫持并监听所有的属性,一旦有属性发生变化就通知订阅者

    2.实现一个订阅者watcher来接受属性变化的通知并执行相应的方法,从而更新视图

    3.实现一个解析器compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相对应的订阅者

  • 相关阅读:
    BZOJ 1578: [Usaco2009 Feb]Stock Market 股票市场( 背包dp )
    BZOJ 3315: [Usaco2013 Nov]Pogo-Cow( dp )
    BZOJ 3477: [Usaco2014 Mar]Sabotage( 二分答案 )
    BZOJ 2427: [HAOI2010]软件安装( dp )
    BZOJ 3211: 花神游历各国( 线段树 )
    POJ 2528 线段树 + 离散化
    POJ 1151 Atlantis 线段树+离散化+扫描线
    POJ1177 Picture 线段树+离散化+扫描线
    BZOJ1016: [JSOI2008]最小生成树计数
    POJ2104 K-th Number 划分树 模板题啊
  • 原文地址:https://www.cnblogs.com/taochengyong/p/12290044.html
Copyright © 2020-2023  润新知