WapSter

Если вы используете querySelectorAll для работы с шаблоном компонента, то похоже вы делаете что-то не правильно.

$ref единственное и по сути правильное получение DOM элемента внутри vue. $ref это по сути id, иных вещей нет, только уже указание селекторов для querySelectorAll.
Если вам приходится каждому элементу DOM давать ref внутри 1го шаблона, то опять же, скорей всего вы что-то делаете не так.

Покажите или расскажите детальнее, какую задачу вы решаете и скорей всего есть решение лучше, нежели то, что вы пытаетесь сделать

Если правильно понял

// Функция проверки вхождения текущего часа в отрезов от from до to (не включительно)
function isHourRange(from, to) {
   var now = new Date();
   var curHour = now.getHours();
   return curHour >= from && curHour < to;
}

if(isHourRange(0, 9)) {
   $('.ageWindow').fadeIn(100);
}

Насколько я понял addAge - это колбек модалки при закрытии, поэтому эту функцию лучше не удалять.

Вот для показа по локальному времени клиента:

var TIME_FROM = 0;
var TIME_TO = 9;

var date = new Date();
var clientLocalHour = date.getHours();

if (clientLocalHour >= TIME_FROM && clientLocalHour < TIME_TO) {
  $('.ageWindow').fadeIn(100);
}

function addAge() { 
  $('.ageWindow').fadeOut(500);
}

Вот для показа по локальному времени вашего сервиса(считается на стороне клиента, часовой пояс +3 Москва):

var SERVICE_TIMEZONE = 3;
var TIME_FROM = 0;
var TIME_TO = 9;

var date = new Date();
var clientLocalHour = date.getHours();
var timezoneOffset = date.getTimezoneOffset() / 60;
var serviceComputedHour = clientLocalHour + timezoneOffset + SERVICE_TIMEZONE;

if (serviceComputedHour >= TIME_FROM && serviceComputedHour < TIME_TO) {
  $('.ageWindow').fadeIn(100);
}

function addAge() { 
  $('.ageWindow').fadeOut(500);
}

SERVICE_TIMEZONE - часовой пояс, сейчас стоит +3 Москва, можно задать любой (целое число в диапазоне от -12 до 12)
TIME_FROM - время начала показа
TIME_TO - время окончания показа

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

как договоритесь, так и будет.
четкого и однозначного деления нет.

у вас в html пути относительные.
типа href="file.css"
ставьте абсолютные href="/file.css"

Формула периметра квадрата не зависит от языка программирования.
Периметр_квадрата = длина_стороны * 4

Надо проверять при каждом изменении, нажатии, событии. Просто передвинуть проверку туда же, где и увеличение:

var x = 0
$("html").click(function () {
  x++;
  if (x === 8) {
    alert(8)
  }
})

Вместо назначения индивидуальных обработчиков каждому элементу сделать один делегированный:

document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('box')) {
    for (const n of document.querySelectorAll('.box')) {
      n.style.background = n === t ? 'red' : 'black';
    }
  }
});

Это не криворукий верстальщик.
Это так показывают инструменты разработчика, когда у файла есть "хвостик" после знака вопроса.
Это сделано для того, чтобы не было кеширования. Версия файла меняется - меняется хеш - у пользователя стили берутся не кеша. Если версия не поменялась, то из кеша.
На самом деле, к сайту подключен один файл style.css
Остальные "кусочки" показывает source map.

fetch('https://jsonplaceholder.typicode.com/albums')
  .then(r => r.json())
  .then(r => {
    const keys = [ 'userId', 'id', 'title' ];

    // собираем разметку
    document.body.insertAdjacentHTML('beforeend', `
      <div class="wrapper">${r.map(n => `
        <div class="item">${keys.map(k => `
          <div>${k}: ${n[k]}</div>`).join('')}
        </div>`).join('')}
      </div>
    `);

    // или, создаём элементы напрямую
    function createElement(tag, className, children) {
      const el = document.createElement(tag);
      el.className = className;
      el.append(...children);
      return el;
    }

    document.body.append(
      createElement('div', 'wrapper', r.map(n =>
        createElement('div', 'item', keys.map(k =>
          createElement('div', '', [ `${k}: ${n[k]}` ])
        ))
      ))
    );
  });

.wrapper {
  border: 3px solid black;
  padding: 10px;
  margin: 10px;
}

.item {
  border: 1px solid silver;
  padding: 5px;
  margin: 5px;
}

Дело не в быстродействии.
Через год ты откроешь этот проект чтобы внести какие-то изменения, и тебе придется вспоминать, в css они или прямо в тегах. А если не ты откроешь, а твой сотрудник - ему будет еще сложнее.

Т.е. технически никто не мешает тебе резать хлеб бензопилой, забивать гвозди микроскопом и ходить в лыжах по асфальту. Но это как-то нехорошо, некрасиво... неправильно?

Лучшее, что вы можете сделать - не тащить на сайт кучу всякой херни, которая обычно много весит, ухудшает перфоманс, затрудняет восприятие контента и не нужна никому, кроме вас. Серьёзно.
Любая анимация должна быть уместна, и если вам, глядя на дизайн, никаких конкретных идей в голову не приходит - то и не нужно. Нет способа удешевить сайт сильнее, чем добавить элементам разного толка выпрыгивания со всех сторон, глитч-эффекты и всё такое.
Хочется динамики - найдите какое-нибудь не сильно быстрое видео и поставьте его как фон, или по запросу "canvas background animation" найдите ненапрягающую анимацию.

P.S. Речь идёт не о сайтах, которые должны побеждать на Awwwards, а об обычных сайтах, которые делаются для людей, а не для конкурсов.
P.P.S. Если всё-таки очень хочется, то нужно гуглить по запросам "hover effects" и "canvas animation", остальное без конкретной дизайнерской задумки вреда несёт куда больше, чем пользы.
Юзабилити - это про то, чтобы "работает быстро и понятно (как у всех)".

inline-block