Vue3.0列表渲染，setup中渲染

HTML

  <div>
    <p>{{ ArrData.arr1 }}</p>
    <p>{{ ArrData.arr2 }}</p>
    <p>{{ ArrData.arr3 }}</p>
    <p>{{ ArrData.arr4 }}</p>
    <button @click="hanData">点击切换</button>
  </div>

script

import {reactive, onMounted} from 'vue'
export default {
  name: 'App',
  setup() {
    console.log("setup")
    let ArrData = reactive({
      arr1: "12",
      arr2: "12345",
      arr3: "14352",
      arr4: "13452"
    })

    function hanData() {
      ArrData.arr1 = '1******',
          ArrData.arr2 = '2******',
          ArrData.arr3 = '3******',
          ArrData.arr4 = '4******'
    }

    console.log(ArrData)
    onMounted(() => {
    })
    return {
      ArrData, hanData
    }
  },
  data() {
    return {}
  },
  beforeCreate() {
    console.log("beforeCreate")
  },
  methods: {},
  beforeUnmount() {
  },
  unmounted() {
  },
}