Como o array recebe os novos valores?

Fala ai Luiz, tudo bem? Vamos lá:

na minha visão o array campos deveria ficar dentro do evento de click, para sempre ter seus valores atualizados

Sim, é válido e também iria funcionar, porém, ao adicionar o campos dentro do click seria necessário buscar os campos toda vez que o evento for disparado.

Então, deixando eles fora a busca só precisa ser feita apenas uma vez.

Como esse array está fora, não consigo entender como seus valores são atualizados. Gostaria de uma explicação, agradeço desde já!

Repare no trecho de código que cria a variável campos:

var campos = [
    document.querySelector('#data'),    
    document.querySelector('#quantidade'),
    document.querySelector('#valor')
];

A variável campos está apenas buscando as referências dos input's na página e não seus valores em si. Por causa disso quando mudamos os valores nos campos é possível obtê-los através do .value.

Resumindo: A referencia para o elemento na página sempre será a mesma, o que irá mudar é seus valores que podem ser obtidos através do .value.

Espero ter ajudado.