vue is today a very popular front-end framework, but also has some shortcomings vue, you had to know it? The following small circle web front end apes teacher on what you resolve to defect vue two-way data binding, we hope for your help, let's look at it together.
1, after vue instance is created, which again add an attribute, not listening
When you create a Vue instance, it will traverse all DOM objects, and add the get and set for each data attribute. get and set allow you to change the observed data Vue and trigger an update. However, if you add (or remove) a property after Vue instantiation, this attribute is not vue process, change and get set.
If you do not want to create a new object, you can use Vue.set a new set of object attributes. This approach ensures that creates a responsive property to property, and trigger view updates:
the addToCart function (ID) { var Item = the this .cart.findById (ID); IF (Item) { item.qty ++ } the else { // Do not add directly to a property, such as. 1 = item.qty // use Vue. creating a property set responsive Vue. set (Item, ' the qty ' , . 1 ) the this .cart.push (Item) } } the addToCart (myProduct.id);
2, array
One drawback Object.defineProperty is unable to monitor an array of changes.
When used as an index (index) disposed array entry will not be detected vue:
app.myArray[index]=newVal;
However, the document mentions Vue Vue is detected by an array of changes, but only the following eight methods, vm.items [indexOfItem] = newValue this is undetectable.
1 push(); 2 pop(); 3 4 shift(); 5 6 unshift(); 7 8 splice(); 9 10 sort(); 11 12 reverse();
The same can be set using Vue.set array items:
Vue.set(app.myArray,index,newVal);
3、proxy与defineproperty
Proxy objects are officially released ES2015 specifications for custom behavior to define the basic operations (such as property search, evaluation, enumerations, function calls, etc.).
It set up a layer of "blocking" before the target object outside access to the object, this layer must first pass interception, thus providing a mechanism for access to the outside world to filter and rewrite.
We can think so, Proxy is an enhanced version of the full range of Object.defineProperty specific document can be viewed here;
Proxy up to 13 different interception method is not limited to apply, ownKeys, deleteProperty, has like, Object.defineProperty is not available.
Proxy returns a new object, we can only achieve the purpose of operating the new object, and Object.defineProperty can only traverse the object properties directly modified.
Proxy as a new standard for browser makers will be the focus of ongoing performance optimization, it is the legendary new standard of performance bonuses.
Of course, the disadvantage is that Proxy 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.
These are the disadvantages of a small circle web front end apes lecturers to share the vue two-way data binding, they are learning the front or at the little friends have jobs yet understand? We want to help you who want to know more small partners can log small circle ape the official website of understanding.