Как сделать программный Observer для Reactive свойства во Vue 3?

Question

Пытаюсь разобраться с системой реактивности во Вью 3. Вот простенький пример, объявляем свойство реактивным, шаблон отображает добавление элемента.

<template>
    <ul>
      <li v-for="item in test" :key="item">
        {{ item }}
      </li>
    </ul>
    <v-btn @click="handleBtnAdd">Add</v-btn>
</template>

setup() {
    const test = reactive(["один", "два", "три",]);

    const handleBtnAdd = () => {
      test.push("четыре")
    }
}

А как сделать программный наблюдатель за изменениями свойства? Что-то вроде:

const test = Reactive(["один", "два", "три",]);
o:Observer=new Observer(()=>alert('Изменилось!!!'))
test.observers.add(o);

Answer 1

Читайте документацию, там всё есть. Вот пример императивного использования watch. Более подробно тут.

// следим за переменной, указанной путём:
vm.$watch('a.b.c', function (newVal, oldVal) {
  // переменная изменилась, сделайте что-нибудь
})

// следим за функцией:
vm.$watch(
  function () {
    // Данный обработчик будет вызываться каждый раз, когда выражение
    // `this.a + this.b` даёт результат. Это похоже на отслеживание
    // вычисляемого свойства без определения самого вычисляемого свойства
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // значение функции изменилось, сделайте что-нибудь
  }
)

БЛОГ НА HUSL

Как сделать программный Observer для Reactive свойства во Vue 3?

Ответы (1 шт):