解决Vue修改对象值，界面不重新渲染问题

代码示例：

界面代码

    <el-container>
    <el-main>
      <el-row>
        <el-button type="primary" @click="handleClick">点我显示姓名</el-button>
      </el-row>
      <el-row>
        姓名：{{people.name}}
      </el-row>
    </el-main>
  </el-container>

js部分

export default {
    name: "index",
    data() {
      return {
        people:{}
      }
    },
    methods: {
      handleClick() {
        this.people.name= '张三;
      }
    }
  }

点击按钮后运行结果

（并未正常展示姓名）

原因：深究Vue双向绑定原理了解到，Vue内部是通过对对象的每个属性遍历进行变化侦测，实现每个属性的改变监听，那也就是说，在未定义对象某属性的情况下，修改这个属性（这里实际上是新增），是无法触发试图更新的，我们可以使用提前定义的方式解决该问题。

解决方式：在定义对象时，将属性定义好。

export default {
    name: "index",
    data() {
      return {
        people:{
			name:''
		}
      }
    },
    methods: {
      handleClick() {
        this.people.name= '张三;
      }
    }
  }

在定义people对象的同时，定义好name属性。

运行结果

当然也可以在不提前定义属性的情况下使用vm.set达到重新渲染的效果

end！