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

Question

我的API为我提供了一个哈希,我收到的是一个AJAX调用的一部分.AJAX响应的内容(包括哈希)是data在我的Vue实例中更新组件(以便按照通常的Vue使用来修改DOM).

我想知道是否有可能在更改特定data元素时触发(运行)函数.深度反应性没有提到这个和我(请纠正我,如果这是错误的) 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手表属性来做这件事会很好.

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