vue改变data，视图未实时更新问题

方法一：

如果操作的data是数组或对象，可以使用$set(object, key, value)方法进行修改

<template>
  <p>{{userInfo.name}}</p>
  <button @click="updateName">修改userInfo</button>
</template>

<script>
  data(){
    return{
      userInfo:{name:'小明'}
    }
  },
  methods:{
    updateName(){
      this.$set('userInfo',name,'小红');
    }
  }
</script>

方法二：

使用$forceUpdate()强制刷新

  methods:{
    updateName(){
      this.userInfo.name = '小红';
      this.$forceUpdate();
    }
  }

方法三：

使用$nextTick()赋值

  methods:{
    updateName(){
      this.$nextTick(() => {
        this.userInfo.name = '小红';
      })
    }
  }