今回は、Vue.js での computed の使用例について詳しく説明します。Vue.js で computed を使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。
JS 属性:
(Obeject.defineProperty は Object のメソッドであり、最初のパラメータはオブジェクト名、2 番目のパラメータはパラメータは設定するプロパティの名前で、3 番目のパラメータはプロパティを変更できるかどうか、書き込み可能かどうかなどを設定できるオブジェクトです。この記事では主に Object.defineProperty のアクセサ プロパティを使用します。 Google で検索するか、Js Advanced と Programming を確認してください) person.age はオブジェクトのプロパティにアクセスしているように見えますが、実際には内部で関数を実行しています。基本的にレスポンシブな Vue.js
Vue.js は、通常のオブジェクトを監視できる値 (レスポンシブ属性) に変換できるオブジェクトを内部的に構築します。 ここでは、レスポンシブ属性を追加する方法の簡略版を示します。 :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';
変数 であり、val は新しい値が割り当てられた場合にのみ変更されます。 person.country には値「Brazil」がありませんが、ゲッター関数には値「Brazil」があります。
計算されたプロパティを宣言する
計算されたプロパティを定義する関数defineComputedを作成しましょう。この機能は通常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
依存関係を追加します
グローバル変数 Dep: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);
Vue.jsでのcomputedメソッドとメソッドの使用方法の詳細な説明
以上がVue.js での計算ユースケースの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。