Vue2.X Data response principle

Object.defineProperty

The object.defineProperty () method directly defines a new property on an Object, or modifies an existing property of an Object, and returns the Object.

Vue2. X implements the data response using the get and set attributes.

Common attributes:

Value: indicates the value of the attribute. It can be any valid JavaScript value (numeric value, object, function, etc.). The default is undefined.

Get: A method that provides a getter for a property, undefined if there is no getter. When the property is accessed, the method is executed with no arguments, but with this object (which is not necessarily the object defining the property because of inheritance). The default is undefined.

Set: a method that provides a setter for a property, otherwise undefined. This method is triggered when the property value is modified. This method takes a unique parameter, the new parameter value for the property. The default is undefined.

Writeable: Value can be changed by the assignment operator if and only if the writable of the property is true. The default is false.

Enumrable: An attribute can appear in an object’s enumerable property if and only if its Enumerable is true. The default is false.

The description of this property can be changed and deleted from any additional device only if and if the property is true, works freely and freely. The default is false.

Vue is the process of changing data to make changes

Vue2.X Data response principle

Example: Initialize “I am Hector” on the page, delay for 2s, change the value of “Hector” to “Hector Real”, display “I am Hector Real” on the page, and realize the data response.

Create a page:


      
<html>
<head>
    <meta charset="utf-8">
    <title>LearnVue3.0</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript">
        const vm = new vue();
        // Delay time 2s to modify data
        setTimeout(function () {
            console.log('change');
            console.log(vm.$data);
            vm.$data.a = 'Hector Real';
        }, 2000);
    </script>
</body>
</html>
Copy the code

Object.defineproperty is used to implement data responses in test.js:

function vue() {
    // Fix objects and DOM
    this.$data = {
        a: 'Hector'
    };
    this.el = document.getElementById('app');
    // The text to render
    this._html = "";
    / / initialization
    this.observe(this.$data);
    this.render();
}

// Data listener
vue.prototype.observe = function (obj) {
    let self = this;
    let value;
    // Resolve the problem that only one attribute can be defineProperty
    // So a for-in traversal is done for the incoming obj
    for (let key in obj) {
        value = obj[key];
        if (typeof value === 'object') {
            // Set the listener on this object
            this.observe(value);
        } else {
            Object.defineProperty(this.$data, key, {
                // Rely on collection
                get: function () {
                    return value;
                },
                // Trigger the update
                set: function (newvalue) { value = newvalue; self.render(); }})}}}/ / rendering
vue.prototype.render = function () {
    this._html = "I am " + this.$data.a;
    this.el.innerHTML = this._html;
}
Copy the code

Run it in Chrome and the resulting page says: I am Hector Real

Log in Chrome’s Console:

Array characterization

For array characterization:

let arraypro = Array.prototype;
// Why create objects again, create is a deep copy, does not affect the previous ArrayPro
let arrayob = Object.create(arraypro);
// Define which methods trigger updates
let arr = ["push"."pop"."shift"];

// The method in arR can keep the original method and trigger the update
// Decorator mode
arr.forEach(function (method, index) {
    // Rewrite your push method
    arrayob[method] = function () {
        let ret = arraypro[method].apply(this.arguments);
        // self.render();
        console.log('Array change detected, trigger update');
        returnret; }});Copy the code

Example of console running in Chrome:

let arr = [];
arr.__proto__ = arrayob;
arr.push(1);
Copy the code

The results show:

Welcome to pay attention to my public number, thank you!