主页 / 问题 / 1175613
Accepted
progervova
Asked:2020-09-08 17:24:57 +0000 UTC2020-09-08 17:24:57 +0000 UTC

如何为 Vue 3 中的 Reactive 属性创建一个程序化的 Observer？

  • 772

我试图弄清楚视图 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);
javascript

1 个回答

  1. Best Answer

    阅读文档，一切都在那里。下面是一个命令式使用watch的例子。更多细节在这里。

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

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

相关问题