从服务器加载数据后，如何在 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
}

Answer 1

你可以试试如果data的值为null则为false；

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

Answer 2

您可以像这样在观察器中更改dataChanged

watch: {
  data(newValue, oldValue) {
   if(oldValue !== newValue) 
    this.dataChanged = true;
   else
    this.dataChanged = false; 
 }
}

Answer 3

据我了解你的问题：

问题：最初加载数据时会调用观察器函数。
Objective：忽略初始更改（最初加载数据时），但运行所有后续更改。
解决方案：在异步操作中使用标志。

示例：

data: {
  items:[],
  isDoneLoading: false
},
watch: {
  items(){
    if(!this.isDoneLoading) return
    // runs only after data is done loading.
  }
},
methods: {
  async loadItems(){
     const { data } = await this.$http.get('/examples')
     this.items = data
     const setFlag = () => this.isDoneLoading = true
     await setFlag()
  }
},
mounted(){
  this.loadItems()
}

从服务器加载数据后，如何在 VueJS 中观察数据变化？

How to watch for data changes in VueJS after data is loaded from server?

javascript

vue.js

watch