Vue doesn't respect existing setters on Modelclasses

[kaipaysen]

Version

2.5.0

Reproduction link

https://codesandbox.io/s/vjojnn5w7l

Steps to reproduce

1. Run the attached Sample
2. enter a Value for _bar
3. see that bar is changed as well
4. enter a value for bar
5. see that bar is now detached from _bar

What is expected?

The existing setter "bar" should be used.

What is actually happening?

A new property "bar" is created.

[phanan]

data object must be plain.

[kaipaysen]

Well, seems I've missed that bit of the documentation. Good point phanan.
Would be great to have Vue throw an errormessage in devtools when using a non plain data object.

[kaipaysen]

IMHO it's a bad idea to restrict data to plain objects. Working with components and props validation I'm using Modelclasses as type parameter like this:

props: { state: { type: ValidationState, required: false, default: function() { return new ValidationState(); } } }

This wouldn't work without typed models.

[MayaRainer]

Just to confirm: Does the addition of the regression label mean this is on track to be fixed? I'm asking whether I should revert to vue@2.4.x for now and wait for a fix, or attempt to restructure code.
Specifically, I have a class that's being used as a reactive object, and it's using a custom setter on a property for side effects. This used to work up to vue@2.4.x.

[kaipaysen]

Might be related to #5932.

[Kingwl]

I prefer to revert this feature
Because the properties of the class declare is located on the prototype of its instance
If we want to check its prototype, we may check the entire prototype chain
The side effect is too big for the benefits it brings

[drdevelop]

in加! in 原型判断与hasOwnProperty判断属性的区别是啥

[hou-pu]

class Model {
	constructor() {
		this.foo = '123'
		this._bar = null
	}
	get bar() {
		return this._bar;
	}
	set bar(newvalue) {
		this._bar = newvalue;
	}
}

new Vue({
	data: function() {
		return {
			data: new Model() 
		}
	}
  })

上面data字段初始化时是Model类的实例：

{
    foo: '123',
    _bar: null,
    __proto__: {
        get bar: function() {
            return this._bar
        },
        set bar: function(val) {
            return this._bar = val
        },
    }
}

注意bar并不是实例的私有属性；

由于v-model使用的Vue.set方法；
如果使用hasOwnProperty判断的话，这个判断不成立；

会走到下边代码：

  defineReactive(ob.value, key, val)
  ob.dep.notify()

这段代码相当于为实例重新定义了一个私有属性bar，这是不符合预期的，因为用户是把bar写在原型上了；

所以要把判断条件hasOwnProperty改为in判断：

  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }

上边条件成立；
相当于对Model原型上的bar赋值，这样跑起来就正常了