vue data responsive principle

vue2.0 data responsive principle

Objects

Attribute definition object mjm Obect.defineproperty

defineproperty not really the core of the data as an object to do two-way binding, but to make the tag to the object properties, set a series of operating authority, but in the get and set properties to achieve a responsive

var ob = { 
    A: . 1 , 
    B: 2 
} 
// l- objects 2- 3- properties for a series configuration property 
Object.defineProperty (ob, 'A', { // A subject is definitely in a private property ob ,, default is to true 
    Writable: to false , 
    Enumerable: to false , 
    Configurable: to false 
}) 
ob.a =. 3 
the console.log (Object.getOwnPropertyDescriptor (OB, 'A' )) 
the console.log (ob.a) // . 1

var ob = { 
    a: . 1 , 
    B: 2 
} 

// l- objects 2- 3- properties for a series of configuration attributes 
/ * * 
 * VUE-way data binding 
 * ob is a property to get / set method, ob of getting a, will trigger the get method, setting the ob a, triggers set method 
 * / 
Object.defineProperty (ob, 'a', { // a target is absolute private property of ob ,, default is to true 
    GET: function () { 
        the console.log ( 'A- GET' ) 
    }, 
    SET: function () { 
        the console.log ( 'A- SET' ) 

    } 
}) 
ob.a =. 3 
the console.log (ob.a )

// normal usage ,,, use transit, inelegant 

var OB = { 
    A: . 1 , 
    B: 2 
} 

// l- objects 2- 3- properties for a series of configuration attributes 
/ * * 
 * VUE way data binding 
 * when a property is set to get / set methods of ob, ob is acquired, a, will trigger a get method, when a set of ob, triggers set methods 
 * / 
var the _value = ob.a // the _value as a transit 
Object.defineProperty (ob, 'a', { // a private property of the object ob is absolutely ,, the default is to true 
    GET: function () { 
        the console.log ( 'A- GET' ) 
         return the _value; 
    }, 
    SET: function ( newValue) {
        the console.log ( 'A- SET' ) 
        the _value = newValue; 
    } 
}) 
ob.a =. 3 
the console.log (ob.a) // GET method must return, otherwise undefined

defineProperty is defined get and set properties of the object, then the array how to do?

　　Made a decorator pattern

/**
 * 概述   Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。
 *                        被创建的对象继承另一个对象的原型，在创建新对象时可以指定一些属性。
 * 语法   Object.create(proto, [ propertiesObject ])
 */
//数组 -- 做了个装饰者模式
var arraypro = Array.prototype;
var arrob = Object.create(arraypro)
var arr = ['push', 'pop', 'shift']; //枚举这三个，vue中还有其他
arr.forEach((method, index)=>{
    arrob[method] = function(){
        var ret = arraypro[method].apply(this,arguments);
        dep.notify();
    }
})

vue3.0数据响应式原理 - Proxy

Proxy对象用于定义基本操作的自定义行为，用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

　　和defineProperty类似，功能几乎一样，但是用法不同

为什么要是用Procy？
    1、defineProperty只能监听某个属性，不能对全对象监听
    2、所以可以省去 for in 提升效率
    3、可以监听数组，不用再去单独对数组做特异性操作

改造的observer：

vue.prototype.observer = function(obj){ //注册get/set监听
    var self = this;
    this.$data = new Proxy(this.$data, {
        get: function(target, key, receiver){
            return target[key]
        },
        set: function(target, key, value, receiver){
            // return Reflect.set(target, key, value);
            // return target[key] = value
            target[key] = value;
            self.render();
        }
    })
}

Proxy 用途 -- 校验类型 -- 真正的私有变量

Diff算法和virtua doml

//1-对象 2-属性 3-对于属性的一系列配置

vue data responsive principle

Guess you like