是否可以在 Vue 数据元素更改时触发函数？

Question

我的 API 为我提供了一个哈希值，我作为 AJAX 调用的一部分收到了该哈希值。 AJAX 响应的内容（包括哈希）正在更新我的 Vue 实例中的 data 组件（以便按照通常的 Vue 用法修改 DOM）。

我想知道是否可以在更改特定的 data 元素时触发（运行）一个函数。 Reactivity in Depth 没有提到这一点，对我来说（如果这是错误的，请纠正我） computed 和 methods 是一种为 DOM 间接提供新计算元素的方法（换句话说，它们不会启动，因为特定元素已被修改，而是 data 和提供给 DOM 的其他变量之间的同步方法）。

我希望有一些类似的东西（这是无效的，不正确的伪代码，我只是将它添加到 Vue 实例的上下文中）：

 var vm = new Vue({
    el: '#root',
    data: {
      hash: null
    },
    functions_to_trigger_upon_an_element_change: {
      hash: function () {
        location.reload()
      }
    }
  })

上面的想法是让 location.reload() 当 hash 的值发生变化时运行。

Vue中有这样的机制吗？

如果没有，我将保持状态独立于 Vue，并根据其变化采取相应措施，但最好重用 Vue 监视属性来做到这一点。

原文由 WoJ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用手表，例如以下示例：

 var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

关于您的案例，这是有关如何实施的示例。

 var vm = new Vue({
  el: '#demo',
  data: {
    hash: 'Foo'
  },
  watch: {
    hash: function (val) {
      // when the hash prop changes, this function will be fired.
      location.reload()
    }
  }
})

我希望我理解你的问题是正确的。

原文由 Pedro Augusto Freitas de Souza 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我认为这应该有效

var vm = new Vue({
    el: '#root',
    data: {
      hash: null
    },
    watch: {
        hash: function (val) {
          functions_to_trigger_upon_an_element_change()
        }
    },
    methods: {
        functions_to_trigger_upon_an_element_change() {
            // You code
        }
    }
 })

原文由 DokiCRO 发布，翻译遵循 CC BY-SA 3.0 许可协议