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

Question

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

我想知道是否可以在更改特定 data 元素时触发（运行）一个函数。 Reactivity in Depth 没有提到这一点，对我来说（如果这是错误的，请纠正我）computed 和 methods 是一种为 DOM 间接提供新计算元素的方法（换句话说，它们不会启动，因为特定的element 已被修改，而是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 监视属性来做到这一点。

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()
    } 
  }
})

希望我正确理解了您的问题。

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
        }
    }
 })

Answer 3

你应该使用这个。在上面的例子中

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