Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to realize the Vue Array mutation method". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I. Preface

In data-driven 3 for simulating Vue, we implemented an extension of a $set method for each object for the use of new properties so that we can listen for new properties.

Of course, arrays are also objects, and new properties can also be implemented through the $set method.

However, for arrays, we usually use methods such as push.

PS:Vue clearly points out that push, pop, shift, unshift, splice, sort and reverse methods are mutation methods, which can be used to listen for property changes and trigger view updates.

Note: we implement the Array mutation method and write it in extendObj.js, because arrays are also objects.

Second, the realization of Array mutation method

To implement these mutation methods, there is no doubt that we will rewrite them, will we rewrite them in Array.prototype?

Of course not, this will affect the prototype chain of all array objects!

To avoid this, and we just want to inherit these variant array methods on listening data objects, then you will find that it is similar to our implementation of the $set method in data-driven 3 of simulated Vue.

First, we create the arrKeys object to hold the array methods that need to be mutated and the constant object extendArr, as follows:

Let arrKeys = ['push',' pop', 'shift',' unshift', 'splice',' sort', 'reverse']; const extendArr = []

Then, on the extendArr object, listen to the methods in arrKeys one by one. Similar to the $set method, the overall structure is as follows:

! function () {arrKeys.forEach (function (key) {proxyObject (extendArr, key, function () {/ / TODO});};} ()

Note: the core of proxyObject method is Object.defineProperty. For more information, see data-driven 3 for simulating Vue.

Next, it is to implement the core part of the code, the purpose of rewriting these methods is to listen for data changes, so if the original function of the method remains unchanged, rewrite them, Array.xxx.apply can achieve the original function.

In addition, the three methods push, unshift, and splice can add properties to the original array, so we need to listen to the new properties and their property values, which is exactly the same as the $set method. Through $Observer, you can use the observe and convert methods.

The implementation code is as follows:

! function () {arrKeys.forEach (function (key) {proxyObject (extendArr, key, function () {console.log ('Fun' + key +'is observed'); let result; let arrProto = Array.prototype; let ob = this.$Observer; let arr = arrProto.slice.call (arguments); let inserted; let index; switch (key) {case 'push': {inserted = arr; index = this.length; break;} case' unshift': {inserted = arr; index = 0; break) } case 'splice': {inserted = arr.slice (2); index = arr [0]; break;}} result = arrProto.apply (this, arguments); if (inserted) {inserted.forEach (val = > {ob.observe (val); ob.convert (index++, val);});} return result;});});} ()

Finally, inherit these mutation methods on the objects that need to be monitored, as follows:

/ / observer.jsfunction Observer (data) {if (! (this instanceof Observer)) {return new Observer (data);} data.__proto__ = extendObj; / / inherit mutation methods push, pop, etc. If (Array.isArray (data)) {data.__proto__.__proto__ = extendArr;} this.data = data; this.walk (data);}

All right, it's all over, so let's test it:

Use strict'; let data = {msg: [5,2,0], user: {name: 'Monkey', age: 24}, lover: {name:' Dorie', age: 23}}; Observer (data); this is the end of the content of "how to implement Vue Array mutation". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.