The logic of Vue.set is unreasonable when handling array

[FuuuOverclocking]

Version

2.5.17-beta.0

Reproduction link

https://jsfiddle.net/L6pey1ts/22/

Steps to reproduce

Run JSFiddle snippet

What is expected?

I expect, that the program only outputs 2,3,5,7,11,13 (when executing arr.push(13)).

What is actually happening?

    (empty line)
2,3,5,7,11
arr.abc changed
arr.def
    (empty line)
2,3,5,7,11,13
    (empty line)
arr.def changed

---

abc is already existed on arr when app is initializing, and it is neglected for it was defined on an array.

def is set by Vue.set(), but it executes defineReactive(arr, 'def', 'arr.def') (src/core/observer/index.js line:225), and notifies the watchers.

Vue.set() should be consistent when dealing with them. In my mind, both of them should be neglected.

[FuuuOverclocking]

Corrects #5216

[Justineo]

As #5216 was merged so we may assume this is an expected behavior. Using Vue.set to create reactive custom string keys for arrays are intentionally allowed by this PR. Removing this feature (or maybe you think it's a bug) would introduce a breaking change which we are not gonna accept ATM.

[FuuuOverclocking]

You are right, but I am still considering about if we should give the same treatment to arr.abc, and there may be some other work to do if we truly want to enable reactive non-numerical prop on array.

As we know that arr was handled by Observer.prototype.observeArray, its non-numerical prop was ignored and not made reactive, which distincted from object.

Also, in my modified snippet,
https://jsfiddle.net/L6pey1ts/40/
we can see that
1. arr.abc = ..., Vue.set(arr, "abc", ...) is not reactive
2. arr.def = ... will notify the Dep of arr.def
3. Vue.set(arr, "def", ...) will notify the Dep of arr at first call for def is not on arr, therefore the watchers arr, arr.abc, arr.def was activated. arr shouldn't be activated because the sequence of the array has not changed. arr.abc was activated, because when using app.$watch("arr.abc", func) the arr.abc watcher record the value "arr.abc", and app.$set(app.arr, "abc", "arr.abc changed") didn't change the value of this watcher, so it executes callback when the Dep of arr was notified.
4. Vue.set(obj, "ghi", ...) will notify the Dep of obj at first call for ghi is not on obj.

I have to point out there are many conflicts in handling object and array, and suggest we'd better disable the reactive prop of array.

Please forgive for some syntax errors, for I am not an English speaker. I am happy to accept corrections if someone is willing to help.

[yyx990803]

I think it probably makes more sense for Vue.set to convert existing properties to a reactive one, if it is not already. Removing the existing behavior as in #8536 would be a breaking change so it's a no-go.