Vue: 【機能】Vue観​​測を無効にする機能

あなたの場合、 Object.freeze()は機能しませんか？ v1.0.18以降でサポートされています

1. data内のオブジェクト/配列の監視をスキップする必要がある場合は、 Object.freeze()を使用します。
2. あなたには、オブジェクトを配置する必要はありませんdataでそれにアクセスするために、 this 。 created()フックのthisに接続するだけでは、まったく観察されません。

• Object.freezeはここでは機能しません。 キャッシュは時間の経過とともに更新されます。
• メインリソースはリアクティブです。 私は主に、ネストされたキャッシュオブジェクトを非反応性にすることに関心があります。

次に、モデルの設計を再考する時が来たのかもしれません。 なぜそれらを観察すべきものの下に入れ子にするのですか？

キャッシュは関連するリソースを動的に検索するために使用されるためです。

たとえば、 Author Postモデルとpostsと呼ばれる多対多の関係を定義します。 このキャッシュには、関係データと関連するコレクションが含まれています。

author.postsを呼び出すと、キャッシュから投稿が取得されます。

設計上、Vueは、独自の状態変更メカニズムを備えた複雑なオブジェクトをVueインスタンスのdataすることを推奨していません。 観察されたデータとして純粋な状態のみをVueインスタンスに入れる必要があります。 これらの状態は任意の方法で操作できますが、そのような操作を行うオブジェクトはVueインスタンスの状態の一部であってはなりません。

まず、質問を明確にします-純粋な状態とは正確にはどういう意味ですか？ 状態には2つのタイプがあります。

• モデルの状態（永続的な、ストアと同期されたデータ。例：todo）
• vue状態（一時的な、ビューの動作を制御するデータ。たとえば、todoリストを折りたたむ/表示する）

とにかく：
それは公正です。 モデルは間違いなく「複雑」であるため、この要求は現在のベストプラクティスに反します。 また、私の最初の例はあまり良くありません-それは観察を無効にするために働いたものです。 これは、現在のセットアップと可能な使用法をよりよく表しています。

<!-- 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,
    },
    ...
});

基本的に、再利用可能なコンポーネントをレイアウトに配置し、関連するコンポーネントにデータをフェッチ/バインドする責任を負う親ビューがあります。 データはコンテキストによって異なるため、子コンポーネントは独自のデータをフェッチしません。 たとえば、_ユーザーの_コメントのリストと_投稿の_コメントのリスト。

関連するオブジェクトがネストされていない（ {post: {author: {}, comments: []}} ）ことを除いて、モデルはかなり「ダム」ですが、代わりにキャッシュから検索されます。 たとえば、 post.comments[2].authorは、 post.authorとまったく同じオブジェクトである可能性があります。 したがって、作成者オブジェクトの複数のコピーを作成する代わりに、キャッシュから検索したコピーを1つだけ作成します。 上記に変更はありません。すべてのデータは最初のフェッチで作成されます。

また、リクエストがもはや関連性があるというわけではありませんが、代わりに「プライベート」オブジェクトメンバーを監視しないこともできます。 これは、先頭にシングルまたはダブルアンダースコアが付いたメンバーである可能性があります。 このアプローチの欠点は、変化を壊すことになるということです。

誰かがこの機能を必要とすることになった場合、私はそれをvueとしてリリースしました反応しません。

@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アプリケーションで使用されるライブラリの問題です（少なくとも私にとっては）。

1レベルの深さのデータのみを監視する（definePropertyを）ようにVueに指示するにはどうすればよいですか？

私の場合、 data.curObj変更されたときにVueに通知を受け取りたいのですが、
ただし、 curObj.position 、 curObj.rotationなどは使用しないでください。

以前はObject.freezeを使用していましたが、この場合、three.jsがオブジェクトに値を割り当てようとするとエラーが発生します。

以下を行う必要がありますか？
（実際、私は別の同様の場所でそれを行いました）

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メソッドがfalseを返すようになります。

/**
 * 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]"

こんにちは、回答で失われた1つのポイントは、元のコメントのデータが純粋な状態ではないということです。 私の場合、リレーションシップルックアップキャッシュへのプライベート参照を持つモデルインスタンスがあります。 たとえば、 articleは、そのauthorまたはcommentsを検索できます。 article.authorを呼び出すと、これはその関係キャッシュへの動的なプロパティルックアップであり、単純な属性アクセスではありません。 考慮すべきいくつかの事柄：

• キャッシュは純粋な状態ではないので、リソースの浪費であるため、Vueによって監視されたくありません。
• これらの動的ルックアップ/更新を実行するには参照が必要なので、キャッシュを破棄することはできません。
• キャッシュは事実上シングルトンであり、外部で更新される場合があります。 アプリはそれに応じて更新されます。

いくつかの提案に応えて：

• JSON文字列化/解析またはオブジェクトの破棄を使用するだけでは不十分です。これは、オブジェクトとキャッシュを複製するだけでなく、元のキャッシュへの参照を壊すためです。 元のキャッシュ参照を更新しても、アプリのインスタンスは更新されなくなります。 これらの動的なルックアップと更新がなければ、キャッシュは基本的に無意味であり、関連するオブジェクトを元のモデルの単純な属性にする方がよいでしょう。 また、これらの提案は、これらのオブジェクトのインスタンスメソッドを壊します。
• @Mechazawaによる提案は、型の作成を制御し、Vueで使用するために型が作成されている場合に意味があります。 私の場合、これはVueに関連付けられていない外部ライブラリであり、アプリケーションでタイプを変更する手間をかけたくありません。 vueレイヤーでは、特定の既知のプロパティを観察不能としてマークする方がはるかに簡単です。

私の唯一の批判：

Vue-nonreactiveには、依存関係としてVueがあります。これは、単純なことを行う場合にはやり過ぎです。

なぜこれが悪いことになるのかわかりませんか？ アプリケーションですでにVueを使用しており、プラグインはVueに固有です。 私が間違っていなければ、ほとんどのビルドツールは、依存関係が重複するバンドルを作成しないほど賢いです。 とにかく、これは正しくありません。 開発依存関係はありますが、実行時依存関係はありません。

とにかく、この投稿がある程度の関心を集めているのを見てうれしく思います。これらの他のソリューションのいくつかは、他のさまざまなケースで機能すると確信しています。 元のコメントからの要件と、その提案がその場合の適切な代替案ではない理由を強調したいと思います。

それで、私は最近これに遭遇し、Vueの監視ロジックを短絡するはるかに簡単な方法があることを発見しました：_プロパティを構成不可能として定義します。_

バックグラウンド

私のアプリケーションでは、サードパーティのライブラリ（OpenLayers）を使用する必要があります。このライブラリは、データを保持するクラスインスタンスを作成し、反応性システムをサポートしていません。 靴べらを履こうとすると、非常に多くの頭痛の種になります。 したがって、このライブラリーを使用する大規模なアプリケーションの唯一の実行可能な解決策は、OpenLayersに希望どおりの機能を持たせることです。そして、私にとって、これらの恐ろしくネストされた、運命の超越オブジェクトでVueをより快適にプレイできるようにします。 この問題を見つける前は、私のアプリケーションは（最大のデータセットで）約3ギガのRAMを使用していましたが、そのすべてがVueによってこれらのオブジェクトを反応させることが原因でした。 また、ロードするときは本当に遅かった。 私はVue-nonreactiveを試しましたが、それは役に立ちましたが、私たちを約1ギガまで下げることができました。 Vueを使用する前は、アプリケーションは約350メガバイトでした。

解決

反応したくないものはすべて、 configurable: falseとしてマークするだけです。 それは次のように簡単です：

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

（これにより、 nestedプロパティ、およびそのすべてのプロパティが監視されなくなります。）

それでおしまい！ Vueに依存することはなく、間違いなく正しくありません。 これで、私のアプリケーションは最大のデータセットで200メガバイトになりました。 これはシンプルで簡単であり、Vue側でドキュメントを変更するだけで、何かを非反応性にする「公式」な方法にすることができます。

興味深い-間違いなく実行可能な代替案のようです。

観察反応を一時的に一時停止し、後で一時停止を解除する方法はありますか？

私はプロップウォッチャーを持っています。その中で、データの準備全体が完了した後にのみDOM更新をトリガーしたくない巨大なオブジェクトを更新します。

@intijk正確ではありません。 ほら、それはあなたがやろうとしていることに依存します。 Vueは最終的にあなたの状態を適用する必要があるので、計算中に一時停止するだけではあまり役に立ちません。 代わりに、中間状態をスキップして最終状態のみを適用しようとしている場合は、新しいオブジェクトから始めて、最後にそのオブジェクトを割り当てます。

例（擬似コード）：

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

  // Do intermediate state updates

  this.myState = state;
}

（オブジェクトの反応性に関する通常のVueの警告が適用されます。）

上記のconfigurableトリックを使用して、リアクティブである必要のない大きなオブジェクトのセクションをスキップすることをお勧めします。 すべてが反応する必要がある場合は、 vuexようなものを使用することをお勧めします。

@Morgul私はすでにこのトリックを長い間使用していましたが、実際には、このトリックはもう使用したくありません。
私の場合、データオブジェクトは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;

しかし、それは正確に自己文書化ではありません:-)

やあみんな。 この問題を見つけたところ、rpkilbyの問題によく似た問題に直面していることがわかりました。私のプロジェクトはJSONオブジェクトから一連のVue仮想DOM（またはvnodeと呼ばれる）を構築します。 このJSONオブジェクトを使用してAndroidアプリを作成します。 とにかく、このJSONオブジェクトは大きなサイズになる可能性があり、VueでこのJSONを使用すると、Vueによって監視されます。 rpkilbyとMorgulの方法を試しましたが、機能しません（BTW私はチームに所属していますが、Vueに慣れていない人もいるため、JSONが観察される可能性があります。Vueのバージョンは2.5.16です。 ）。 Vueトラバースでこれを実行できるかどうか疑問に思っています：
function _traverse（val、seen）{
var i、キー;
var isA = Array.isArray（val）;
if（（！isA &&！isObject（val））|| Object.isFrozen（val）|| VNodeのvalインスタンス
|| （val && val ['__ vueNonReactive __']））{
戻る
}
..。
ご覧のとおり、「val && val ['__ vueNonReactive__']」を追加します。 次に、JSONオブジェクトを変更して、JSONのルートノードで「__ vueNonReactive__ = true」を設定します。これにより、問題が解決します。
これで問題が発生するのではないかと思います。 そして、これは、開発者がオブジェクトのプロパティを構成することによって、Vueによって監視されるようにオブジェクトを構成できるかどうかを可能にする、Vueの新機能と見なされますか？（Object.freezeはオブジェクトを不変オブジェクトに変更する可能性があるため、すべての状況に対応できるわけではありません）

これを検討してくださいhttps://github.com/vuejs/vue/blob/v2.5.16/src/core/observer/index.js#L121
set val._isVue = trueは、vue監視手順から脱出できます。

今日、私はVueがmapbox-glのマップインスタンスを観察し、その後奇妙なことが起こり、マップが明るくなるというケースに遭遇しました。 ただし、マップインスタンスはvueインスタンス間で受け渡す必要があります。 map._isVue = trueを追加すると、問題は解決しました。

それを公式にサポートするには+1。 コンポーネントで反応性を必要としない大きなオブジェクトを使用していますが、未使用の反応性を無効にすると、メモリオブジェクトのサイズが800MBから43MBに減少しました
互換性の問題のために@magicdawnソリューションを使用していますが、ここでは
__ob__のconfigurableをfalseに設定するソリューションの場合、実際の__ob__を設定しようとすると、Vueがクラッシュします。

Vue変数を非反応性にすることを可能にするVueプラグインを構築しました（beforeCreateフックを使用します）。

これはvueよりもクリーンです@ rpkilby 、このコメントを見てください-あなたのソリューションは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のアップデートが公開されるまでは開始されません。これは、vue-cli 3.0が間もなくリリースされた後、それ自体がある程度の作業を必要とします。

更新していただきありがとうございます。

したがって、ES6プロキシが導入された後、問題が同じスコープに存在するかどうかはわかりません。 私のアプリケーションでは、それらを多用しており、それらのオーバーヘッドとvueの現在の観測のオーバーヘッドははるかに小さいようです。 悪魔が細部にいるのではないかと思います。

私がVue-Static抱えている問題は、それが冗長だと感じることです。 JSモジュールでオブジェクトを作成し、インポートして、計算された関数から値を返すことができます。 観測されないため、計算された関数の値が再計算されないことは問題ではありません。 そして、私はvueコンポーネントでビジネスロジックタイプのことを行っていないので、関心の分離がはるかに優れています。

いずれにせよ、プロパティを構成不可能として設定するという私のトリックは、問題を処理するための最も侵襲性が低く、Vueに依存しない方法です。 また、ESプロキシで機能しなくなると想定する理由もありません。 それでも、構成不可能なプロパティを監視したくない場合があります。 私は完全に間違っている可能性がありますが、 __ob__がなくなることを_知っています...プロパティが構成可能であるかどうかのチェックについてはわかりません。

さらに、8か月以上、本番コードのチャンピオンのように機能しています。 ;）（@ samuelantonioliと同様の問題スペースがあります。Vueがメモリを2.4ギガに膨らませることなく、Vue内で操作する必要のあるOpenLayersマップがあります...）

モジュールのインポートや計算されたプロパティなどの別のパターンを使用する場合は、 Vue-Staticは必要ありません。 従業員が理解しやすく、使いやすいパターンを従業員に教えることができればよかったのです。 import-module-and-use-computed-propertiesパターンは、それほど明確なIMOではありません。

少しOT：ES6プロキシが良い方法だと確信していますが、ブラウザの互換性について懸念があります（IE11以下はサポートしていません）。 より厳しいブラウザ要件を持つプロジェクトにVueを使用できるように、互換性レイヤー/ある種のポリフィルがあるかどうかに興味があります。

1レベルの深さのデータのみを監視する（definePropertyを）ようにVueに指示するにはどうすればよいですか？

このアイデアの+1を使用すると、外部のGraphic lib（通常はマルチレベルのネストされた大きなオブジェクトがあります）でVueを使用するためのデータを構造化するのが簡単になります。

一部のプロパティのみをリアクティブに指定するのはどうですか？

ここで明らかな何かが欠けているかもしれませんが、this.propertyName = {/ *ここで何か大きなものを使用しています* /};
Mounted（）フックで、観察されないプロパティを持つことの解決策ではありませんか？

こんにちは@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
set val._isVue = trueは、vue監視手順から逃れることができます。

今日、私はVueがmapbox-glのマップインスタンスを観察し、その後奇妙なことが起こり、マップが明るくなるというケースに遭遇しました。 ただし、マップインスタンスはvueインスタンス間で受け渡す必要があります。 map._isVue = trueを追加すると、問題は解決しました。

ネストされたオブジェクトのプロパティはリアクティブになります。

再帰的に実行しようとしましたが、 Maximum call stack size exceededであり、より多くのラグが発生します。

@Mitrorightこれは再帰的に行う必要がありますが、アプローチが完全に正しくなかった可能性があります。

ここでの問題は、Vueが配列を処理する方法です。 geoJsonDataプロパティを構成不可としてマークするだけでは、機能しない可能性があります（これには問題がありましたが、「理由」を掘り下げることはありませんでした）。

次のようなものを試してください。

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

必要なのはそれだけなので、1レベルだけ深くします。 Vueはネストされたオブジェクトのプロパティを調べません。 ただし、構成不可能とマークされたプロパティの配列内のオブジェクトを調べているように見えるため、発生している問題が発生します。

ここで、10,000個のオブジェクトを通過すると、この配列を初めて通過するときに数秒間かそこらでチャーンすることをお伝えします。 これは、このデータを取得するためのコストの一部と見なす必要があります。 率直に言って、これらのオブジェクトをクラスで使用し（コンストラクターからプロキシを返すクラスを使用します）、アプリケーションの存続期間中に複数回ロードする場合は、一意のIDでオブジェクトをキャッシュすることをお勧めします-スパン。 しかし、それは実際には設計の詳細であり、問​​題に正確に関連しているわけではありません。

私はここで解決策を見つけました：
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セントと解決策を与えるでしょう。

Freezeの概念と偽のオブザーバーの両方を実装する際にも同様の問題が発生しました。 私のデータはサーバーから取得され、再帰的なTreeNodeシナリオです。この場合、私のプロジェクトでもvuexを使用しており、発生した問題にレイヤーが追加されています。 vues object.keysループが原因で、常にMaximum call stack size exceededを取得しました。 フリーズして偽のVNode内でデータを設定しようとしましたが、どちらも再帰の問題を止めていないようです。

私はついに一歩下がって、古典的なRevealing Module Patternを使用して、「非反応性」のプロパティをラップしました

これはクラス（ES6 / typescript）ですが、プレーンビューにも同じことが適用できます

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);
            });
        }
    }
}

私の場合、Computedは機能しませんでした。これは、Computedの変更を送信するハンドラーではなく、完全なオブジェクトが必要だったためです。 少なくとも、ディープウォッチャーが計算されたサブセット化された結果に対してどのように機能するかを理解していない場合。

これを次のレベルに引き上げるのは、プロセスをスピードアップするために、注入された非再帰的なヘルパーまたはデコレーターを作成することだと思います。 どんな有用なフィードバックも素晴らしいでしょう。

誰かがすでにこの問題を解決したようです、

https://github.com/vuejs/vue/issues/4384ですべての詳細を確認して

こんにちは、特にこの以前の問題に気付いていなかったので、＃10265を作成しました。
将来を見据えて、プロキシを使用するときにVueとの互換性を維持するために、どのような解決策が推奨されるのか疑問に思っています。
Object.definePropertyをconfigurable: false Object.definePropertyと一緒に使用するとうまくいきます（ただし、既存のセッター/ゲッターを持つプロパティがリアクティブになるのを防ぐことはできません）。
この手法はVue3でも引き続き使用できますか？
ありがとう

@ collin-guyon configurable: falseは、特にhttps://github.com/vuejs/vue-next/blob/d9c6ff372c10dde8b496ee32f2b9a246edf66a35/packages/reactivity/src/reactive.ts#L159があるように見えるため、おそらく機能しません

新しく提案されたVue.observable同様に、リアクティブオブジェクトにプロパティが設定されている場合、その_new_値は汚染されず、そのままになります。 代わりに、_getter_はそのリアクティブプロキシを返し、キャッシュにまだ存在しない場合はプロキシを作成します。

幸いなことに、リアクティブプロキシで多くのことを行わない限り、おそらく問題はないはずです。 メモリの占有や相互運用性が懸念される場合は、オブジェクトが何であれ、それについて心配する必要はありません。ライブラリからのデータの巨大なコレクションや、反応性が適用された場合の動作が予測できない外部オブジェクトです。 —結局のところ、それについては何も触れられていません。 この意味で、Vue 3.xは、この機能が他の方法で役立つ多くのコーナーケースを実際に解決します。

現時点では、 vue-nextコードは、現在のバージョンのVueと同じように、シンボルキーが反応しないように除外しているようです。

これを検討してくださいhttps://github.com/vuejs/vue/blob/v2.5.16/src/core/observer/index.js#L121
set val._isVue = trueは、vue監視手順から脱出できます。

今日、私はVueがmapbox-glのマップインスタンスを観察し、その後奇妙なことが起こり、マップが明るくなるというケースに遭遇しました。 ただし、マップインスタンスはvueインスタンス間で受け渡す必要があります。 map._isVue = trueを追加すると、問題は解決しました。

_isVueが真であり、オブジェクトがVueコンポーネントインスタンスであると見なすため、Vue開発ツールがバグアウトするまでこのメソッドを使用していましたが、そうではありません。

深刻な副作用がないのを私が見た唯一のハックは、 vue-nonreactiveライブラリを使用したOPのアプローチのようです。

これに対するV3の代替ソリューションはありますか？

@HunderlineK ShoulderRef、shallowReactive、markRaw