जैसा कि आप जानते हैं, प्रत्येक डेटा प्रॉपर्टी के लिए, एक new Dep वर्ग बनाया जाता है। Each Dep वर्ग में watchers के सदस्य हैं।

मैंने vue.js स्रोत कोड को देखा और प्रत्येक घटक के लिए, केवल एक watcher वर्ग बनाया जा रहा है जिसमें render फ़ंक्शन (घटक का टेम्पलेट) भी है।

1) क्या आप उस स्थिति का वर्णन कर सकते हैं जब और क्यों data किसी एक घटक की संपत्ति में Dep वर्ग हो सकता है जिसमें एक से अधिक watcher वर्ग हों?

2) तो क्या मैं कुछ इस तरह से जोड़ सकता हूं: यदि हमारे पास एक घटक है जिसमें 5 data गुण हैं। इन 5 डेटा गुणों में से प्रत्येक में अलग-अलग Dep वर्ग उदाहरण हैं। और उनमें से प्रत्येक Dep वर्ग में समान Watcher है और वह watcher घटक का render फ़ंक्शन रखता है। यदि राज्य बदलता है, तो उन 5 Dep वर्ग की अधिसूचना में से एक चलाई जाती है और वह सूचना अपना watcher's render फ़ंक्शन चलाती है?

1
Giorgi Lagidze 28 जून 2019, 12:15

1 उत्तर

सबसे बढ़िया उत्तर

आपको यह परिचय उपयोगी लग सकता है:

https://medium.com/dailyjs/tracing-or-debugging-vue-js-reactivity-the-computed-tree-9da0ba1df5f9

जैसा कि आपने उल्लेख किया है, प्रत्येक डेटा प्रॉपर्टी का अपना उदाहरण Dep होगा। प्रत्येक Dep में एक subs संपत्ति होती है जिसमें ग्राहकों की एक श्रृंखला होती है। उस सरणी के सभी सदस्य Watcher वर्ग के उदाहरण होंगे। यदि कोई डेटा गुण बदलता है तो संबंधित Dep प्रत्येक Watcher को उसके subs में सूचित करेगा।

प्रत्येक Watcher, deps नामक संपत्ति में अपनी निर्भरता के संदर्भ भी रखता है। यह केवल Dep ऑब्जेक्ट्स की एक सरणी है, जिसके लिए Watcher सब्सक्राइब किया गया है।

आप इसे अपने ब्राउज़र डेवलपर टूल में देख पाएंगे। यदि आप एक Vue इंस्टेंस लॉग करते हैं, तो आपको _watchers नाम की एक प्रॉपर्टी मिलेगी, जिसमें उस घटक से संबंधित सभी दर्शकों को रखा जाएगा। उनके deps का विस्तार करने से आप Dep ऑब्जेक्ट तक पहुंच जाएंगे, हालांकि यह बताना मुश्किल हो सकता है कि प्रत्येक Dep किस डेटा प्रॉपर्टी का प्रतिनिधित्व करता है।

रेंडरिंग प्रक्रिया में एक Watcher है जिसका उपयोग वह अपनी डेटा निर्भरता को ट्रैक करने के लिए करता है। आपको प्रति घटक उदाहरण में से केवल एक ही मिलेगा।

अगर आप घड़ी या $watch। फिर से आप इन्हें _watchers में देख पाएंगे।

गणना की गई संपत्तियों में प्रत्येक में एक Watcher होता है। वे _watchers सरणी में मौजूद होंगे लेकिन उन्हें _computedWatchers में देखना आसान होगा।

ध्यान देने योग्य बात यह है कि निर्भरताएँ चपटी होती हैं। यदि आप गणना की गई संपत्ति का उपयोग करते हैं तो आपको वास्तव में उन सभी डेटा गुणों पर निर्भरता मिल जाएगी जिन्होंने इसमें योगदान दिया है। आप गणना की गई संपत्ति पर ही प्रत्यक्ष निर्भरता नहीं बना सकते।

तो अपने मूल प्रश्न पर वापस जाने के लिए:

  1. रेंडरिंग, परिकलित गुण और watch सभी Dep के subs में योगदान करेंगे। परिकलित गुण अक्सर निर्भरताओं के समतल होने के कारण आपकी अपेक्षा से अधिक ग्राहकों का योगदान देंगे।
  2. लगभग। render फ़ंक्शन को सीधे कॉल नहीं किया जाता है। जब प्रतिपादन के लिए Watcher को डेटा परिवर्तन के बारे में सूचित किया जाता है, तो यह वास्तव में घटक को केवल एक कतार में जोड़ देगा। उस प्रतिपादन कतार को अगली टिक की शुरुआत तक संसाधित नहीं किया जाएगा।
1
skirtle 29 जून 2019, 00:38