Vue tries to observe enumerable but non-configurable properties

[saul]

Vue.js version

1.0.16

Reproduction Link

https://jsfiddle.net/5sH6A/275/
Check JavaScript console for error.

Steps to reproduce

Add a non-configurable, but enumerable property to component data/props.

What is expected?

Vue.js should not be redefining properties that are not configurable in defineReactive as by virtue of being non-configurable, they cannot change anyway so observing them is pointless (and also throws an error).

This bug currently makes it impossible to add Three.js objects to Vue components without causing this error. However a current workaround is to set convertAllProperties = true, as this triggers checks to ensure that non-configurable properties are not redefined.

What is actually happening?

Uncaught TypeError: Cannot redefine property: <property name>

[Mat-Moo]

FYI the fiddle is blank?

[saul]

Thanks @Mat-Moo, updated the link

[yyx990803]

It seems it's better to skip observing the entire object? I saw your other comment about a non-reactive object being converted when passed down as a prop. Maybe we need a way to explicitly declare non-reactive properties on a vm instance.

[saul]

I agree that that would be a good feature, but think it should be separate to this fix, which fixes objects that you want to be reactive with some non-configurable properties.

I think the way to solve the 'non-reactive object' suggestion would be to never observe objects that are frozen (e.g., with Object.freeze), and can be tested with Object.isFrozen.

[simplesmiler]

Maybe we need a way to explicitly declare non-reactive properties on a vm instance.

Yes please.

[yyx990803]

@saul makes sense, let's work off #2394 to fix this.

On the other hand, Vue already skips observing objects that are not extensible. But the user may have objects that should not be observed but should be mutable. So maybe a new option like nonReactive?

export default {
  // reactive data
  data () {
    return { a: 1 }
  },
  // non-reactive properties
  nonReactive () {
    return {
      vector: new THREE.Vector3( 1, 0, 0 )
    }
  }
})

Basically, this simply attaches the property to the instance without converting it - in addition, it should probably add a private marker to the object (if it's extensible) so that when the object is passed down as a prop, it doesn't get converted again.

[Mat-Moo]

For clarity should it be nonReactiveData so that it becomes an opposite to data? Maybe there could then be reactiveData (pseudo name for data)?

[Ben-Mack]

@yyx990803 Please consider to add nonReactive option. It will make working with external graphic lib much easier.