Vue: [기능] Vue 관찰을 비활성화하는 기능

귀하의 경우에는 Object.freeze() 가 작동하지 않습니까? v1.0.18부터 지원됩니다.

1. data 의 객체/배열에 대한 관찰을 건너뛰어야 하는 경우 Object.freeze() 를 사용하십시오.
2. 당신은에서 개체를 넣을 필요가 없습니다 data 에 액세스하기 위해 this . created() hook의 this 에 간단히 붙이면 전혀 관찰되지 않습니다.

• Object.freeze 는 여기에서 작동하지 않습니다. 캐시는 시간이 지남에 따라 업데이트됩니다.
• 주요 자원은 _is_ 반응적입니다. 저는 주로 중첩된 캐시 개체를 비반응형으로 만드는 데 관심이 있습니다.

그런 다음 모델 디자인을 재고해야 할 때입니다. 왜 그런 것들을 관찰할 대상 아래에 내포합니까?

캐시는 관련 리소스를 동적으로 조회하는 데 사용되기 때문입니다.

예를 들어 Author 및 Post 모델이 있을 수 있습니다. 작성자 모델은 게시물 모델에 대해 posts 라는 대다 관계를 정의합니다. 이 캐시에는 관계 데이터와 관련 컬렉션이 포함됩니다.

author.posts를 호출하면 캐시에서 게시물을 가져옵니다.

의도적으로 Vue는 자체 상태 변경 메커니즘이 있는 복잡한 객체를 Vue 인스턴스의 data 넣는 것을 권장하지 않습니다. Vue 인스턴스에 관찰된 데이터로 순수 상태 만 넣어야 합니다. 이 상태는 원하는 대로 조작할 수 있지만 이러한 조작을 담당하는 객체는 Vue 인스턴스 상태의 일부가 아니어야 합니다.

첫째, 명확한 질문 - 순수 상태 란 정확히 무엇을 의미합니까? 두 가지 유형의 상태가 있습니다.

• 모델 상태(영구적, 저장소와 동기화된 데이터, 예: todo)
• vue 상태(임시, 보기 동작을 제어하는 ​​데이터. 예: 할 일 목록 축소/표시)

하지만 어쨌든:
공정 해. 모델은 확실히 '복잡'하므로 이 요청은 현재 모범 사례에 위배됩니다. 또한 내 초기 예는 그다지 좋지 않습니다. 관찰을 비활성화하는 데 효과가 있었습니다. 이것은 가능한 사용법이 있는 현재 설정을 더 잘 나타냅니다.

<!-- 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의_ 댓글 목록과 _post의_ 댓글 목록.

모델은 관련 개체가 중첩되지 않고( {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레벨 데이터 깊이만 감시(defineProperty to)하도록 지시하는 방법은 무엇입니까?

제 경우는 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]"

안녕하세요 여러분, 응답에서 잃어버린 한 가지 포인트는 원래 주석의 데이터가 순수한 상태 가 아니라는 것입니다. 제 경우에는 관계 조회 캐시에 대한 개인 참조가 있는 모델 인스턴스가 있습니다. 예를 들어 article 는 author 또는 comments 조회할 수 있습니다. article.author 호출하면 이는 해당 관계 캐시에 대한 동적 속성 조회이며 단순한 속성 액세스가 아닙니다. 고려해야 할 몇 가지 사항:

• 캐시는 순수한 상태가 아니므로 리소스 낭비이므로 Vue에서 캐시를 관찰하고 싶지 않습니다.
• 이러한 동적 조회/업데이트를 수행하려면 여전히 참조가 필요하므로 캐시를 버릴 수 없습니다.
• 캐시는 사실상 싱글톤이며 외부에서 업데이트될 수 있습니다. 그에 따라 앱이 업데이트됩니다.

몇 가지 제안에 대한 응답으로:

• JSON stringify/parse 또는 object destructuring을 사용하는 것만으로는 충분하지 않습니다. 이렇게 하면 개체 및 캐시가 복제되고 원본 캐시에 대한 참조가 손상되기 때문입니다. 원래 캐시 참조를 업데이트해도 더 이상 앱의 인스턴스가 업데이트되지 않습니다. 이러한 동적 조회 및 업데이트가 없으면 캐시는 기본적으로 무의미하며 관련 개체를 원래 모델의 간단한 속성으로 만드는 것이 좋습니다. 또한 주목할 가치가 있는 것은 이러한 제안이 이러한 개체의 인스턴스 메서드를 손상시킨다는 것입니다.
• @Mechazawa 의 제안은 유형 생성을 제어하고 유형이 Vue와 함께 사용하도록 빌드된 경우 의미가 있습니다. 제 경우에는 Vue에 얽매이지 않은 외부 라이브러리로, 애플리케이션에서 유형을 변경하는 번거로움을 겪고 싶지 않습니다. vue 레이어가 특정 알려진 속성을 관찰할 수 없는 것으로 표시하는 것이 훨씬 더 간단합니다.

나의 유일한 비판:

Vue-nonreactive는 Vue를 종속성으로 가지고 있으며 이는 직접적인 일을 할 때 지나치게 많습니다.

이것이 왜 나쁜 일인지 잘 모르겠습니다. 애플리케이션에서 이미 Vue를 사용하고 있으며 플러그인은 Vue에만 해당됩니다. 내가 틀리지 않았다면 대부분의 빌드 도구는 중복 종속성이 있는 번들을 만들지 않을 만큼 충분히 똑똑합니다. 어쨌든 이것은 옳지 않습니다 . 개발 종속성은 있지만 런타임 종속성은 없습니다.

어쨌든, 이 게시물이 약간의 관심을 얻은 것을 알게 되어 기쁩니다. 이러한 다른 솔루션 중 일부는 다른 다양한 경우에 작동할 것이라고 확신합니다. 나는 단순히 내 원래 의견의 요구 사항과 제안 사항이 그 경우에 적합한 대안이 아닌 이유를 강조하고 싶습니다.

그래서 최근에 이 문제를 접했고 Vue의 관찰 논리를 단락시키는 훨씬 쉬운 방법이 있음을 발견했습니다. _구성할 수 없는 속성으로 정의._

배경

내 응용 프로그램에서 데이터를 보유하고 반응성 시스템을 지원하지 않는 클래스 인스턴스를 생성하는 타사 라이브러리(OpenLayers)와 함께 작업해야 합니다. 하나를 구부리려고하면 너무 많은 두통이 발생했습니다. 따라서 이 라이브러리를 사용하는 대규모 애플리케이션을 위한 유일한 실행 가능한 솔루션은 OpenLayers가 원하는 방식으로 작업을 수행할 수 있도록 하고 제가 Vue가 이러한 끔찍하게 중첩된 uber 객체로 더 멋지게 작동하도록 하는 것입니다. 이 문제를 찾기 전에 내 애플리케이션은 약 3기가의 램(가장 큰 데이터 세트에서)을 사용하고 있었는데, 이 모든 것이 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 트래버스에서 이 작업을 수행할 수 있는지 궁금합니다.
기능 _traverse (발, 본) {
var i, 키;
var isA = Array.isArray(발);
if ((!isA && !isObject(val)) || Object.isFrozen(val) || VNode의 val instance
|| (발 && 발['__vueNonReactive__'])) {
반품
}
...
보시다시피 "val && val['__vueNonReactive__']"를 추가했습니다. 그런 다음 JSON의 루트 노드로 "__vueNonReactive__ = true"가 되도록 JSON 객체를 수정하면 문제가 해결됩니다.
이것이 문제를 일으킬 수 있는지 궁금합니다. 그리고 이것은 개발자가 객체의 속성을 구성하여 객체를 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 솔루션을 사용하고 있지만 @Mechazawa 가 여기에서 가장 좋은 솔루션이라고 생각합니다.
__ob__ 의 configurable 를 false 로 설정하는 솔루션의 경우 실제 __ob__ 를 설정하려고 할 때 Vue가 충돌합니다.

Vue 변수를 비반응형으로 만들 수 있는 Vue 플러그인을 빌드했습니다(beforeCreate 후크 사용).

이것은 vue-nonreactive - @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를 사용할 수 있도록 호환성 레이어/일부 유형의 폴리필이 있는지 여부에 관심이 있습니다.

Vue에 1레벨 데이터 깊이만 감시(defineProperty to)하도록 지시하는 방법은 무엇입니까?

이 아이디어에 대해 +1, Vue를 외부 Graphic lib(일반적으로 다중 수준의 중첩된 큰 개체가 있음)와 함께 사용하기 위한 데이터를 구조화하는 것이 더 쉬울 것입니다.

일부 속성만 반응형으로 지정하는 것은 어떻습니까?

여기에 분명한 것을 놓쳤을 수도 있지만 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 });
        });
    });
}

우리는 한 단계만 진행합니다. 그것이 우리가 해야 할 전부이기 때문입니다. 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 를 받았습니다. 나는 Freeze를 시도하고 가짜 VNode 내부에 데이터를 설정했지만 둘 다 재귀 문제를 막지 못하는 것 같았습니다.

나는 마침내 뒤로 물러서서 고전적인 Revealing Module Pattern을 사용하여 "비반응성" 속성을 감쌌습니다.

이것은 클래스(ES6/typescript)이지만 일반 vue에도 동일하게 적용될 수 있습니다.

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가 작동하지 않았습니다. 왜냐하면 나는 여전히 전체 객체가 필요하고 계산된 것에 대한 변경 사항을 나에게 보내는 핸들러가 필요하지 않았기 때문입니다. 적어도 깊은 감시자가 계산된 부분 집합 결과에 대해 어떻게 작동하는지 이해하고 있다면.

나는 이것을 다음 수준으로 끌어올리면 프로세스 속도를 높이기 위해 주입된 비재귀 도우미 또는 데코레이터를 만드는 것이 될 것이라고 생각합니다. 유용한 피드백이 있으면 좋습니다.

누군가가 이미 이 문제를 해결한 것 같습니다.

https://github.com/vuejs/vue/issues/4384 에서 모든 세부 정보를

안녕하세요, 저는 특히 이 이전 문제를 알지 못해서 #10265를 만들었습니다.
Vue가 Proxy를 사용할 때 미래에 대비하고 Vue와 호환되도록 조언하는 솔루션이 무엇인지 궁금합니다.
Object.defineProperty 를 configurable: false Object.defineProperty 와 함께 사용하면 잘 작동합니다(그러나 기존 setter/getter가 있는 속성이 반응하는 것을 방지하지는 않습니다).
이 기술을 Vue 3에서 계속 사용할 수 있습니까?
감사 해요

@colin-guyon configurable: false 는 아마도 작동하지 않을 것입니다. 특히 https://github.com/vuejs/vue-next/blob/d9c6ff372c10dde8b496ee32f2b9a246edf66a35/packages/reactivity/src#/reactive59t 가 있는 것 같기 때문입니다.

새로 제안된 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
set val._isVue = true 는 vue 관찰 절차에서 벗어날 수 있습니다.

오늘 저는 Vue가 mapbox-gl의 맵 인스턴스를 관찰한 후 이상한 일이 발생하여 맵이 가벼워지는 경우를 만났습니다. 그러나 맵 인스턴스는 vue 인스턴스 간에 전달되어야 합니다. map._isVue = true 추가한 후 문제가 해결되었습니다.

_isVue 가 사실이고 객체가 Vue 구성 요소 인스턴스라고 생각하지만 그렇지 않기 때문에 Vue 개발 도구가 도청에 물릴 때까지 이 방법을 사용하고 있었습니다.

심각한 부작용 없이 내가 본 유일한 해킹은 vue-nonreactive 라이브러리를 사용한 OP의 접근 방식인 것 같습니다.

이에 대한 V3의 대체 솔루션이 있습니까?

@ HunderlineKshallowRef,shallowReactive,markRaw