Давайте посмотрим, как javascript обновляет значение переменной

let name = 'Harry';
let fullName = name + ' Potter';

Если мы console.log(fullName);, мы получим Harry PotterТеперь, если обновим значение имени таким образом,

name = 'Harry James';

Можете ли вы догадаться, что результат console.log(fullName); будет таким же, как и раньше Harry Potter

Это связано с тем, что JavaScript по умолчанию не является реактивным. Vue позаботится о таких изменениях для нас, и это то, что в двух словах означает реактивность.

Теперь давайте попробуем понять, что Vue пытается сделать под капотом для реактивности в простом javascript.

Для этого мы будем использовать объект Proxy, который позволит вам создать прокси для другого объекта, который может перехватывать и переопределять основные операции для этого объекта.

Proxy создается с двумя параметрами:

  • target: исходный объект, который вы хотите проксировать
  • handler: объект, определяющий, какие операции будут перехватываться и как переопределять перехваченные операции.

В нашем примере проверьте выходные значения цели, ключа и значения.

target — это исходное свойство, key — это свойство, для которого вы используете метод set, а value — это новое значение, которое вы только что присвоили своему ключу.

Функция setter срабатывает всякий раз, когда для свойства устанавливается новое значение на этом proxy.

const data = {
  name: 'Harry',
  fullName: 'Harry Potter'
};
const handler = {
  set(target, key, value) {
    console.log(target); //output: {name: "Harry"}
    console.log(key); //output: name
    console.log(value); //output: Harry James
    if (key === 'name') {
      target.fullName = value + ' Potter';
    }
    
    target.name = value;
  }
};
const proxy = new Proxy(data, handler);
proxy.name = 'Harry James';
console.log(proxy.fullName); //output: Harry James Potter

Итак, здесь мы создали нашу собственную реактивную систему для отслеживания одного свойства и обновления другого свойства, когда это свойство, nameproperty здесь, изменилось.