Давайте посмотрим, как 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
Итак, здесь мы создали нашу собственную реактивную систему для отслеживания одного свойства и обновления другого свойства, когда это свойство, name
property здесь, изменилось.