[feature] Ability to disable Vue observation

[rpkilby]

Update:
If anyone ends up needing this functionality, I've released it as vue-nonreactive with the appropriate admonitions and everything.

---

We have some non-plain models where we need to disable Vue's observation and walking. An example is a resource model that has access to a cache so that it can lookup related resources. This causes all of the objects in the cache to become watched (probably inefficient), as well as some additional interactions with other code. Currently, we get around this by setting a dummy Observer on the cache. Something similar to...

import get from 'http';
import Resource from 'resource';


new Vue({
    data: { instance: {}, },
    ready() { this.fetch(); },

    methods: {
        fetch() {
            const Observer = Object.getPrototypeOf(this.instance.__ob__).constructor;

            get('/api/frobs')
            .then(function(data) {
                // initialize Resource w/ JSON document
                const resource = new Resource(data);

                // Protect cache with dummy observer
                resource.cache.__ob__ = new Observer({});

                this.instance = resource;
            });
        },
    },
});

This does work, but

• relies on vue's internals
• requires an already observed object since we cannot import the Observer class directly.

Proposal:
Add an official method for explicitly disabling Vue's observation/walking. eg, something like...

const someThing = {
  nestedThing: {},
};

// make entire object non-reactive
Vue.nonreactive(someThing);

// make nested object non-reactive
Vue.nonreactive(someThing.nestedThing);
vm.$set('key.path', someThing);

Considerations:

• What should happen if a user set a reactive key path to an non-reactive object? Should vue warn the user? eg,

  vm.$set('a', Vue.nonreactive({});
  
  // different from..
  vm.$set('a', {
      someKey: Vue.nonreactive({}),
  });

• Should an already reactive object warn the user if attempted to be made non-reactive? eg,

// error
Vue.nonreactive(vm.$data.a)

// valid
Vue.nonreactive(_.clone(vm.$data.a));

[azamat-sharapov]

Won't Object.freeze() not work in your case? It's supported since v1.0.18

[yyx990803]

1. If you need to skip observation for an object/array in data, use Object.freeze() on it;
2. You don't need to put an object in data in order to access it on this. If you simply attach it to this in the created() hook, it doesn't get observed at all.

[rpkilby]

• Object.freeze doesn't work here. The cache is updated over time.
• The main resource is reactive. I'm mostly interested in making the nested cache object non-reactive.

[yyx990803]

Then maybe it's time to rethink your model design. Why nest those things under something to be observed?

[rpkilby]

Because the cache is used to dynamically lookup related resources.

eg, we could have Author and Post models. The author model defines a to-many relationship called posts to the post model. This cache contains the relationship data, as well as the related collection.

calling author.posts gets the posts from the cache.

[yyx990803]

By design, Vue discourages putting complex objects with their own state-mutating mechanism into Vue instance's data. You should be only putting pure state as observed data into Vue instances. You may manipulate these state anyway you want, but the objects responsible for such manipulations should not be part of Vue instance's state.

[rpkilby]

First, clarifying question - what exactly do you mean by pure state? We have two types of state:

• model state (permanent, data synchronized with a store. eg, a todo)
• vue state (temporary, data that controls view behavior. eg, collapse/show the todo list)

But anyway:
That's fair. The model is definitely 'complex', so this request goes against current best practices. Also, my initial example isn't very good - it's just what worked to disable observation. This is more representative of our current setup w/ possible usage:

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

Basically, we have a parent vue responsible for placing reusable components in a layout and fetching/binding data to the associated components. The child components don't fetch their own data because the data is different in different contexts. eg, a list of a user's comments vs. a list of a post's comments.

The model is fairly 'dumb' with the exception that related objects are not nested ({post: {author: {}, comments: []}}), but are instead looked up from the cache. eg, post.comments[2].author may be the same exact object as post.author. So, instead of having multiple copies of the author object, we just have one that's looked up from the cache. There isn't any mutation in the above - all data is made on the initial fetch.

Also, not that the request is relevant any more, but an alternative might be to not observe 'private' object members. This could be members with a leading single or maybe double underscore. Downside to this approach is that it would be breaking change.

[rpkilby]

If anyone ends up needing this functionality, I've released it as vue-nonreactive with the appropriate admonitions and everything.

[yyx990803]

@rpkilby thanks for sharing!

[jsgv]

@rpkilby One way I copy an object and remove the observable/reactivity

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

Really useful since I want to keep an array of "states" and implement a state history object in vuex.

Edit: This solution was specific to my case. I had an object where I only needed a copy of property values at a moment in time. I did not care about references, dynamic updates etc.

[Mechazawa]

Right now freezing the object is not a long-term solution. Vue-nonreactive has Vue as a dependency which is overkill when it comes to doing something that straight forward. Wouldn't a simple check in the code such as instance.__ob__ !== false be enough? This'd allow libraries to ensure that things like caches won't be observed.

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

This is mostly an issue for libraries used in Vue applications (at least for me).

[fritx]

How to tell Vue to only watch (defineProperty to) the 1-level depth of data?

My case is, I want Vue to get notified when data.curObj changed,
but do not with curObj.position, curObj.rotation, etc.

I used to use Object.freeze, but in this case, it would cause Error when three.js tries to assign values to the object.

Do I have to do the below?
(actually I did it in another similar place)

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. Can we add another condition for user to disable observing than just by Object.isExtensible (Object.freeze)?
2. Can we improve the Vue.isPlainObject detection?

[marceloavf]

You can use destructuring

var newObj = { ...obj };