Подробное объяснение методов vue $set и $get

Во Vue $setи $getесть два встроенных метода экземпляра Vue, которые используются для добавления свойств к реактивному объекту или получения значения свойства. Вот как их использовать:

$установить

$setиспользуется для добавления свойства реактивного объекта и обеспечения того, чтобы это новое свойство также было реактивным. При добавлении свойств к уже созданному объекту, если для obj.key = valueприсвоения значений используется синтаксис JavaScript, добавленные свойства не реагируют, а не реагируют. В настоящее время, если это свойство используется в шаблоне или функции рендеринга, это новое свойство не приведет к повторному рендерингу компонента.

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

Вот простой пример:

<template>
  <div>
    {
   
   {obj.newProp}}
    <button @click="addProp">Add Property</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        prop1: 'value1',
        prop2: 'value2'
      }
    };
  },
  methods: {
    addProp() {
      this.$set(this.obj, 'newProp', 'new value');
    }
  }
};
</script>

В приведенном выше примере мы определяем objобъект, который содержит два свойства , prop1и prop2в методе компонента addPropиспользуем $setметод objдля добавления нового свойства к объекту newProp.

$ получить

$getМетод используется для получения значения свойства отзывчивого объекта, он может напрямую обращаться к свойству объекта и возвращать значение свойства. $getМетод принимает два параметра: отзывчивый объект и имя свойства.

Вот простой пример:

<template>
  <div>
    {
   
   { obj.prop1 }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        prop1: 'value1',
        prop2: 'value2'
      }
    };
  },
  created() {
    const prop1Value = this.$get(this.obj, 'prop1');
    console.log(prop1Value); // 'value1'
  }
};
</script>

В приведенном выше примере мы определяем objобъект, который содержит два свойства , prop1и в функции-ловушке prop2компонента используем метод для получения значения свойства и вывода его на консоль.created$getprop1

Следует отметить, что при использовании методов $setи $getих можно использовать только на реактивных объектах, и они будут недействительны, если используются на обычных объектах.