vue强制更新$forceUpdate()一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

首先我们知道在vue中，数据的绑定都不用我们操心，

例如在data中有一个msg的变量，你修改它，那么在页面上，msg的内容就会自动发生变化。但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的length变成0，vue就无法知道发生了改变。

开发案例背景：当你渲染饿了吗下拉框组件的时候，你赋值的v-model的值在下拉列表中不存在，页面渲染就展示了v-model上绑定的key值，然后再次切换的时候就会出现bug，切换不了

//这里就是element的下拉框组件，在v-model中的值发生了改变页面未更新

<el-select 
  v-model="reqData.coupon_code" 
  class="w160"
  placeholder="请选择订单类型"
  size="small">
    <el-option
      v-for="(item,index) in orderList"
      :key="index"
      :label="item.name"
      :value="item.id">
    </el-option>
</el-select>

一般正常的页面数据更新this.$set可解决 vue的规范文档里面都有提到过，但是对于我遇到的这个应用案例，还是无法刷新和解决

change: function(index) {//增加性别属性

    this.$set(this.reqData,'coupon_code',index)

},

添加this.$forceUpdate();进行强制渲染，效果实现。搜索资料得出结果：因为数据层次太多，render函数没有自动更新，需手动强制刷新。

调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。**

我是在使用多层for循环嵌套时出现的页面没有及时刷新改变后的值的问题( 使用this.$forceUpdate() )

<el-select 
  v-model="reqData.coupon_code" 
  class="w160"
  @change="$forceUpdate()"
  placeholder="请选择订单类型"
  size="small">
    <el-option
       v-for="(item,index) in orderList"
       :key="index"
       :label="item.name"
       :value="item.id">
    </el-option>
</el-select>

this. $set和this.$ forceUpdate()的区别

this.$set(this.data, "key" , "val") 方法，既可以更新视图又可以新增或删除属性。

vue.$forceUpdate()：强制更新

vue页面中通过v-for进行数据渲染，如果层次太多，有时候数据发生改变但是页面看到的效果是毫无变化的，render函数没有自动更新，可以通过this.$forceUpdate()手动刷新，但是它的性能消耗高。