VIP32/vue3/my_project/归档/1.setup+ref+reactive/Demo4.vue

<template>
  <div class="demo4">
    <ul>
      <li v-for="(item,index) in arr" :key="index">
        {{ index + 1 }}--姓名是：{{item.name}}--今年{{item.age}}岁
      </li>
    </ul>
    <button @click="changeFirst">修改第一项的内容</button>
  </div>
</template>

<script lang="ts" setup name="Demo4">
import { reactive } from 'vue';
// reactive 定义引用类型
let arr = reactive([
  {
    name: '张三',
    age: 18
  },
  {
    name: '李四',
    age: 20
  },
  {
    name: '王五',
    age: 22
  }
])

console.log(arr,'arr')

function changeFirst() {
  arr[0].name = '孙悟空';
}

</script>

<style>

</style>