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发生变化，但视图不会立刻更新
  }
}