تفسير $mount في Vue

يهدف هذا المقال إلى تحليل $mount.

$mount يقوم بالعمل بشكل عام بثلاث خطوات رئيسية:

1. إذا لم يكن هناك دالة render في option، فإننا نستخدم دالة compileToFunctions لتحويل نموذج HTML إلى دالة Render التي يمكن أن تنتج VNode.

2. إنشاء وحدة مراقبة Watcher، وتفعيل دالة updateComponent.

3. إنشاء vnode، وتحديثه على DOM من خلال patch. نظرًا لتقدير النطاق، سنذكر الخطوتين الأولى هنا، والخطوة الثالثة في المقال القادم. الآن، دعونا نتحدث عن ذلك بشكل دقيق. أولاً، نذهب إلى دالة $mount، كما هو موضح في الشكل التالي:

　

// يمكننا رؤية أن الكود أولاً يتحقق مما إذا كان هناك دالة render في option، وإذا لم يكن هناك، فإنه يتحقق مما إذا كان هناك template، وإذا لم يكن هناك template، يستخدم outerHTML للعنصر DOM. ما الذي سنفعله بعد الحصول على template؟ كما هو موضح في الشكل التالي.

　　

// يمكن رؤية أننا استدعينا دالة compileToFunctions لتحويل template إلى دالة render. هناك عمليةان في هذا السياق:

• // يتم تحويل template إلى AST Grammar Tree.
• // يتم إنشاء دالة render باستخدام AST Grammar Tree.

// سنحلل تفاصيل تحويل template إلى AST في هذا المقال، ولكن في وقت لاحق سنفتح فصلًا خاصًا لتحليل ذلك. الآن، لدينا دالة render، لذا ما الذي سنفعله بعد ذلك؟ بالطبع، سنبدأ بـ mountComponent. كما هو موضح في الشكل التالي:

　　

// يمكن رؤية ذلك في الشكل المقدم، حيث أعلن البرنامج عن دالة updateComponent، وهي الدالة التي سيتم استدعاؤها من قبل وحدة المراقبة Watcher، وسنرى ذلك عند تحليل وحدة المراقبة Watcher. بالنسبة لسبب وجود جملة تقديرية لتحديد دالة updateComponent بناءً على الشروط، يمكن رؤيتها من أداء الأداء، حيث أن إحدى الدوال تستخدم لاختبار أداء render وupdate. الآن، نحن نصل إلى Watcher، لنبدأ ببعض هذا الكود:

// we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (e.g. inside child
// component's mounted hook), which relies on vm._watcher being already defined
new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */);

دعونا نبدأ بتحليل ما يقوله التعليق حول ما هو _watcher؟ في الواقع، يمكنك رؤية ذلك في رمز forceupdate:

Vue.prototype.$forceUpdate = function () {
 var vm = this;
 if (vm._watcher) {
  vm._watcher.update();
 }
 };

هذا هو استدعاء update 方法 لهذا vm _watcher. يستخدم لتحديث قسري. لماذا يُدعى تحديثًا قسريًا؟ في Vue هناك قياس، إذا كان القيمة الجديدة == القيمة القديمة، فإن watcher لا يتم تحديث الرؤية. لذا، إذا كان عليك بالضرورة التحديث، فإنك تحتاج إلى استدعاء forceupdate لتحديث قسري. دعونا نرى ما هي المعلمات التي يتم تقديمها:

• vm: نموذج vm الحالي
• updateComponent هذا مهم جدًا، ويستخدم لتحديث vnode على DOM في وقت لاحق.
• وظيفة لا معنى لها
• خيار option، إذا لم يكن موجودًا، فإنه null
• true يستخدم لتحديد أي watcher. لأن computed properties و إذا كنت تريد تكوين watcher في options أيضًا، يتم أيضًا استخدامه new Watcher، بالإضافة إلى ذلك للتمييز بين الثلاثة. حسنًا، دعونا نرى ما يقوم به new Watcher، كما هو موضح في الشكل التالي.
  

　

أولاً، نرى أن هناك هذا التحكم

if (isRenderWatcher) {
 vm._watcher = this;
}

يمكنك رؤية أنه إذا كان سياق watcher مخصصًا لرسم الرؤية، أي عند استدعاء new Watcher هنا في mountComponent، فإن this يتم تخصيصه ل_watcher. ثم يتم إضافة watcher إلى _watchers لغرض إزالة watcher أيضًا عند تدمير المكون. ثم بدء تعيين أعضاء watcher، كما يلي:

this.deep = this.user = this.lazy = this.sync = false;

الآن، يأتي تخصيص getter، this.getter = expOrFn. هل تتذكر updateComponent الوظيفة التي تم إرسالها للتو؟ نعم، هذا هو التخصيص الذي تم إجراءه على getter. ثم نصل إلى:

this.value = this.lazy
 ? undefined
 : this.get();

دخول إلى get، نرى ماذا يتم القيام به. كود get كما يلي:

　

يمكننا رؤية أن أول ما يتم تنفيذه هو pushTarget(this)، والذي يحتوي على كود pushTarget(this) كما يلي:

func pushTarget (_target) {
 إذا (Dep.target) { targetStack.push(Dep.target); }
 Dep.target = _target;
}

إذن إذا كان هناك Dep.target، يتم وضع target في targetStack، وإذا لم يكن هناك، يتم تعيينه إلى target الحالي، أي هذا watcher. ثم، يتم تنفيذ خاصية getter الخاصة به، أي updateComponent التي تم إدخالها في func updateComponent. أما func updateComponent فهي الخطوة الثالثة التي ذكرناها في البداية.

ملخص

ما ذكرته أعلاه هو ما قدمه المحرر لكم حول $mount في Vue، نأمل أن يكون مفيدًا لكم، إذا كان لديكم أي استفسارات، فالرجاء ترك تعليق، وسأقوم بالرد على تعليقاتكم في الوقت المناسب. شكرًا جزيلاً أيضًا لدعمكم لموقع呐喊 لتعليم البرمجة!

بيان: محتوى هذا المقال تم جمعه من الإنترنت، يرجى الاعتراف بالحقوق الملكية للمالك الأصلي، تم جمع المحتوى من قبل المستخدمين على الإنترنت بشكل تلقائي، لا يمتلك هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (الرجاء استبدال #بـ @ عند إرسال البريد الإلكتروني) لإبلاغنا، يرجى تقديم الدليل ذات الصلة، وستقوم هذا الموقع بإزالة المحتوى المزعوم بشكل فوري.