Vue更新data中的數據頁面不渲染

一、數據更新不觸發視圖更新

在Vue中，視圖的更新是響應式的，也就是說當數據變化時，相應的視圖也會自動更新。但是，在某些情況下，數據更新並不會立即觸發視圖更新，我們需要手動調用this.$forceUpdate()或者使data中的數據對象發生改變才可以更新視圖。

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Hello, Vue'
      //此處由於data中的message對象沒有發生改變，所以不會觸發視圖更新
    }
  },
  mounted() {
    setTimeout(() => {
      this.updateMessage()
      //通過調用updateMessage方法改變message，從而觸發視圖更新
    }, 3000)
    //3秒後更新message
  }
}

二、數組或對象更新不觸發視圖更新

在Vue中，當我們使用數組或對象來更新數據時，如果只是修改了其中某一項或某幾項，Vue並不會觸發視圖的更新。此時，我們需要使用Vue提供的set或者splice方法來實現響應式的更新。

export default {
  data() {
    return {
      list: [
        { name: 'Tom', age: 18 },
        { name: 'Jerry', age: 20 },
        { name: 'Lucy', age: 22 }
      ]
    }
  },
  methods: {
    updateList() {
      // 直接對list進行修改不會觸發視圖更新
      this.list[0].age = 20 //沒有觸發視圖更新
      this.list.push({ name: 'Lily', age: 24 }) //沒有觸發視圖更新

      // 通過this.$set或者Vue.set方法進行修改才可以觸發視圖更新
      this.$set(this.list[0], 'age', 20) //通過this.$set方法觸發視圖更新
      Vue.set(this.list, 3, { name: 'Sophie', age: 26 }) //通過Vue.set方法觸發視圖更新

      // 通過splice方法進行修改也可以觸發視圖更新
      this.list.splice(1, 1, { name: 'Mike', age: 23 }) //通過splice方法觸發視圖更新
    }
  },
  mounted() {
    setTimeout(() => {
      this.updateList()
    }, 3000)
  }
}

三、偵聽器中改變數據不觸發視圖更新

在Vue中，我們可以通過偵聽器來監聽數據的變化並進行相應的操作。但是，在偵聽器中直接改變數據並不會觸發視圖的更新。此時我們需要使用$nextTick方法或者手動調用this.$forceUpdate()來使視圖更新。

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message(value) {
      //偵聽器中直接修改數據不會觸發視圖更新
      this.message = value + ', Vue'
      //手動調用this.$forceUpdate()或者使用$nextTick方法可以更新視圖
      //this.$forceUpdate()
      /*
      this.$nextTick(() => {
        this.message = value + ', Vue'
      })
      */
    }
  }
}

四、使用Object.assign或者spread運算符改變數據不觸發視圖更新

在Vue中，我們可以使用Object.assign方法或者ES6引入的spread運算符來將多個對象合併成一個新對象。但是，直接使用這兩個方法對data中的數據進行更新是不會觸發視圖的更新的。

export default {
  data() {
    return {
      title: 'Hello',
      content: 'World'
    }
  },
  methods: {
    updateData() {
      // 使用Object.assign或者spread運算符直接修改數據不會觸發視圖更新
      Object.assign(this.$data, { title: 'Hi' })
      // {...this.$data, title: 'Hi'}
    }
  }
}

五、computed計算屬性依賴數據更新但是不觸發視圖更新

在Vue中，我們可以使用計算屬性computed來計算一個值並且基於數據的變化而變化。但是，當依賴的數據發生變化時，計算屬性並不會馬上重新計算並更新視圖，而是會等到下一次使用計算屬性時，才重新計算並更新視圖。

export default {
  data() {
    return {
      title: 'Hello',
      content: 'World'
    }
  },
  computed: {
    message() {
      return `${this.title} ${this.content}`
    }
  },
  mounted() {
    setTimeout(() => {
      this.title = 'Hi'
    }, 3000)
    //3秒之後title發生變化，但視圖不會立刻更新
  }
}