Vue.js 数据更新后触发的事件

Question

我有一个 Vue.js 应用程序，我有几个组件用于处理一些重复性任务。

我也在从 AJAX 请求中获取数据。

我想知道的是，是否有一个事件在 Vue 数据（treeData 和 flatTreeData）更新和操作后触发，以便我可以执行任何其他操作？

var app = new Vue({
    el: 'body',
    data: {
        treeData: {items: {}},
        flatTreeData: [],
    },
});

$.getJSON('./paths.json').done(function(data) {

    // apply the file structure to the vue app
    demo.treeData = data;

    demo.flatTreeData = flattenTree(data);

});

Answer 1

你可以使用Vue实例的watch 属性来给变量变化添加监听：http://vuejs.org/api/#watch

watch: {
    'treeData': function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
}

如果您要 watching 像 treeData 这样的对象，您可能需要使用 deep 标志来观察整个对象树。

watch: {
    'treeData':  {
        handler:function (val, oldVal){
            console.log('new: %s, old: %s', val, oldVal)
        },
        deep: true
    }
}

Answer 2

我会在这里使用 computed 属性。

你可以这样做：

{
  data: {
    treeData: {}
  },
  computed: {
    flatTreeData: function () {
      return flattenTree(this.treeData);
    }
  }
}

现在这样每次更新 treeData，flatTreeData 也会更新。

Vue.js 数据更新后触发的事件

Vue.js event to fire after data is updated

javascript

vue.js