Запрет на изменение

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

Класс

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

  get arr() {
    return new Proxy(this._arr, {
      set(obj, prop, value) {
        // Даем возможность vue установить `__proto__` для реактивности
        if (prop === '__proto__') {
          obj[prop] = value;

          return true;
        }
        
        // В остальных случаях ошибка
        throw new Error('This value is readonly');
      }
    })
  }

  addElement() {
    this._arr.push(3); // Works!
  }
}

const instance = new ReadonlyArray();

export default instance;

Компонент

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

    <div><b>Значение arr:</b> {{ arr }}</div>
    <button @click="addElement">Добавить элемент через класс</button><br />
    <button @click="tryToChange">Добавить элемент через компонент</button><br />
    <div>{{ error }}</div>
  </div>
</template>

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

export default {
  data() {
    return {
      arr: ReadonlyArray.arr,
      addElement: ReadonlyArray.addElement.bind(ReadonlyArray),
      error: null,
    };
  },
  methods: {
    tryToChange() {
      try {
        this.arr.push('fromComponent'); // Ошибка!
      } catch(e) {
        this.error = e;
      }
    }
  }
}
</script>

Результат

ReadonlyArrayOne

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

ReadonlyArrayTwo

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