Vue Watchers 简介和使用

发布于 2022-08-03 22:47:06 字数 1949 浏览 12 评论 0

在 Vue 中, Watch 让您通过注册一个回调来观察一个值,当值发生变化时,Vue 将调用该回调。

例如,假设您有一个 select 标签 要求用户在选项“A”、“B”和“C”之间进行选择,并且您希望实现一个“撤消”按钮,该按钮将撤消用户所做的最后更改。 您可以通过在 value 选择必须使用 v-model

const app = new Vue({
  data: () => ({ value: 'A', oldValue: 'A' }),
  // The `watch` property is a map from watched properties to callbacks
  watch: {
    value: function(newValue, oldValue) {
      console.log('Name changed from', oldValue, 'to', newValue);
      this.oldValue = oldValue;
    }
  },
  template: `
    <div>
      <select v-model="value">
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <button v-on:click="value = oldValue">Undo</button>
    </div>
  `
});

这是实际中的撤消按钮示例

观察者的一个常见用例是在值更改时将更改持久保存到服务器。 例如,假设您想在每次用户更改时发送一个 HTTP 请求 value。你可以注册一个观察者 value,并在 watch 回调如下图。

const app = new Vue({
  data: () => ({ value: 'A', saved: false }),
  watch: {
    value: function() {
      const body = JSON.stringify(this.data);
      fetch('http://httpbin.org/post', { method: 'POST', body }).
        then(() => { this.saved = true; });
    }
  },
  template: `
    <div>
      <select v-model="value">
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <div v-if="saved">Saved!</div>
    </div>
  `
});

这是 HTTP 请求观察者的一个例子

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。