Shulou(Shulou.com)05/31 Report--

This article Xiaobian for you to introduce in detail the "Vue simulation to achieve data-driven methods", the content is detailed, the steps are clear, the details are handled properly, I hope that this "Vue simulation to achieve data-driven methods" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

I. Preface

The previous implementation extends a $set method for each object for the use of new properties, so that you 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 attribute changes and trigger view updates (see here for details)

Next, let's implement these Array mutation methods together.

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)

The effect is as follows:

After reading this, the article "data-driven method of Vue Simulation" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.