Vue 更新对象或数组数据时页面刷新的理解

<template>
  <div>
      <p>info1:</p>
      <ul>
        <li v-for="(item, key) in info1" :key="key">{{key}}={{item}}</li>
      </ul>
      <el-button @click="updateInfo1"  type="text" size="small">修改info1</el-button><br>


      <p>info2:</p>
      <ul>
        <li v-for="(item, key) in info2" :key="key">{{key}}={{item}}</li>
      </ul>
      <el-button @click="updateInfo2"  type="text" size="small">修改info2</el-button><br>

      <p>Names:</p>
      <ul>
        <li v-for="(item, index) in names" :key="index">{{item}}</li>
      </ul>
      <el-button @click="updateNames"  type="text" size="small">修改Names</el-button><br>


      <br>
      <br>
      <el-button @click="updateAll"  type="text" size="small">修改所有</el-button><br>
    </el-row>
  </div>
  
</template>

<script>
export default {
  name: 'TestUpdateData',
  data () {
    return {
      msg:'hello',
      info1: {
        name: 'zhangsan',
        age: 20
      },
      info2: {
        name: 'lisi',
        age: 21
      },
      names:['zhangsan','lisi','wangwu']
    }
  },
  methods:{
          updateInfo1(){
            this.info1.tel = '123'
          },
          updateInfo2(){
            this.info2.age = 22
            this.info2.tel = '456'
          },
          updateNames(){
              this.names[2]='zhaoliu'
          },
          updateAll(){
              this.info1.tel = '123'

              this.names[2]='zhaoliu'

              this.info2.name='lisi';
              this.info2.age = 21
              this.info2.tel = '456'
          }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
</style>

1. 修改info1 : 给info1添加tel属性，页面数据不会进行刷新

2. 修改info2 : 给info2添加tel属性，同时修改info2本身的age属性值，页面数据会进行刷新

3. 修改Names: 根据下标修改数组内容，页面数据不会进行刷新

4. 修改所有: 页面数据都会进行刷新

结论:  给对象如果只添加属性时，并不会导致页面数据进行刷新，添加属性的同时如果修改了其它会触发页面刷新的元素值时，则新添加的属性也会在页面上面进行显示出来

根据下标值修改数组内容并不会使页面进行刷新，使用下面这些方法更新数组页面会进行刷新，因为VUE对被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()