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

我有一个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);

});

---

您可以使用Vue实例的

watch

属性将侦听器添加到变量更改中：

如果要查看

treeData

等对象，可能需要使用

deep

标志查看整个对象树

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

---

我会在这里使用

computed

属性

你可以做：

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

---

现在，每次更新

treeData

，

flatTreeData

时，都会以这种方式更新。

这似乎是一种更具vue风格的解决方案。+1，这是

flatTreeData

的最佳选择。

treeData

上的

watch

函数和

flatTreeData

的computed属性都可以很好地工作。是的，这两个函数都可以在这种情况下工作，只是认为computed属性更清晰。是的，但是他仍然需要watch函数来触发他想要的任何其他事件。Computed属性只适用于

flatTreeData

，因此它不考虑他的问题。我明白你的意思了，我正在仔细阅读。我只是在看代码。

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