Валидация изменений

Валидация работает также как и в примитиве с помощью Proxy. Единственная деталь, что проверку свойства __proto__ не производим по причинам, которые мы обсуждали в теме запрета изменений в массиве.

Класс

class ValidatedArray {
  _arr = [0, 1, 2];

  get arr() {
    return new Proxy(this._arr, {
      set(obj, prop, value) {
        // Записываем, если значение - это число ИЛИ свойство - это __proto__
        if (typeof value === 'number' || prop === '__proto__') {
          obj[prop] = value;

          return true;
        }

        throw new TypeError('Value must be number');
      }
    })
  }
}

const instance = new ValidatedArray();

export default instance;

Компонент

<template>
  <div class="component-block">
    <span class="name">ValidatedArrayOne</span>

    <span><b>Значение arr:</b> {{ arr }}</span><br/>

    <button @click="addString">Добавить строку</button><br />
    <button @click="addNumber">Добавить число</button><br />

    <span v-if="error">{{ error }}</span>
  </div>
</template>

<script>
import ValidatedArray from '@example-services/ValidatedArray';

export default {
  data() {
    return {
      arr: ValidatedArray.arr,
      error: '',
    };
  },
  methods: {
    addNumber() {
      this.arr.push(3);
    },
    addString() {
      try {
        this.arr.push('I don\'t work');
      } catch (e) {
        this.error = e;
      }
    }
  },
}
</script>

Результат

ValidatedArrayOne Значение arr: [ 0, 1, 2 ]

ValidatedArrayTwo Значение arr: [ 0, 1, 2 ]