javascript - 从服务器加载数据后如何观察 VueJS 中的数据变化？

Question

当我的 Vue 组件被加载时，它会从服务器获取一些数据并将其放入组件数据中：

 data: function(){
    return {
        data: null,
        dataChanged: false,
    }
 },
 created: function(){
     // fetch data from server
      this.data = server_data
 }

现在我想观察它的变化，并在它发生变化dataChanged时设置一个布尔值：

watch: {
   data: function(oldVal, newVal) {
       this.dataChanged = true
   }
}

问题是，当最初加载数据时created，它也会触发观察者。

初始化后如何观察变化？

我试过在初始化后重新设置dataChanged，false它不起作用：

created: function(){
     // fetch data from server
     this.data = server_data
     this.dataChanged = false
}

 

标签： javascriptvue.jswatch

Answer 1

你可以试试如果的值data是null那么它是假的；

watch: {
  data: function(oldVal, newVal) {
    if (this.data == null) this.dataChanged = false
    else this.dataChanged = true
  }
}