010.Vue3入门，数组变化侦听，实时在界面显示变化后的数据

1、代码如下：

<template>
  <h3>数组变化侦听</h3>
  <button @click="addListHandle">添加数据</button>
  <ul>
    <li v-for="(item,index) of names" :key="index">{{ item }}</li>
  </ul>
  <button @click="concatHandle">按钮</button>
  <h3>数组1</h3>
  <div v-for="(item,index) of nums1" :key="index">{{ item }}</div>
  <h3>数组2</h3>
  <div v-for="(item,index) of nums2" :key="index">{{ item }}</div>
</template>

<script>
export default {
  data() {
    return {
      names: ["张三", "李四", "王五"],
      nums1: [1, 2, 3],
      nums2: [11, 12, 13]
    }
  },
  methods: {
    addListHandle() {
      this.names = this.names.concat(["赵六"])
    },
    concatHandle() {
      this.nums1 = this.nums1.concat(this.nums2)
    }
  }
}
</script>

2、效果如下