Explication détaillée de la mise en œuvre de la mutation du tableau Vue

Cette fois, je vous apporte une explication détaillée de l'implémentation de la mutation Vuearray, quelles sont les précautions pour l'implémentation de la mutation Vue

, et ce qui suit est un cas pratique, prenons un regarder.

Préface

De nombreux étudiants qui débutent dans l'utilisation de Vue constateront que lors de la modification de la valeur du tableau, la valeur change, mais la vue Mais il était indifférent. Est-ce parce que le tableau est trop froid ?

Après avoir vérifié les documents officiels, j’ai découvert que ce n’est pas que la déesse a trop froid, mais que vous n’avez pas utilisé la bonne méthode.

Il semble que si vous voulez que la déesse bouge toute seule, la clé est d'utiliser la bonne méthode. Bien que la méthode ait été donnée dans les documents officiels, je suis vraiment curieux si vous souhaitez débloquer plus de postures, il faut d'abord entrer dans le cœur de la déesse, j'ai donc eu l'idée d'explorer le principe réactif de. Vue. (Si vous êtes prêt à décoller mon cœur couche par couche. Vous constaterez que vous serez surpris... Je suis accro aux hurlements des fantômes et je n'arrive pas à m'en sortir QAQ).

Rappel au premier rang, le principe de réactivité de Vue utilise principalement l'Object

.defineProperty d'ES5. Les étudiants non informés peuvent afficher les informations pertinentes.

Pourquoi la baie ne répond-elle pas ?

Si vous y réfléchissez bien, la réponse de Vue est basée sur Object.definePropery. Cette méthode modifie principalement la description des propriétés de l'objet. Les tableaux sont en fait des objets, et en définissant les propriétés du tableau, nous devrions pouvoir produire des effets réactifs. Testez d’abord votre idée, retroussez vos manches et lancez-vous.

const arr = [1,2,3];
let val = arr[0];
Object.defineProperty(arr,'0',{
  enumerable: true,
  configurable: true,
  get(){
    doSomething();
    return val;
  },
  set(a){
    val = a;
    doSomething();
  }
});
function doSomething() {
}

Entrez ensuite arr, arr[0] = 2, arr respectivement dans la console, vous pouvez voir les résultats comme indiqué ci-dessous.

Hé, tout est comme prévu.

Ensuite, après avoir vu ce code, certains étudiants peuvent se poser des questions, pourquoi this[0] n'est-il pas renvoyé directement dans la méthode get() ? Mais devrions-nous utiliser val pour renvoyer la valeur ? Réfléchissez bien, putain ! ! ! C'est presque une boucle infinie. Pensez-y, get() lui-même consiste à obtenir la valeur de l'attribut actuel. L'appel de this[0] dans get() n'est-il pas équivalent à appeler à nouveau la méthode get() ? C'est tellement effrayant, tellement effrayant, que ça fait mourir de peur les ouvriers.

Bien que la déesse dans votre imagination puisse avoir cette posture, la déesse devant vous n'est en effet pas dans cette posture. Comment une personne comme moi, dont les attributs sont clairement révélés, peut-elle deviner les pensées de la déesse ? Pourquoi ne pas répondre aux données de cette manière ? Peut-être parce que les tableaux et les objets sont encore différents, la définition des propriétés des tableaux peut provoquer des problèmes et des bugs. Ou cela peut être dû au fait qu'une grande quantité de données peut être générée au cours du processus d'interaction, entraînant une dégradation globale des performances. Il est également possible que l'auteur utilise d'autres méthodes pour obtenir l'effet de réponse aux données après avoir pesé le pour et le contre. De toute façon, je n'arrive pas à comprendre.

Pourquoi puis-je répondre en appelant la méthode native du tableau ?

Pourquoi les données peuvent-elles répondre en utilisant ces méthodes de tableau ? Jetons d'abord un coup d'œil au code source de la partie tableau.

Pour faire simple, la fonction de def est de redéfinir la valeur de l'attribut objet.

//array.js
import { def } from '../util/index'
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
//arrayMethods是对数组的原型对象的拷贝，
//在之后会将该对象里的特定方法进行变异后替换正常的数组原型对象
/**
 * Intercept mutating methods and emit events
 */
[
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
]
.forEach(function (method) {
 // cache original method
 //将上面的方法保存到original中
 const original = arrayProto[method]
 def(arrayMethods, method, function mutator (...args) {
  const result = original.apply(this, args)
  const ob = this.ob
  let inserted
  switch (method) {
   case 'push':
   case 'unshift':
    inserted = args
    break
   case 'splice':
    inserted = args.slice(2)
    break
  }
  if (inserted) ob.observeArray(inserted)
  // notify change
  ob.dep.notify()
  return result
 })
})

Publiez le code de la partie def

/**
 * Define a property.
 */
export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
 Object.defineProperty(obj, key, {
  value: val,
  enumerable: !!enumerable,
  writable: true,
  configurable: true
 })
}

array.js mute certaines méthodes de tableaux Prenons la méthode push comme exemple. La première chose est d'utiliser original = arrayProto['push'] pour enregistrer la méthode push native.

Ensuite, il est temps de définir la méthode de mutation. Pour deffunction

, si vous n'entrez pas dans les détails, def(arrayMethods,method,function(){}), cette fonction peut être grossièrement exprimé comme arrayMethods[method] = function mutator(){};

En supposant que la méthode push est appelée plus tard, la méthode mutator est en fait appelée. Dans la méthode mutator, la première chose est d'appeler le. méthode push native enregistrée, recherchez d'abord la valeur réelle. Un tas de texte semble vraiment abstrait, alors écrivez une version discrète du code pour exprimer la signification du code source.

const push = Array.prototype.push;
Array.prototype.push = function mutator (...arg){
  const result = push.apply(this,arg);
  doSomething();
  return result
}
function doSomething(){
  console.log('do something');
}
const arr = [];
arr.push(1);
arr.push(2);
arr.push(3);

Affichez le résultat dans la console comme :.

Puis dans le code source

const ob = this.ob
  let inserted
  switch (method) {
   case 'push':
   case 'unshift':
    inserted = args
    break
   case 'splice':
    inserted = args.slice(2)
    break
  }
  if (inserted) ob.observeArray(inserted)
  // notify change
  ob.dep.notify()

这段代码就是对应的doSomething()了

在该代码中，清清楚楚的写了2个单词的注释notify change,不认识这2个单词的同学就百度一下嘛，这里就由我代劳了，这俩单词的意思是发布改变！每次调用了该方法，都会求出值，然后做一些其他的事情，比如发布改变与观察新增的元素，响应的其他过程在本篇就不讨论了。

[
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
]

目前一共有这么些方法，只要用对方法就能改变女神的姿势哟！

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

React Form组件封装步骤详解

Vue实现树形视图数据步骤详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!