vue中$forceUpdate的使用

vue中的$forceUpdate是强制更新的意思

数据的绑定都不用我们操心，例如在data中有一个name的变量，你修改它页面的内容就会自动发生变化。

但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，vue就无法知道发生了改变。

//父组件 
<tx-a :info="info"></tx-a>
 data() {
    return {
      info:{}
    }
  },

//子组件
<div>
    info:{{ info }} 
    <input :value="info.name" @input="headleChange">
</div>
  props:{
        info:Object
    },
    methods: {
        headleChange(e){
            this.info.name = e.target.value;
        }
    },

　　我们尝试直接给info.name赋值，发现页面上没有效果；

那么就是利用$forceUpdate了，因为你修改了数据，但是页面层没有变动，说明数据本身是被修改了，但是vue没有监听到而已，用$forceUpdate就相当于按照最新数据给渲染一下。

方法1：

 headleChange(e){
    this.info.name = e.target.value;
    this.$forceUpdate()
}

方法2：

 headleChange(e){
      this.$set(this.info,'name',e.target.value) 
}