Vue on the calculation of property and the principle of two-way binding understanding (vue2.x) and vue3.0

vue calculated property:

1. What is the calculation of property?                 

For purposes of calculating an attribute of the data simple calculation, if put too much calculation logic and causes the template in the template difficult to maintain.

It is calculated based on their properties depend caching . Calculation of property will only be re-evaluated when it changed its dependencies.

2. How to calculate the properties to use?

1. In a complete calculation of various properties in the complex logic includes an arithmetic, function calls, as long as the final result can be a return.

computed: { 
        reverseText: function () {
             return app1.text.split ( '') Reverse () the Join.. ( '');   // perform calculations on data, reverseText into the template, as long as the data changes dependent will change 
        } 
    }

2. calculating a plurality of attribute data may also depend Vue instances, as long as any of data changes, it will re-execute calculation of property, the view is also updated.

Small two aspects : one is to calculate the property may depend on other computing attributes;  two is to calculate the current attribute data may depend not only Vue instance, the data may also rely on other instances.

    <div id="app1"></div>
    <div id="app2">{{ reverseText}}</div>

var App1 = new new Vue ({ 
   EL: '# App1' , 
 Data: { 
      text: 'computed' 
    } 
}); 

var App2 = new new Vue ({ 
    EL: '# App2' , 
    computed: { 
        reverseText: function () {
             return app1.text.split ( ''). Reverse () the Join. ( '');   // use the data to calculate app1 
        } 
    } 
});

Each calculated attribute contains a getter and a setter , calculated properties will use the default getter , relevant usage is as follows:

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ');
                this.firstName = names[0];
                this.lastName = names[names.length - 1];
            }
        }
    }
});

In our daily use, usually you do not specifically declare setter, when the value calculated manually modify attributes like to modify a normal data as it will trigger the setter function, perform some custom operations

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ');
                thisnames = .firstName [0 ];
                 the this .lastName = names [of names.length -. 1 ]; 
            } 
        } 
    } 
}); 
// Now run vm.fullName = 'John Doe', setter is called, vm.firstName and vm.lastName will be updated accordingly.

In most cases, we will only use the default getter method to read a calculated property, rarely used setter in the business, so when you declare a property is calculated, you can use the default of writing directly, without having to getter and setter They are declared.

 

Summarize : When a required attribute data and judgment logical operation, giving rise to a computed attribute (computed), a calculated attribute is the greatest feature determines whether the change to determine data dependent, if no change will be stored before use data, do not get, although the method can also implement logic operations, but does not monitor whether the data has changed, it will be repetitive requests, so the calculation is more optimized properties and intelligent.

computed vs methods

　　- Calculation based on their properties are dependent caching.

　　- Calculate property only when its associated changes will depend re-evaluated

 

Case transferred from the correlation function: https://www.cnblogs.com/chaixiaozhi/p/8688820.html

---

---

Two-way binding principle:

 A common example of JavaScript objects passed in Vue as  data options, Vue will go through all of the properties of this object, and use defineProperty These attributes are all into getter / setter

Object.defineProperty ES5 is not in a shim feature, which is not supported by Vue IE8 and earlier browsers reasons

 // add attributes to the object syntax 
        var Data = {} 

        // IE8 and before the browser does not support 
        // way to add attributes to the object 
        // add the attribute name to the obj 
        // such benefits plus attributes that can be monitored assignment of attributes and value 
        // when the object assigned to this attribute, the method is called set 
        // invoked when the value of the get method 
        Object.defineProperty (Data, 'name' , { 

            get () { 
                // Console. log ( 'the value'); 
                // must finally write the property name in return _ GET 
                return _name; 
            }, 

            // value is what you assign values to pass over what 
            the SET (value) {
                 // console.log ( 'the SET'); 
                
                // must be written _ value property name = 
                _name = value
                // console.log(data.name);
                var list = document.querySelectorAll('[v-bind]')
                for(var i = 0; i < list.length; i++){
                    list[i].innerHTML = value;
                }
            }
        })

So that you can get and pass values ​​to monitor data through get and set

The above is the current two-way binding principle Vue2.x, but two-way binding principle Vue3.0 the upcoming release of the adoption of new technologies, is the proxy

proxy

 

Data = the let {} 
  
  // new new Object Proxy 
  the let proxyData = new new the Proxy (Data, { 
    GET (obj, prop) {       
      the console.log ( 'GET' ) 
      the console.log (obj) 
      the console.log (prop) 
      return obj [prop ] 
    }, 
    SET (obj, prop, value) {// obj: bound object // prop: forming properties // value: property value 
      obj [prop] = value 
      the console.log ( 'SET' ) 
      the console.log (obj) 
      the console.log (prop) 
      the console.log (value) 
    } 
  })

// obj: Object bound // prop: Fu attribute // value: property value 
new binding target of proxy data data, as long as the data attribute any change will be called 
no matter what the properties of this object will be called set or get

 Differences related to proxy and defineProperty of:

 1.Proxy up to 13 different interception method is not limited to apply, ownKeys, deleteProperty, has like are Object.definePropertynot available.

 2.Proxy returns a new object, we can only achieve the purpose of operating the new object, and Object.definePropertycan only traverse the object properties directly modified.

 3.Proxy as the new standard browser vendors will be the focus of ongoing performance optimization, is the legendary new standard of performance bonuses.

 4.Proxy disadvantage is compatibility issues, and can not be polished with polyfill, therefore Vue authors declare only need to wait until the next major version (3.0) in order to use Proxy rewrite.

 

Details Related reference: https: //www.jianshu.com/p/2df6dcddb0d7