vue无法双向绑定（无法更新dom）

vue无法双向绑定（无法更新dom）

一、什么情况下vue无法更新dom？

（1）因为数据层次太多（如 dataList[index].data，data为json数组的情况）

二、如何解决？

解决方案为强制更新需要更新的dom

（1）给需要更新的div加key，数据更改时，改变key值，该元素就会更新（释放原始组件，重新加载新的组件）。

<template>
  <div>
    <span :key="key"></span>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        key: 0
      }
    },
    methods: {
      handleUpdateClick() {
        this.key += 1 
      }
    }
  }
</script>

（2）内置的forceUpdate方法
使用方法： this.$forceUpdate()
该方法会触发updated钩子函数，使dom重新渲染。

（3）this.$set触发视图更新
具体使用方法：
用于JSON

self.$set(self.dataList, 'totalPage', pages)
// totalPage为键名

用于数组

for ( var index = 0; index < response.length; index++ ) {
    self.$set(self.dataList.data, index, response[index])
}