this.$set的用法，解决处理数据时新增或修改整个数组和对象不会更新视图（更新后不会更新视图）

<template>
  <div id="app">
    <p v-for="item in items" :key="item.id" class="p" >
      {{item.message}}
      <span v-for="item2 in item.child" :key="item2.id" style="display: block">{{item2.message}}</span>
    </p>
    <button class="btn" @click="handClick()">
      更改数据
    </button>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data () {
      return {
        items: [
          { message: "one", id: "1" ,
            // child:[
            //   { message: "one2", id: "1" },
            //   { message: "two2", id: "2" },
            //   { message: "three2", id: "3" }
            // ]
          },
          { message: "two", id: "2",
            // child:[
            //   { message: "one2", id: "1" },
            //   { message: "two2", id: "2" },
            //   { message: "three2", id: "3" }
            // ]
          },
          { message: "three", id: "3",
            // child:[
            //   { message: "one2", id: "1" },
            //   { message: "two2", id: "2" },
            //   { message: "three2", id: "3" }
            // ]
          }
        ],
        testMsg:"原始值",
      }
    },

    created() {
      // this.items[0] = { message:'first22',id:'4'} //此时对象的值更改了，视图有更新
    },
    mounted () {
      // this.items[0] = { message:'first',id:'4'} //此时对象的值更改了，但是视图没有更新
      // console.log(this.items[0])//此时0里面是id: "4"，message: "first"，视图没有更新

      // 因为数组和对象更新后不会更新视图，这里必须用$set方法
      let obj = {message:'first新',id:"4"}
      this.$set(this.items,0,obj) //$set 可以触发更新视图
      console.log(this.items[0])
    },
/*    mounted(){
      this.items.map((item, index, array) => {
        console.log(item)
    //     更改对象
    //        item = { message:'first',id:'4'}  //这样整个对象或数组不会更新视图，只是item.message才会更新
    //
    //     添加对象下的child
        let child = [
          { message: "one22", id: "1" },
          { message: "two22", id: "2" },
          { message: "three22", id: "3" }
        ]
    //     因为数组和对象更新后不会更新视图，这里必须用$set方法
        this.$set(array[index], 'child', child)
    //    打开data里的child注释，更改对象下的child
        // this.$set(array[index], 'child',[
        //   { message: "one222", id: "1" },
        //   { message: "two222", id: "2" },
        //   { message: "three222", id: "3" }
        // ])
      })
      console.log(this.items)
    },*/
    methods: {
      handClick(){
        let changeObj = this.items[0]
        changeObj.message="修改后的first"
        this.$set(this.items,0,changeObj)
        console.log(this.items[0])

        // this.items[0].message = '修改后的数据'
        // this.$nextTick(() => {
        //   let domTxt=document.getElementsByClassName('p')[0].innerText;
        //   console.log(domTxt);
        //   console.log(this.items[0])
        // });

      },

    }
  }
</script>