解決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！