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>