Vue: [सुविधा] Vue अवलोकन को अक्षम करने की क्षमता

आपके मामले में Object.freeze() काम नहीं करेगा? यह v1.0.18 . से समर्थित है

1. आप में एक वस्तु / सरणी के लिए अवलोकन को छोड़ने के लिए की जरूरत है data , का उपयोग Object.freeze() उस पर;
2. आप एक वस्तु में डाल की जरूरत नहीं है data पर पहुँच के लिए this । यदि आप इसे केवल this के साथ created() हुक में संलग्न करते हैं, तो यह बिल्कुल भी नहीं देखा जाता है।

• Object.freeze यहां काम नहीं करता है। कैश समय के साथ अपडेट किया जाता है।
• मुख्य संसाधन _is_ प्रतिक्रियाशील। मुझे ज्यादातर नेस्टेड कैश ऑब्जेक्ट को गैर-प्रतिक्रियाशील बनाने में दिलचस्पी है।

तो शायद यह आपके मॉडल डिज़ाइन पर पुनर्विचार करने का समय है। उन चीज़ों को किसी चीज़ के नीचे क्यों घोंसला बनाना चाहिए?

क्योंकि कैश का उपयोग गतिशील रूप से संबंधित संसाधनों को देखने के लिए किया जाता है।

उदाहरण के लिए, हमारे पास Author और Post मॉडल हो सकते हैं। लेखक मॉडल पोस्ट मॉडल के लिए posts नामक एक से अधिक संबंधों को परिभाषित करता है। इस कैश में संबंध डेटा, साथ ही संबंधित संग्रह शामिल है।

लेखक को कॉल करना। पोस्ट कैश से पोस्ट प्राप्त करता है।

डिज़ाइन के अनुसार, Vue अपने स्वयं के राज्य-उत्परिवर्तन तंत्र के साथ जटिल वस्तुओं को Vue उदाहरण के data डालने को हतोत्साहित करता है। आपको केवल शुद्ध स्थिति को Vue इंस्टेंस में देखे गए डेटा के रूप में रखना चाहिए। आप वैसे भी इन राज्यों में हेरफेर कर सकते हैं, लेकिन इस तरह के जोड़तोड़ के लिए जिम्मेदार वस्तुओं को Vue इंस्टेंस की स्थिति का हिस्सा नहीं होना चाहिए।

पहला, स्पष्ट प्रश्न - शुद्ध अवस्था से आपका वास्तव में क्या तात्पर्य है? हमारे पास दो प्रकार के राज्य हैं:

• मॉडल स्थिति (स्थायी, एक स्टोर के साथ सिंक्रनाइज़ किया गया डेटा। उदाहरण के लिए, एक टूडू)
• दृश्य स्थिति (अस्थायी, डेटा जो दृश्य व्यवहार को नियंत्रित करता है। उदाहरण के लिए, कार्य सूची को संक्षिप्त/दिखाएं)

लेकिन वैसे भी:
सही है। मॉडल निश्चित रूप से 'जटिल' है, इसलिए यह अनुरोध वर्तमान सर्वोत्तम प्रथाओं के विरुद्ध है। साथ ही, मेरा प्रारंभिक उदाहरण बहुत अच्छा नहीं है - यह वही है जो अवलोकन को अक्षम करने के लिए काम करता है। यह हमारे वर्तमान सेटअप w/संभावित उपयोग का अधिक प्रतिनिधि है:

<!-- layout -->
<post :post="post"></post>
<author :author="author" ><author>
<comments :comments="comments"></comments>

import post from 'components/post';
import author from 'components/author';
import comments from 'components/comments';
/* post = {
 *     template: '...'
 *     props: ['post'],
 *     data: () => {collapsed: false},
 *     ...
 * };  */

new Vue({
    el: 'body',
    data() { 
        instance = postStore.fetch({include: ['author', 'comments.author']})
        Vue.nonreactive(instance.cache)

        return {post: instance, },
    },
    components: {
        post,
        author,
        comments,
    },
    ...
});

मूल रूप से, हमारे पास एक लेआउट में पुन: प्रयोज्य घटकों को रखने और संबंधित घटकों को डेटा लाने/बाध्यकारी करने के लिए जिम्मेदार एक मूल दृश्य है। चाइल्ड कंपोनेंट्स अपना डेटा नहीं लाते क्योंकि डेटा अलग-अलग संदर्भों में अलग होता है। उदाहरण के लिए, _user's_ टिप्पणियों की सूची बनाम _post's_ टिप्पणियों की सूची।

मॉडल इस अपवाद के साथ काफी 'गूंगा' है कि संबंधित वस्तुएं नेस्टेड नहीं हैं ( {post: {author: {}, comments: []}} ), बल्कि इसके बजाय कैश से देखा जाता है। उदाहरण के लिए, post.comments[2].author वही सटीक वस्तु हो सकती है जैसे post.author । इसलिए, लेखक ऑब्जेक्ट की कई प्रतियां रखने के बजाय, हमारे पास केवल एक है जिसे कैश से देखा जाता है। उपरोक्त में कोई उत्परिवर्तन नहीं है - सभी डेटा प्रारंभिक फ़ेच पर बनाए गए हैं।

साथ ही, यह नहीं कि अनुरोध अब प्रासंगिक है, लेकिन एक विकल्प 'निजी' ऑब्जेक्ट सदस्यों का निरीक्षण नहीं करना हो सकता है। यह एक प्रमुख सिंगल या शायद डबल अंडरस्कोर वाले सदस्य हो सकते हैं। इस दृष्टिकोण का नकारात्मक पक्ष यह है कि यह परिवर्तन को तोड़ देगा।

अगर किसी को इस कार्यक्षमता की आवश्यकता होती है, तो मैंने इसे उचित सलाह और सब कुछ के साथ vue-nonreactive के रूप में जारी किया है।

@rpkilby साझा करने के लिए धन्यवाद!

@rpkilby एक तरह से मैं एक वस्तु की प्रतिलिपि बनाता हूं और देखने योग्य/प्रतिक्रियाशीलता को हटा देता हूं

var newObj = JSON.parse(JSON.stringify(obj))

वास्तव में उपयोगी है क्योंकि मैं "राज्यों" की एक सरणी रखना चाहता हूं और एक राज्य इतिहास वस्तु को vuex में लागू करना चाहता हूं।

संपादित करें : यह समाधान मेरे मामले के लिए विशिष्ट था। मेरे पास एक वस्तु थी जहां मुझे एक समय में केवल संपत्ति मूल्यों की एक प्रति की आवश्यकता होती थी। मुझे संदर्भों, गतिशील अपडेट आदि की परवाह नहीं थी।

अभी वस्तु को फ्रीज करना कोई दीर्घकालिक समाधान नहीं है। [Vue-nonreactive] में Vue एक निर्भरता के रूप में होता है जो सीधे आगे कुछ करने की बात आती है तो अधिक हो जाता है। क्या instance.__ob__ !== false जैसे कोड में एक साधारण जांच पर्याप्त नहीं होगी? यह पुस्तकालयों को यह सुनिश्चित करने की अनुमति देगा कि कैश जैसी चीजें नहीं देखी जाएंगी।

class Unobservable {
  construtor() {
    Object.defineProperty(this, '__ob__', {  
      enumerable: false,  configurable: false,
      writable: false, value: false,
    });
  }
}

यह ज्यादातर Vue अनुप्रयोगों (कम से कम मेरे लिए) में उपयोग किए जाने वाले पुस्तकालयों के लिए एक मुद्दा है।

Vue को केवल डेटा की 1-स्तर की गहराई को देखने (परिभाषित करने के लिए) कैसे बताएं?

मेरा मामला है, मैं चाहता हूं कि जब data.curObj बदल जाए तो Vue को सूचित किया जाए,
लेकिन curObj.position , curObj.rotation , आदि के साथ न करें।

मैं Object.freeze , लेकिन इस मामले में, यह त्रुटि का कारण होगा जब तीन.जेएस ऑब्जेक्ट को मान निर्दिष्ट करने का प्रयास करता है।

क्या मुझे नीचे करना है?
(वास्तव में मैंने इसे किसी अन्य समान स्थान पर किया था)

data () {
  return {
    wrapper: Object.freeze({
      actual: [bigData]
    })
  }
},
methods: {
  operation () {
    this.wrapper = Object.freeze({
      actual: [newBigData]
    })
  }
}

// core/observer/watch.js
function _traverse (val: any, seen: ISet) {
  let i, keys
  const isA = Array.isArray(val)
  if ((!isA && !isObject(val)) || !Object.isExtensible(val)) {
    return
  }
  // ...

// core/observer/index.js
export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    observerState.shouldConvert &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value)
  }
  // ...

> curObj PerspectiveCamera {uuid: "BD3C14DF-8C2B-4B96-9900-B3DD0EAC1163", name: "PerspectiveCamera", type: "PerspectiveCamera", parent: null, children: Array(0), …}

> Lodash.isPlainObject(curObj) false
> Vue.isPlainObject(curObj) true

1. क्या हम केवल Object.isExtensible ( Object.freeze ) की तुलना में अवलोकन को अक्षम करने के लिए उपयोगकर्ता के लिए एक और शर्त जोड़ सकते हैं?
2. क्या हम Vue.isPlainObject डिटेक्शन में सुधार कर सकते हैं?

आप विनाशकारी का उपयोग कर सकते हैं

var newObj = { ...obj };

इसे ठीक करना चाहिए। यह isPlainObject विधि को झूठी वापसी कर देगा।

/**
 * Makes an object and it's children unobservable by frameworks like Vuejs
 */
class Unobservable {
  /**
   * Overrides the `Object.prototype.toString.call(obj)` result
   * <strong i="6">@returns</strong> {string} - type name
   * <strong i="7">@see</strong> {<strong i="8">@link</strong> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag}
   */
  get [Symbol.toStringTag]() {
    // Anything can go here really as long as it's not 'Object'
    return 'ObjectNoObserve';
  }
}

>> Object.prototype.toString.call(new Unobservable());
   "[object ObjectNoObserve]"

हाय सब, प्रतिक्रियाओं में खो गया एक बिंदु यह है कि मूल टिप्पणी में डेटा शुद्ध स्थिति नहीं article अपने author या comments । जब मैं article.author कॉल करता हूं, तो यह उस संबंध कैश में एक गतिशील संपत्ति लुकअप है और यह एक साधारण विशेषता पहुंच नहीं है। विचार करने के लिए कुछ बातें:

• कैश शुद्ध स्थिति नहीं है, इसलिए मैं नहीं चाहता कि इसे Vue द्वारा देखा जाए, क्योंकि यह संसाधनों की बर्बादी है।
• कैश को खारिज नहीं किया जा सकता है, क्योंकि मुझे अभी भी इन गतिशील लुकअप/अपडेट करने के लिए संदर्भ की आवश्यकता है।
• कैश प्रभावी रूप से एक सिंगलटन है और इसे बाहरी रूप से अपडेट किया जा सकता है। ऐप उसी के अनुसार अपडेट होता है।

कुछ सुझावों के जवाब में:

• JSON स्ट्रिंग/पार्स या ऑब्जेक्ट डिस्ट्रक्टिंग का उपयोग करना पर्याप्त नहीं है, क्योंकि यह दोनों ऑब्जेक्ट और कैश को डुप्लिकेट करता है, साथ ही मूल कैश के संदर्भ को तोड़ता है। मूल कैश संदर्भ को अपडेट करने से ऐप के इंस्टेंस अपडेट नहीं होंगे। इन गतिशील लुकअप और अपडेट के बिना कैश मूल रूप से व्यर्थ है, और संबंधित ऑब्जेक्ट को मूल मॉडल पर सरल विशेषताओं को बनाना बेहतर होगा। यह भी ध्यान देने योग्य है, ये सुझाव इन वस्तुओं के उदाहरण विधियों को तोड़ते हैं।
• यदि आप प्रकार निर्माण को नियंत्रित करते हैं, और प्रकार Vue के साथ उपयोग के लिए बनाए गए हैं, तो @Mechazawa के सुझाव समझ में

मेरी एकमात्र आलोचना:

Vue-nonreactive में Vue एक निर्भरता के रूप में होता है जो सीधे आगे कुछ करने की बात आती है तो अधिक हो जाता है।

मुझे यकीन नहीं है कि यह एक बुरी बात क्यों होगी? आप पहले से ही अपने एप्लिकेशन में Vue का उपयोग कर रहे हैं, और प्लगइन Vue के लिए विशिष्ट है। अगर मैं गलत नहीं हूं, तो अधिकांश निर्माण उपकरण डुप्लिकेट निर्भरताओं के साथ बंडल नहीं बनाने के लिए पर्याप्त स्मार्ट हैं। इसके बावजूद यह सही नहीं है । एक देव निर्भरता है, लेकिन एक रनटाइम निर्भरता नहीं है।

वैसे भी, मुझे यह देखकर खुशी हुई कि इस पोस्ट ने कुछ दिलचस्पी ली है, और मुझे यकीन है कि इनमें से कुछ अन्य समाधान कई अन्य मामलों में काम करेंगे। मैं बस अपनी मूल टिप्पणी से आवश्यकताओं को उजागर करना चाहता हूं और सुझाव उस मामले के लिए उपयुक्त विकल्प क्यों नहीं हैं।

इसलिए, मैंने हाल ही में इसमें भाग लिया, और पाया कि शॉर्ट-सर्किट Vue के अवलोकन तर्क का एक बहुत आसान तरीका है: _एक संपत्ति को गैर-कॉन्फ़िगर करने योग्य के रूप में परिभाषित करें।_

पृष्ठभूमि

मेरे आवेदन में, मुझे एक तृतीय पक्ष पुस्तकालय (ओपनलेयर) के साथ काम करना है, जो डेटा रखने वाले वर्ग उदाहरण बनाता है, और किसी भी प्रतिक्रियाशील प्रणाली का समर्थन नहीं करता है। एक को शूहॉर्न करने की कोशिश करने से बहुत सारे सिरदर्द हो गए हैं, मैं आपको बता दूं। इसलिए, इस लाइब्रेरी का उपयोग करने वाले बड़े पैमाने के एप्लिकेशन के लिए एकमात्र व्यवहार्य समाधान यह है कि OpenLayers के पास वह चीजें हों जो वह चाहता है, और मेरे लिए Vue को इन भयानक रूप से नेस्टेड, uber कयामत की वस्तुओं के साथ अच्छा खेलना है। इस मुद्दे को खोजने से पहले, मेरा एप्लिकेशन लगभग 3 गीगा रैम (हमारे सबसे बड़े डेटासेट पर) का उपयोग कर रहा था, यह सब Vue द्वारा इन वस्तुओं को प्रतिक्रियाशील बनाने के कारण हुआ। इसके अलावा, लोड करते समय यह वास्तव में धीमा था। मैंने Vue-nonreactive की कोशिश की, और इससे मदद मिली, लेकिन केवल हमें लगभग 1 गिग तक नीचे लाने के लिए। Vue का उपयोग करने से पहले, एप्लिकेशन लगभग 350megs पर बैठा था।

समाधान

आप जो कुछ भी प्रतिक्रियाशील नहीं होना चाहते हैं, उसे केवल configurable: false रूप में चिह्नित करें। यह उतना ही सरल है जितना:

Object.defineProperty(target, 'nested', { configurable: false });

(यह nested संपत्ति, और इसकी सभी संपत्तियों को देखे जाने से रोकता है।)

इतना ही! कोई Vue निर्भरता नहीं है, और यकीनन गलत भी नहीं है। इसके साथ, हमारे सबसे बड़े डेटासेट के साथ मेरा आवेदन 200megs तक कम हो गया है। यह सरल और आसान है, और इसे गैर-प्रतिक्रियाशील बनाने का एक 'आधिकारिक' तरीका बनाने के लिए Vue की ओर से केवल एक दस्तावेज़ीकरण परिवर्तन की आवश्यकता है।

दिलचस्प - निश्चित रूप से एक व्यवहार्य विकल्प की तरह लगता है।

क्या प्रतिक्रियात्मक अवलोकन को अस्थायी रूप से रोकने और बाद में इसे बंद करने का कोई तरीका है?

मेरे पास एक प्रोप वॉचर है, इसके भीतर मैं एक विशाल ऑब्जेक्ट अपडेट करता हूं जहां मैं पूरी डेटा तैयारी समाप्त होने के बाद ही डीओएम अपडेट को ट्रिगर नहीं करना चाहता हूं।

@intijk बिल्कुल नहीं। देखिए, यह इस बात पर निर्भर करता है कि आप क्या करने की कोशिश कर रहे हैं; Vue को अंततः आपके राज्य को लागू करना होगा, इसलिए इसकी गणना करते समय बस रुकने से ज्यादा मदद नहीं मिलती है। यदि, इसके बजाय, आप मध्यवर्ती राज्यों को छोड़ने का प्रयास कर रहे हैं, और केवल अंतिम स्थिति लागू करते हैं, तो बस एक नई वस्तु से शुरू करें, और फिर उस ऑब्जेक्ट को अंत में असाइन करें।

उदाहरण के लिए (स्यूडोकोड):

doUpdate()
{
   const state = _.cloneDeep(this.myState);

  // Do intermediate state updates

  this.myState = state;
}

(ऑब्जेक्ट रिएक्टिविटी के बारे में सामान्य Vue चेतावनियाँ लागू होती हैं।)

मेरी सिफारिश होगी कि उपरोक्त configurable ट्रिक का उपयोग करके अपनी बड़ी वस्तु के उन अनुभागों को छोड़ दें जिन्हें प्रतिक्रियाशील होने की आवश्यकता नहीं है। यदि यह सब _does_ प्रतिक्रियाशील होने की आवश्यकता है, तो मैं vuex जैसी किसी चीज़ का उपयोग करने की अनुशंसा करता हूं।

@ मोर्गुल मैंने पहले से ही इस ट्रिक का लंबे समय तक उपयोग किया है, लेकिन तथ्य यह है कि मैं अब इस ट्रिक का उपयोग नहीं करना चाहता।
मेरे मामले में, डेटा ऑब्जेक्ट अब एक तरह का बड़ा है, 2M से 100M तक, ऐसी ऑब्जेक्ट पर डीप कॉपी करना काफी दर्दनाक है।

@intijk जो कुछ के लिए Vue को बांधने के लिए अविश्वसनीय रूप से जटिल लगता है। यहां उपयोग का मामला क्या है?

@ मोर्गुल
मुझे नहीं लगता कि मामला जटिल है, मामला ही सरल है, बस डेटा बड़ा है। हर बार नेटवर्क कुछ अनुक्रमित विज़ुअलाइज़ेशन लॉग फ़ाइल लोड करेगा, और मेरे पास इसे प्रदर्शित करने के लिए एक विज़ुअलाइज़ेशन घटक है।

किसी की गणना की गई संपत्ति के भीतर एक गैर-प्रतिक्रियाशील क्षेत्र को परिभाषित करने के बारे में कोई विचार है? मेरा पहला विचार सरणी को असाइनमेंट की गैर-प्रतिक्रियाशीलता पर निर्भर करता है ...

template: '<div v-html="markdown.render(input, env)"></div>',
props: ['id', 'input'],
computed: {
  env:      function() { return { reactive:this.id, non_reactive:[] } },
  markdown: function() { return Markdown },
},

// within markdown.render():
  env.non_reactive[0] = internal_data;

लेकिन यह बिल्कुल स्व-दस्तावेजीकरण नहीं है :-)

हे लोगों। मुझे अभी यह समस्या मिली है और मैंने पाया है कि मुझे एक समस्या का सामना करना पड़ रहा है जो आरपीकिल्बी की समस्या की तरह है: मेरी परियोजना एक JSON ऑब्जेक्ट से Vue Virtual DOMs (या vnode कहा जाता है) की एक श्रृंखला का निर्माण करती है। मैं एंड्रॉइड ऐप बनाने के लिए इस JSON ऑब्जेक्ट का उपयोग करूंगा। वैसे भी, यह JSON ऑब्जेक्ट बड़े आकार का हो सकता है, और जब मैं इस JSON का उपयोग Vue में करता हूं, तो इसे Vue द्वारा देखा जाएगा। मैंने आरपीकिलबी और मोर्गुल के तरीके की कोशिश की, लेकिन यह काम नहीं करता है। (बीटीडब्ल्यू मैं एक टीम में हूं, जबकि कुछ लोग वीयू से बहुत परिचित नहीं हो सकते हैं, और वे शायद जेएसओएन का अवलोकन करेंगे, और मेरा वीयू संस्करण 2.5.16 है। ) मैं सोच रहा हूं कि क्या हम इसे Vue ट्रैवर्स में कर सकते हैं:
समारोह _traverse (वैल, देखा) {
वर मैं, चाबियाँ;
वर isA = Array.isArray (वैल);
अगर ((!isA && !isObject(val)) || Object.isFrozen(val) || VNode का वैल इंस्टेंस
|| (वैल && वैल ['__vueNonReactive__'])) {
वापसी
}
...
जैसा कि आप देख सकते हैं, मैं "val && val['__vueNonReactive__']" जोड़ता हूं। फिर मैं JSON के रूट नोड के साथ "__vueNonReactive__ = true" रखने के लिए अपने JSON ऑब्जेक्ट को संशोधित करता हूं, और यह मेरी समस्या का समाधान करता है।
मैं सोच रहा हूं कि क्या इससे कोई समस्या हो सकती है? और क्या इसे Vue में एक नई सुविधा के रूप में माना जाएगा जो डेवलपर को ऑब्जेक्ट की संपत्ति को कॉन्फ़िगर करके Vue द्वारा देखे जाने वाले ऑब्जेक्ट को कॉन्फ़िगर कर सकता है या नहीं? (ऑब्जेक्ट.फ्रीज़ ऑब्जेक्ट को अपरिवर्तनीय ऑब्जेक्ट के रूप में बदल सकता है, इसलिए यह हर स्थिति में फिट नहीं हो सकता)

इस पर विचार करें https://github.com/vuejs/vue/blob/v2.5.16/src/core/observer/index.js#L121
सेट val._isVue = true vue निरीक्षण प्रक्रियाओं से बच सकता है।

आज मैं एक मामले से मिला कि, Vue mapbox-gl के मानचित्र उदाहरण का निरीक्षण करता है, फिर अजीब चीजें हुईं, नक्शा हल्का हो गया। लेकिन मानचित्र उदाहरण को Vue उदाहरणों के बीच पारित करने की आवश्यकता है। मेरे द्वारा map._isVue = true जोड़ने के बाद, समस्या हल हो गई।

आधिकारिक तौर पर इसका समर्थन करने के लिए +1। मैं एक बड़ी वस्तु का उपयोग कर रहा हूं जिसे किसी घटक में प्रतिक्रियाशीलता की आवश्यकता नहीं है, और अप्रयुक्त प्रतिक्रिया को अक्षम करने से मेमोरी ऑब्जेक्ट का आकार 800 एमबी से 43 एमबी तक कम हो गया है
मैं संगतता समस्या के लिए @magicdawn समाधान का उपयोग कर रहा हूं, लेकिन मुझे लगता है कि @Mechazawa यहां सबसे अच्छा समाधान है।
__ob__ के configurable को झूठे कार्यों पर सेट करने के समाधान के लिए, लेकिन जब यह वास्तविक __ob__ सेट करने का प्रयास करता है तो Vue क्रैश हो जाता है।

मैंने एक Vue प्लगइन बनाया है जो Vue चर को गैर-प्रतिक्रियाशील बनाना संभव बनाता है (यह पहले के हुक का उपयोग करता है)।

यह vue- nonreactive - इस टिप्पणी को देखें - आपका समाधान Vue के अगले संस्करण के लिए काम नहीं करेगा।

चर को गैर-प्रतिक्रियाशील बनाने के तरीके के लिए कृपया Vue-Static देखें ।

<script>
export default {
    static() {
        return {
            map: null,
        };
    },
    mounted() {
        this.map = new mapboxgl.Map({...}); /* something heavy */
    },
};
</script>

हाय @samuelantonioli - ऐसा लगता है कि vue-static कुछ अलग करता है, एक संपूर्ण वस्तु के लिए प्रतिक्रियाशीलता को अक्षम करता है। इसके विपरीत, vue-nonreactive एक एकल संपत्ति के लिए अवलोकन को अक्षम करने में सक्षम है, जबकि शेष वस्तु को प्रतिक्रियाशील रखता है।

उस ने कहा, ऐसा लगता है कि इरादे थोड़े अलग हैं। स्थैतिक गुण परिवर्तनों का पालन नहीं करते हैं, लेकिन एक टेम्पलेट के लिए प्रस्तुत किए जाने का इरादा है। गैर-प्रतिक्रियाशील गुण देखे जाने के लिए नहीं हैं, और न ही उनका प्रतिपादन किया जाना है।

उदाहरण के लिए, मेरे मॉडल इंस्टेंस में ऑब्जेक्ट कैश का संदर्भ है जो संबंधित ऑब्जेक्ट लुकअप को सक्षम बनाता है। मैं instance और संबंधित instance.author को देखना/प्रस्तुत करना चाहता हूं, लेकिन instance._cache ।

new Vue({
    data() {
        const instance = postStore.fetch({include: ['author', 'comments.author']})
        Vue.nonreactive(instance._cache)

        return {post: instance, },
    },
    ...
});

किसी भी तरह से, सिर ऊपर करने के लिए धन्यवाद। मुझे यह देखना होगा कि अगला संस्करण प्रॉक्सी का उपयोग कैसे कर रहा है और देखें कि पर्यवेक्षक/प्रॉक्सी निर्माण को धोखा देने का कोई तरीका है या नहीं।

@LinusBorg - मुझे एक प्रयोगात्मक शाखा नहीं दिख रही है। अगले संस्करण के लिए विकास कहाँ हो रहा है?

हम अभी भी वह अवधारणा/प्रयोग चरण हैं और अभी तक एक शाखा प्रकाशित नहीं की है। इस पर गंभीर काम शुरू नहीं होगा, इससे पहले कि हमारे पास 2.6 अपडेट दरवाजे से बाहर हो, जो हमें उम्मीद है कि जल्द ही वीयू-क्ली 3.0 आउट होने के बाद कुछ काम करेगा।

अद्यतन के लिए धन्यवाद।

इसलिए मुझे यकीन नहीं है कि ES6 प्रॉक्सी पेश किए जाने के बाद समस्या उसी दायरे में मौजूद है। मेरे आवेदन में मैं उनका भारी उपयोग करता हूं, और उनके ओवरहेड बनाम वू के वर्तमान अवलोकन के ऊपरी हिस्से में बहुत छोटा लगता है। शैतान विवरण में होगा, मुझे संदेह है।

मेरे पास Vue-Static साथ समस्या यह है कि यह बेमानी लगता है। मैं अपने ऑब्जेक्ट को JS मॉड्यूल में बना सकता हूं, उसे आयात कर सकता हूं, और फिर एक गणना किए गए फ़ंक्शन से उसका मान वापस कर सकता हूं; चूंकि यह नहीं देखा जाएगा, इससे कोई फर्क नहीं पड़ता कि गणना किए गए फ़ंक्शन का मान कभी भी पुनर्गणना नहीं किया जाएगा। और, यह चिंताओं का बेहतर अलगाव है, क्योंकि मैं अपने vue घटकों में व्यावसायिक तर्क प्रकार की चीजें नहीं कर रहा हूं।

किसी भी घटना में, गुणों को गैर-कॉन्फ़िगर करने योग्य के रूप में सेट करने की मेरी चाल अभी भी कम से कम आक्रामक है, समस्या को संभालने के लिए कम से कम Vue निर्भर तरीका है। यह मानने का कोई कारण नहीं है कि यह ES प्रॉक्सी के साथ टूट जाएगा; आप अभी भी शायद गैर-कॉन्फ़िगर करने योग्य गुणों का निरीक्षण नहीं करना चाहते हैं। मैं पूरी तरह से गलत हो सकता था, लेकिन हम _know_ __ob__ जा रहे हैं... हम किसी संपत्ति के विन्यास योग्य होने के लिए चेक के बारे में नहीं जानते हैं।

साथ ही, यह 8+ महीनों से हमारे प्रोडक्शन कोड में एक विजेता की तरह काम कर रहा है। ;) (हमारे पास @samuelantonioli के समान समस्या स्थान है; हमारे पास एक OpenLayers मानचित्र है जिसे हमें Vue के अंदर काम करने की आवश्यकता है, बिना Vue गुब्बारे के हमारी मेमोरी 2.4 gigs ...)

मैं सहमत हूं, यदि आप किसी अन्य पैटर्न का उपयोग करते हैं जैसे आयात मॉड्यूल और गणना की गई संपत्तियों का उपयोग करते हैं, तो आपको Vue-Static की आवश्यकता नहीं है। मुझे बस एक ऐसा पैटर्न चाहिए था जिसे मैं अपने कर्मचारियों को सिखा सकूं जो उनके लिए समझने और उपयोग करने में आसान हो। आयात-मॉड्यूल-और-उपयोग-गणना-गुण पैटर्न स्पष्ट आईएमओ नहीं है।

थोड़ा सा ओटी: मुझे पूरा यकीन है कि ES6 प्रॉक्सी जाने का एक अच्छा तरीका है, लेकिन मुझे ब्राउज़र संगतता के बारे में कुछ चिंताएं हैं (आईई 11 और नीचे इसका समर्थन नहीं करते हैं)। मुझे दिलचस्पी है अगर कोई संगतता परत/कुछ प्रकार की पॉलीफिल होगी तो हम कठोर ब्राउज़र आवश्यकताओं वाले प्रोजेक्ट के लिए Vue का उपयोग कर सकते हैं।

Vue को केवल डेटा की 1-स्तर की गहराई को देखने (परिभाषित करने के लिए) कैसे बताएं?

इस विचार के लिए +1, बाहरी ग्राफिक लिब (जिसमें आमतौर पर बहु-स्तरीय नेस्टेड बड़ी वस्तुएं होती हैं) के साथ Vue का उपयोग करने के लिए डेटा की संरचना करना आसान होगा।

प्रतिक्रियाशील होने के लिए केवल कुछ गुणों को निर्दिष्ट करने के बारे में क्या?

मुझे यहां कुछ स्पष्ट याद आ रहा है, लेकिन इसका उपयोग कर रहे हैं। संपत्तिनाम = {/* यहां कुछ बड़ा */};
माउंटेड () हुक में गैर-मनाए गए गुणों का समाधान नहीं है?

हाय @vlahanas। देखें https://github.com/vuejs/vue/issues/2637#issuecomment -403630456।

सेट _isVue vue-devtool क्रैश कर देगा, इसके बजाय इस फ़ंक्शन का उपयोग करें

export default function setIsVue(val) {
    if (!val) return

    Object.defineProperty(val, '_isVue', {
        value: true,
        enumerable: false,
        configurable: true,
    })

    // vue-devtool
    // https://github.com/vuejs/vue-devtools/blob/c309065c57f6579b778341ea37042fdf51a9fc6c/src/backend/index.js#L616
    // 因为有 _isVue 属性
    if (process.env.NODE_ENV !== 'production') {
        if (!val.$options) {
            Object.defineProperty(val, '$options', {
                value: {},
                enumerable: false,
                configurable: true,
            })
        }

        if (!val._data) {
            Object.defineProperty(val, '_data', {
                value: {},
                enumerable: false,
                configurable: true,
            })
        }
    }

    return val
}

यह शोर में खो गया लेकिन एक संपत्ति को गैर-कॉन्फ़िगर करने योग्य के रूप में चिह्नित करना वास्तव में फिक्स जैसा लगता है।

Object.keys(scene).forEach((key)=>{
  Object.defineProperty(target, 'nested', { configurable: false });
});

वास्तव में अच्छा है जब मुझे THREE.Scene आसपास पास करने की आवश्यकता होती है, लेकिन मैं नहीं चाहता कि सचमुच संपूर्ण दृश्य ग्राफ़ वेधशालाओं की गड़बड़ी बन जाए। और फिर मैं अभी भी मूल वस्तु के चारों ओर से गुजर सकता हूं और यह उसके आधार पर प्रतिक्रियाशील हो सकता है। उत्तम!

अभी भी एक समस्या है।
मेरे पास गुणों के कई नेस्टेड स्तर वाली वस्तुएं हैं जिन्हें मैं गैर-प्रतिक्रियाशील रखना चाहता हूं।

भले ही मैं उपयोग करता हूं

यह शोर में खो गया लेकिन एक संपत्ति को गैर-कॉन्फ़िगर करने योग्य के रूप में चिह्नित करना वास्तव में फिक्स जैसा लगता है।

Object.keys(scene).forEach((key)=>{
  Object.defineProperty(target, 'nested', { configurable: false });
});

वास्तव में अच्छा है जब मुझे THREE.Scene आसपास पास करने की आवश्यकता होती है, लेकिन मैं नहीं चाहता कि सचमुच संपूर्ण दृश्य ग्राफ़ वेधशालाओं की गड़बड़ी बन जाए। और फिर मैं अभी भी मूल वस्तु के चारों ओर से गुजर सकता हूं और यह उसके आधार पर प्रतिक्रियाशील हो सकता है। उत्तम!

या

इस पर विचार करें https://github.com/vuejs/vue/blob/v2.5.16/src/core/observer/index.js#L121
सेट val._isVue = true vue निरीक्षण प्रक्रियाओं से बच सकता है।

आज मैं एक मामले से मिला कि, Vue mapbox-gl के मानचित्र उदाहरण का निरीक्षण करता है, फिर अजीब चीजें हुईं, नक्शा हल्का हो गया। लेकिन मानचित्र उदाहरण को Vue उदाहरणों के बीच पारित करने की आवश्यकता है। मेरे द्वारा map._isVue = true जोड़ने के बाद, समस्या हल हो गई।

नेस्टेड वस्तुओं में गुण प्रतिक्रियाशील हो जाते हैं।

मैंने इसे पुनरावर्ती रूप से करने की कोशिश की, लेकिन Maximum call stack size exceeded , और यह अधिक अंतराल का कारण बनता है।

@Mitroright आपको इसे

यहाँ समस्या यह है कि Vue Arrays को कैसे हैंडल करता है; बस geoJsonData संपत्ति को गैर-कॉन्फ़िगर करने योग्य चिह्नित करने से काम नहीं चल रहा है (मुझे इसके साथ समस्याएं हैं, लेकिन कभी भी 'क्यों' में खोला नहीं गया।)

कुछ इस तरह का प्रयास करें:

function makeArrayNonConfigurable(objects)
{
    objects.forEach((obj) =>
    {
        Object.keys(obj).forEach((key) =>
        {
            Object.defineProperty(obj, key, { configurable: false });
        });
    });
}

हम केवल एक स्तर की गहराई में जा रहे हैं, क्योंकि हमें बस इतना ही करना है; Vue नेस्टेड वस्तु गुणों में नहीं दिखेगा। हालांकि, ऐसा लगता है कि गैर-कॉन्फ़िगर करने योग्य के रूप में चिह्नित गुणों पर सरणी के अंदर ऑब्जेक्ट्स को देखना प्रतीत होता है, इसलिए आप जिस समस्या में चल रहे हैं।

अब, मैं आपको बताऊंगा कि 10,000 वस्तुओं के माध्यम से जाने के लिए कुछ सेकंड या तो पहली बार इस सरणी के माध्यम से मंथन होगा; इसे इस डेटा को पुनः प्राप्त करने की लागत के एक भाग के रूप में देखा जाना चाहिए। स्पष्ट रूप से, मैं उन वस्तुओं को एक वर्ग के साथ उपभोग करने की सलाह देता हूं (मैं एक वर्ग का उपयोग करता हूं जो इसके निर्माता से एक प्रॉक्सी देता है), और फिर उन वस्तुओं को एक अद्वितीय आईडी द्वारा कैशिंग करता है, यदि आप उन्हें एप्लिकेशन के जीवन के दौरान एक से अधिक बार लोड कर रहे हैं- अवधि। लेकिन यह वास्तव में एक डिज़ाइन विवरण है, और आपकी समस्या से बिल्कुल संबंधित नहीं है।

मुझे यहां समाधान मिला:
https://medium.com/@deadbeef404/tell -vue-js-to-stop-wasting-time-and-render-faster-7c3f7d2acaab

संक्षेप में, उपयोगिता कार्य करें:

import Vue from 'vue';

const Observer = (new Vue()).$data.__ob__.constructor;

export function makeNonreactive(obj) {
    obj.__ob__ = new Observer({});
}

हाय @Mitoright। केवल संदर्भ के लिए, लेख vue-nonreactive की हिम्मत का वर्णन कर रहा है। अंतर यह है कि क्या आप कोड को प्लगइन के रूप में उपयोग करना चाहते हैं ( vue-nonreactive माध्यम से) या एक सहायक फ़ंक्शन के रूप में। साथ ही, vue-nonreactive का उल्लेख इस मुद्दे के विवरण के ठीक ऊपर अद्यतन में किया गया है।

जैसे ही vue-devtool को फिर से अपडेट मिला, https://github.com/vuejs/vue/issues/2637#issuecomment -434154442 फिर से vue-devtool क्रैश कर देगा।

मेरा सुझाव है कि vue-nonreactive जैसे समाधान

__ob__ कोई भी गणना योग्य नहीं बनाने के लिए, defineProperty

vue-free.js

import Vue from 'vue'

const Observer = new Vue().$data.__ob__.constructor

function prevent(val) {
    if (val) {
        // Set dummy observer on value
        Object.defineProperty(val, '__ob__', {
            value: new Observer({}),
            enumerable: false,
            configurable: true,
        })
    }

    return val
}

// vue global
Vue.VUE_FREE = prevent

// window
global.VUE_FREE = prevent

// default export
export default prevent

चित्रा मैं इस पर अपना 2 सेंट और समाधान दूंगा।

मेरे पास फ्रीज अवधारणा और नकली पर्यवेक्षक दोनों को लागू करने के समान मुद्दे भी थे। मेरा डेटा सर्वर से आता है और एक पुनरावर्ती ट्रीनोड परिदृश्य है, मेरी परियोजना इस मामले में vuex का भी उपयोग कर रही है जिसने देखे गए मुद्दों में एक परत जोड़ दी है। मैं लगातार Maximum call stack size exceeded vues object.keys लूप के कारण प्राप्त करता हूं। मैंने नकली वीएनओड के अंदर डेटा को फ्रीज और सेट करने का प्रयास किया था, लेकिन न तो रिकर्सन मुद्दों को रोकना प्रतीत होता था।

मैं अंत में पीछे हट गया और क्लासिक रिवीलिंग मॉड्यूल पैटर्न का उपयोग करके अपने "गैर-प्रतिक्रियाशील" गुणों को लपेट लिया

यह वर्ग (ES6/टाइपस्क्रिप्ट) है, लेकिन इसे सादे दृश्य में भी लागू किया जा सकता है

import {  first, forEach } from 'lodash';

export class TreeNode {
    internalRefsInstance: () => { getParent: () => TreeNode; setParent: (parent: TreeNode) => void; getChildNodes: () => TreeNode[]; setChildNode: (childNode: TreeNode) => number; };

    get visitedDate(): string | undefined {
        return this._visitedDates.get(this.id) || undefined;
    }

    isSelectedTreeNode: boolean = false;
    showSubheader: boolean = false;
    showHelp: boolean = false;
    treeNodeIconName: string = 'empty';
    childTreeNodeCount: number = 0;

    constructor(public id: string,
        public componentName: string,
        private _visitedDates: Map<string, string>,
        public isActive: boolean = true,
        public nextFlow?: string,
        public prevFlow?: string,
        parent: TreeNode | undefined = undefined) {

        //invoke the internal refs module to create our static instance func to get the values from
        this.internalRefsInstance = this.nonReactiveModule();
        this.internalRefsInstance().setParent(parent);
    }
    nonReactiveModule = () => {
        let _parent: TreeNode | undefined = undefined;
        let _childNodes: TreeNode[] = [];
        const _getParent = (): TreeNode | undefined => {
            return _parent;
        };
        const _setParent = (parent: TreeNode | undefined): void => {
            _parent = parent;
        };
        const _getChildNodes = (): TreeNode[] => {
            return _childNodes || [];
        };
        const _setChildNode = (childNode: TreeNode): number => {
            if (!_childNodes) {
                _childNodes = [];
            }
            _childNodes.push(childNode);
            return _childNodes.length;
        };
        const returnObj = {
            getParent: _getParent,
            setParent: _setParent,
            getChildNodes: _getChildNodes,
            setChildNode: _setChildNode,
        };
        return () => { return returnObj; };
    }

    getParent(): TreeNode | undefined {
        return this.internalRefsInstance().getParent();
    }

    getChildNodes(): TreeNode[] {
        return this.internalRefsInstance().getChildNodes();
    }

    setChildNode(childFlow: TreeNode): void {
        this.childTreeNodeCount = this.internalRefsInstance().setChildNode(childFlow);
    }

    clone(parent: TreeNode | undefined = undefined): TreeNode {
        const newInstance = new TreeNode(this.id, this.componentName, this._visitedDates, this.isActive, this.nextFlow, this.prevFlow, parent);
        newInstance.showHelp = this.showHelp;
        newInstance.showSubheader = this.showSubheader;
        newInstance.isSelectedTreeNode = this.isSelectedTreeNode;
        forEach(this.getChildNodes(), (flow: TreeNode) => {
            newInstance.childTreeNodeCount = newInstance.internalRefsInstance().setChildNode(flow.clone(newInstance));
        });
        return newInstance;
    }

    setVisitedDates(visitedDates: Map<string, string>): void {
        this._visitedDates = visitedDates;
        forEach(this.getChildNodes(), (flow: TreeNode) => {
            flow.setVisitedDates(visitedDates);
        });
    }

    setAsSelected(setParent: boolean = true, setAllFirstChildren: boolean = true): void {
        this.isSelectedTreeNode = true;
        if (setAllFirstChildren) {
            const firstChildFlow = first(this.getChildNodes());
            if (firstChildFlow) {
                firstChildFlow.setAsSelected(false, true);
            }
        }

        if (setParent && this.getParent()) {
            this.getParent()!.setAsSelected(setParent);
        }
    }
    resetSelected(resetChildren: boolean = true): void {
        this.isSelectedTreeNode = false;
        if (resetChildren) {
            forEach(this.getChildNodes(), (flow: TreeNode) => {
                flow.resetSelected(resetChildren);
            });
        }
    }
}

गणना मेरे मामले में काम नहीं करती है क्योंकि मुझे अभी भी पूर्ण वस्तु की आवश्यकता है, न कि एक हैंडलर मुझे गणना पर परिवर्तन भेज रहा है। कम से कम अगर मैं समझ रहा हूं कि गणना किए गए सबसेट परिणाम के खिलाफ एक गहरा द्रष्टा कैसे काम करेगा।

मुझे लगता है कि इसे अगले स्तर तक ले जाना प्रक्रिया को तेज करने के लिए इंजेक्शन गैर-पुनरावर्ती सहायक या सजावटी बनाना होगा। कोई उपयोगी फ़ीडबैक बहुत अच्छा होगा।

ऐसा लगता है कि किसी ने इस मुद्दे को पहले ही हल कर लिया है,

आशा है कि आप https://github.com/vuejs/vue/issues/4384 पर सभी विवरणों की जांच करेंगे

नमस्ते, मैंने #10265 विशेष रूप से इसलिए बनाया क्योंकि मुझे इस पुराने मुद्दे की जानकारी नहीं थी।
मैं बस सोच रहा हूं कि भविष्य में सबूत होने और Vue के साथ संगत रहने के लिए सलाह दी गई समाधान क्या होगा जब यह प्रॉक्सी का उपयोग करेगा।
का उपयोग करते हुए Object.defineProperty के साथ configurable: false अच्छी तरह से काम करता है (लेकिन यह एक संपत्ति होने मौजूदा सेटर / गेटर प्रतिक्रियाशील बनने के लिए नहीं रोकता है)।
क्या यह तकनीक अभी भी Vue 3 के साथ प्रयोग योग्य होगी?
धन्यवाद

@ कॉलिन-गायॉन configurable: false शायद _not_ काम करेगा, खासकर जब से ऐसा लगता है कि https://github.com/vuejs/vue-next/blob/d9c6ff372c10dde8b496ee32f2b9a246edf66a35/packages/reactivity/src/reactive.ts#L159 . यदि यह Vue 3.x में समाप्त होता है, तो गैर-प्रतिक्रियाशील वस्तु को चिह्नित करने के लिए एक आधिकारिक API होगा।

ध्यान दें कि नए प्रस्तावित Vue.observable , जब कोई प्रॉपर्टी किसी प्रतिक्रियाशील वस्तु पर सेट की जाती है, तो _new_ मान दागी नहीं होगा और उसे वैसे ही छोड़ दिया जाएगा। इसके बजाय, _getter_ इसके लिए एक प्रतिक्रियाशील प्रॉक्सी लौटाएगा, अगर यह कैश में पहले से मौजूद नहीं है तो एक बना देगा।

एक भाग्यशाली खबर यह है कि, जब तक आप _that_ प्रतिक्रियाशील प्रॉक्सी पर बहुत कुछ नहीं करते हैं, तब तक आपको शायद ठीक होना चाहिए। यदि मेमोरी हॉग या इंटरऑपरेबिलिटी एक चिंता का विषय है, तो आपको निश्चित रूप से इसके बारे में चिंता करने की आवश्यकता नहीं है क्योंकि वस्तु जो भी हो - डेटा का एक विशाल संग्रह या पुस्तकालय से कोई विदेशी वस्तु जो व्यवहार अप्रत्याशित है, उस पर प्रतिक्रियाशीलता लागू होनी चाहिए, आप कहते हैं - _कुछ नहीं_ इसके बारे में, आखिर छुआ जाता है। इस अर्थ में Vue 3.x वास्तव में बहुत सारे कोने के मामलों को हल करता है जहाँ यह सुविधा अन्यथा उपयोगी होगी।

फिलहाल, vue-next कोड प्रतीक कुंजियों को प्रतिक्रियाशील होने से रोकता है, ठीक वैसे ही जैसे Vue का वर्तमान संस्करण करता है।

इस पर विचार करें https://github.com/vuejs/vue/blob/v2.5.16/src/core/observer/index.js#L121
सेट val._isVue = true vue निरीक्षण प्रक्रियाओं से बच सकता है।

आज मैं एक मामले से मिला कि, Vue mapbox-gl के मानचित्र उदाहरण का निरीक्षण करता है, फिर अजीब चीजें हुईं, नक्शा हल्का हो गया। लेकिन मानचित्र उदाहरण को Vue उदाहरणों के बीच पारित करने की आवश्यकता है। मेरे द्वारा map._isVue = true जोड़ने के बाद, समस्या हल हो गई।

मैं इस पद्धति का उपयोग तब तक कर रहा था जब तक कि मुझे Vue dev टूल्स द्वारा काट नहीं लिया गया क्योंकि यह देखता है कि _isVue सच है और यह सोचता है कि ऑब्जेक्ट एक Vue घटक उदाहरण है, लेकिन ऐसा नहीं है।

एकमात्र हैक जिसे मैंने बिना किसी गंभीर दुष्प्रभाव के देखा है, वह vue-nonreactive पुस्तकालय के साथ ओपी का दृष्टिकोण प्रतीत होता है।

क्या इसके लिए V3 में वैकल्पिक समाधान हैं?

@HunderlineK उथलेरफ, उथला प्रतिक्रियाशील, मार्करॉ