So verwenden Sie Vue.js+computed

Dieses Mal zeige ich Ihnen, wie Sie Vue.js+computed verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Vue.js+computed gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

JS-Attribute:

JavaScript hat eine Funktion namens Object.defineProperty, die viele Dinge tun kann, aber ich konzentriere mich hier nur darauf Artikel Für eine dieser Methoden:

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 ist eine Methode von Object. Der erste Parameter ist der Objektname, der zweite Parameter ist der Name der festzulegenden Eigenschaft und der dritte Parameter ist ein Objekt. Es kann festlegen, ob diese Eigenschaft geändert, beschreibbar usw. werden kann. Dieser Artikel verwendet hauptsächlich die Accessor-Eigenschaft von Object.defineProperty. Interessierte Freunde können Js High und Programming googeln)

Obwohl Person. age sieht so aus, als ob es auf eine Eigenschaft des Objekts zugreift. Intern führen wir eine Funktion aus.

Ein grundsätzlich responsives Vue.js

Vue.js erstellt intern ein Objekt, das gewöhnliche Objekte in beobachtbare Werte (responsive Eigenschaften) umwandeln kann Im Folgenden sehen Sie eine vereinfachte Version zum Hinzufügen von Antwortattributen:

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;;

Interessanterweise sind 25 und „Brazil“ immer noch Variablen innerhalb des Abschlusses, und val wird erst gültig, wenn ihnen neue Werte zugewiesen werden ändern. person.country hat nicht den Wert „Brazil“, aber die Getter-Funktion hat den Wert „Brazil“.

Deklarieren einer berechneten Eigenschaft

Lassen Sie uns eine Funktion defineComputed erstellen, die eine berechnete Eigenschaft definiert. Diese Funktion ist die gleiche wie bei der üblichen Verwendung von „Computed“.

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);

Schreiben wir eine einfache Funktion defineComputed, die den Aufruf von Compute-Methoden unterstützt, derzeit aber nicht zur Unterstützung von updateCallback erforderlich ist.

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

Es gibt zwei Probleme mit dieser Funktion:

Die Berechnungsfunktion „computeFunc ()“ wird jedes Mal ausgeführt, wenn auf die berechnete Eigenschaft zugegriffen wird.

Sie weiß nicht, wann sie aktualisiert werden soll ( d. h. wenn wir ein Attribut in bestimmten Daten aktualisieren und das Datenattribut auch im berechneten Attribut aktualisiert wird)

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

Abhängigkeit hinzufügen

Lassen Sie uns eine globale Variable Dep hinzufügen:

var Dep = {
 target: null
};

Dies ist eine Abhängigkeit, und dann verwenden wir eine Sao-Operation, um die defineComputed-Funktion zu aktualisieren:

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 () {
   // 什么也不做，不需要设定计算属性的值
  }
 })
}

Jetzt kehren wir zur Antwort zurück Vorher festgelegte Attribute:

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 ();
   });
  }
 })
};

Wir können die Funktion onDependencyUpdated aktualisieren, nachdem die durch die berechnete Eigenschaft definierte Funktion den Aktualisierungsrückruf auslöst.

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

Fügen Sie sie zusammen:

Lassen Sie uns unser berechnetes Attribut person.status noch einmal betrachten:

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);

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben, und mehr Wie aufregend, bitte achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie das Dropdown-Feld Bootstrap+Selectpicker in praktischen Projekten

Verwenden Sie Vue-Route +beforeEach Navigationsschutz erstellen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue.js+computed. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!