В чем разница между vm. $Set и Vue.set?

Я внимательно прочитал и перечитал Vue docs "Реактивность в глубине" и API для vm. $set и Vue.set, но мне все еще сложно определить время использования который. Для меня важно различать два, потому что в моем текущем проекте Laravel мы устанавливаем много свойств на объекты динамически.

Различие в документах, по-видимому, находится между языком, в котором vm. $set является "Для экземпляра Vue", а Vue.set - "Для простых объектов данных" и что Vue.set является глобальным:

Однако есть способы добавить свойство и сделать его реактивным после экземпляр был создан.

Для экземпляров Vue вы можете использовать метод экземпляра $set (путь, значение):

vm.$set('b', 2)
// `vm.b` and `data.b` are now reactive

Для простых объектов данных вы можете использовать глобальный Vue.set(объект, ключ, значение):

Vue.set(data, 'c', 3)
// `vm.c` and `data.c` are now reactive

Наконец, мне было интересно, может ли третья "опция" сделать выше (которая заключается в добавлении нескольких свойств за один раз) может быть использована в качестве эквивалентной замены для одного из двух вариантов выше (добавив вместо этого только 1 свойство из нескольких)?

Иногда вам может потребоваться присвоить ряд свойств существующий объект, например, используя Object.assign() или _.extend(). Однако новые свойства, добавленные к объекту, не будут вызывать изменения. В таких случаях создайте новый объект со свойствами как из оригинальный объект и объект mixin:

// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

Ответ 1

Вот примечание к выпуску, появившееся с введением Vue.set:

Vue больше не расширяет Object.prototype с помощью методов $set и $delete. Это вызывает проблемы с библиотеками, которые полагаются на эти свойства в определенных условиях проверки (например, minimongo в Метеор). Вместо объекта. $Set (ключ, значение) и объект. $Delete (key), используйте новые глобальные методы Vue.set(объект, ключ, значение) и Vue.delete(объект, ключ).

Итак, .$set использовался для всех объектов - теперь он доступен только на самой модели просмотра. Vue.set поэтому используется в тех случаях, когда вы имеете ссылку на реактивный объект, но не имеете ссылки на модель представления, к которой принадлежит.

Ответ 2

обнаружил, что добавление более одного атрибута к объекту с помощью .$set() только один раз работает хорошо, возможно, Vue сначала собрал эти добавленные атрибуты в последовательность, а затем применил эти последовательности к получателю и установщику; например

Vue.set(this.b,'first','first');
this.b.second = 'second';
this.b.third = 'third';
this.b.fourth = 'fourth';

'second','third','fourth' также реагируют как 'first'