In diesem Artikel erfahren wir, wie die Berechnung funktioniert, indem wir eine einfache Version der Funktion implementieren, die dieselbe Funktion hat wie die Berechnung in Vue. Freunde, die daran interessiert sind, wie die Berechnung in Vue.js funktioniert, sollten gemeinsam
JS-Attribute lernen:
JavaScript hat eine Funktion, die , es kann viele Dinge tun, aber ich konzentriere mich in diesem Artikel nur auf eine dieser Methoden: Object.defineProperty
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
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 'minor'; } else { return 'adult'; } // 设置person.country的值 person.country = 'Russia';
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 'minor'; } else { return 'adult'; } }, function (newValue) { // 当计算属性值更新时调用的函数 console.log ("status has changed to", newValue) } }); // 我们可以像使用一般的属性一样使用计算属性 console.log ("The person's status is: ", person.status);
function defineComputed (obj, key, computeFunc, updateCallback) { Object.defineProperty (obj, key, { get: function () { // 执行计算函数并且返回值 return computeFunc (); }, set: function () { // 什么也不做,不需要设定计算属性的值 } }) }
// 我希望最终函数执行后是这个效果:每当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 };
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 () { // 什么也不做,不需要设定计算属性的值 } }) }
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 (); }); } }) };
var onDependencyUpdated = function () { // 再次计算 计算属性的值 var value = computeFunc (); updateCallback (value); }
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);
Über den Ausgabestream am Ende des Servlets in der Ajax-Technologie
Ajax+php implementiert drei Ebenen der Produktklassifizierung Verknüpfung
Ajax-Technologiezusammensetzung und Kernprinzipanalyse
Das obige ist der detaillierte Inhalt vonSo funktioniert die Berechnung in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!