Les données Vue ne peuvent pas utiliser l'analyse des problèmes de la fonction flèche

Cet article présente principalement le problème selon lequel les fonctions fléchées ne peuvent pas être utilisées dans les données de vue. Cet article vous le présente en détail grâce à l'analyse du code source et a une certaine valeur de référence. Les amis qui en ont besoin peuvent s'y référer

<.>Tout d'abord, il faut Clairement,

est différent a() {}和 b: () => {}

 let obj = {
   a() {},
   // 相当于
   a:function() {},
   b: () => {}
}

1 Analyse du code source VUE.js

Notez ici Ne concevez que le code de base

Ce code est également le principe de mise en œuvre de l'UMD.Cet article n'est pas au centre. Ceux qui sont intéressés peuvent l'explorer par eux-mêmes.

(function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
   (global.Vue = factory());
  }(this, (function (){
   'use strict';
    console.log(this) //*undefined*
  })))

Analyse 1 :

Pour javascript, les fonctions en mode non strict auront un pointeur this, ce qui n'est pas clair ici Il existe un portail vers lequel cela pointe

Parlons du problème de pointage impliqué dans cet article. S'il ne s'agit pas d'un mode strict, cela devrait pointer vers la fenêtre, mais comme l'auteur de la vue utilise le mode strict, il pointe. à undefined

Voici le principe d'implémentation des données dans vue

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
   (global.Vue = factory());
  }(this, (function (){
   'use strict';
   function getData(data,vm) {
    return data.call(vm, vm)
   }
   function initData(params) {
    data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {};
   }
   initData()  
  })))

C'est-à-dire qu'à chaque fois qu'une nouvelle instance est créé, il sera jugé s'il existe une fonction de données. S'il y en a, elle sera attribuée à vm._data. Les étudiants attentifs constateront qu'il n'y a pas de données pour l'instance Vmm, mais vm._data

. Fonction es5 et fonction flèche es6

 var obj = {
   a: () => {
   'use strict';
    console.log(this,'a')
   },
   b() {
    console.log(this,'b')
   },
   c() {
    // window
    let e = () => {
     console.log(this,'e')
    }
    return e
   }
  }
  obj.a() // window
  obj.b() // obj
  obj.c()() // obj

Pour les fonctions ordinaires (en mode non strict), cela pointe vers l'appelant, et cela en es6 pointe vers le contexte au moment de la déclaration.

Combiné les deux points ci-dessus pour analyser le problème d'aujourd'hui

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
   (global.Vue = factory());
  }(this, (function (){
   'use strict';
   let vm = {}
   var data = () => {
    console.log(this);//undefined
    return {
     a: 1
    }    
   }
   function getData(data,vm) {
    return data.call(vm, vm)
   }
   function initData(params) {
    data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {};
   }
   initData()
   console.log(vm);
  })))

Le code ci-dessus montre que vous utilisez les fonctions fléchées pour donner des données : ( ) => {} Lorsque cela pointe vers undefined, il sera attribué à vm._data, mais il sera équivalent à un global. Tant que vous n'actualisez pas la page, il mettra en cache vos données.

Si nous utilisons

pour pointer vers l'instance Vm, elle sera donc mise à jour avec l'instance. data() {}this

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la façon de changer le menu secondaire du framework Vue iview-admin en un menu de troisième niveau

À propos de Comment utiliser le composant carrousel vue.js

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!