Explication détaillée de l'utilisation de calculé dans Vue.js

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de Computed dans Vue.js. Quelles sont les précautions lors de l'utilisation de Computed dans Vue.js. Voici des cas pratiques, jetons un coup d'œil.

Attributs JS :

JavaScript a une fonctionnalité qui est <a href="http:/%20/%20www.php.cn/wiki/60.html" target="_blank">Object<code> <a href="http://www.php.cn/wiki/60.html" target="_blank">Object</a>.defineProperty.defineProperty , il peut faire beaucoup de choses, mais je me concentre uniquement sur une de ces méthodes dans cet article :

var person = {};
Object.defineProperty (person, 'age', {
 get: function () {
  console.log ("Getting the age");
  return 25;
 }
});
console.log ("The age is ", person.age);
// Prints:
//
// Getting the age
// The age is 25

(Obeject.defineProperty est une méthode d'Object. Le premier paramètre est le nom de l'objet, le deuxième paramètre est le nom de la propriété à définir et le troisième paramètre est un objet. Il peut définir si la propriété peut être modifiée, accessible en écriture, etc. Cet article utilise principalement la propriété accesseur de Object.defineProperty. Les amis intéressés peuvent rechercher sur Google ou consulter Js High et Programming)

Bien que person.age Il semble que nous accédions à un. propriété de l'objet, mais en interne, nous exécutons une fonction.

Une Vue.js fondamentalement réactive

Vue.js construit en interne un objet qui peut convertir des objets ordinaires en valeurs pouvant être observées (propriétés réactives), Le Voici une version simplifiée de la façon d'ajouter des attributs de réponse :

function defineReactive (obj, key, val) {
 Object.defineProperty (obj, key, {
  get: function () {
   return val;
  },
  set: function (newValue) {
   val = newValue;
  }
 })
};
// 创建一个对象
var person = {};
// 添加可响应的属性"age"和"country"
defineReactive (person, 'age', 25);
defineReactive (person, 'country', 'Brazil');
// 现在你可以随意使用person.age了
if (person.age < 18) {
 return &#39;minor&#39;;
}
else {
 return &#39;adult&#39;;
}
// 设置person.country的值
person.country = &#39;Russia&#39;;

Fait intéressant, 25 et « Brésil » sont également des variables à l'intérieur de la fermeture, qui ne peuvent être utilisées que lorsqu'elles sont attribuées à Val. ne changez que lorsque vous leur donnez de nouvelles valeurs. person.country n'a pas la valeur « Brésil », mais la fonction getter a la valeur « Brésil ».

Déclarer une propriété calculée

Créons une fonction definitionComputed qui définit une propriété calculée. Cette fonction est la même que lorsque vous utilisez habituellement calculé.

defineComputed (
 person, // 计算属性就声明在这个对象上
 'status', // 计算属性的名称
 function () { // 实际返回计算属性值的函数
  console.log ("status getter called")
  if (person.age < 18) {
   return &#39;minor&#39;;
  }
  else {
   return &#39;adult&#39;;
  }
 },
 function (newValue) {
  // 当计算属性值更新时调用的函数
  console.log ("status has changed to", newValue)
 }
});
// 我们可以像使用一般的属性一样使用计算属性
console.log ("The person&#39;s status is: ", person.status);

Écrivons une fonction simple definitionComputed qui prend en charge l'appel des méthodes de calcul, mais nous n'en avons pas actuellement besoin pour prendre en charge updateCallback .

function defineComputed (obj, key, computeFunc, updateCallback) {
 Object.defineProperty (obj, key, {
  get: function () {
   // 执行计算函数并且返回值
   return computeFunc ();
  },
  set: function () {
   // 什么也不做，不需要设定计算属性的值
  }
 })
}

Il y a deux problèmes avec cette fonction :

La fonction de calcul calculateFunc() est exécutée à chaque accès à la propriété calculée

Elle ne sait pas quand mise à jour (c'est-à-dire que lorsque nous mettons à jour un attribut dans certaines données, l'attribut de données sera également mis à jour dans l'attribut calculé)

// 我希望最终函数执行后是这个效果：每当person.age更新值的时候，person.status也同步更新
person.age = 17;
// console: status 的值为 minor
person.age = 22;
// console: status 的值为 adult

Ajouter une dépendance

Ajoutons une variable globale Dep :

var Dep = {
 target: null
};

C'est une dépendance, puis nous utilisons une opération Sao pour mettre à jour la fonction DefineComputed :

function defineComputed (obj, key, computeFunc, updateCallback) {
 var onDependencyUpdated = function () {
  // TODO
 }
 Object.defineProperty (obj, key, {
  get: function () {
   // 将onDependencyUpdated 这个函数传给Dep.target
   Dep.target = onDependencyUpdated;
   var value = computeFunc ();
   Dep.target = null;
  },
  set: function () {
   // 什么也不做，不需要设定计算属性的值
  }
 })
}

Maintenant revenons à avant Sur l'attribut de réponse défini :

function defineReactive (obj, key, val) {
 // 所有的计算属性都依赖这个数组
 var deps = [];
 Object.defineProperty (obj, key, {
  get: function () {
   // 检查是否调用了计算属性，如果调用了，Department.target将等于一个onDependencyUpdated函数
   if (Dep.target) {
    // 把onDependencyUpdated函数push到deos中
    deps.push (target);
   }
   return val;
  },
  set: function (newValue) {
   val = newValue;
   // 通知所有的计算属性，告诉它们有个响应属性更新了
   deps.forEach ((changeFunction) => {
    changeFunction ();
   });
  }
 })
};

Nous pouvons mettre à jour la fonction onDependencyUpdated après que la fonction définie par l'attribut calculé a déclenché le rappel de mise à jour.

var onDependencyUpdated = function () {
 // 再次计算 计算属性的值
 var value = computeFunc ();
 updateCallback (value);
}

Rassemblez-les :

Revoyons notre attribut calculé person.status :

person.age = 22;
defineComputed (
 person,
 'status',
 function () {
  if (person.age > 18) {
   return 'adult';
  }
 },
 function (newValue) {
  console.log ("status has changed to", newValue)
 }
});
console.log ("Status is ", person.status);

Je crois que vous l'avez maîtrisé après avoir lu le cas dans ce article Pour des méthodes plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

L'utilisation et la différence entre les méthodes calculées et dans Vue.js

beforeEach implémente la vérification des sauts d'itinéraire fonction

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!