Vue前端篇——创建对象类型的响应式数据

let 响应式对象 = reactive(源对象);

<template>
  <div class="person">
    <!-- 使用reactive 对象名.属性名 获取数据，无需.value，直接使用即可。   -->
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{ obj.a.b.c.d }}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup name="Person_Vue3_Reactive">
// 引入reactive 用于创建响应式对象数据
import {reactive} from 'vue'

// 单个对象数据
let car = reactive({brand: '奔驰', price: 100})
// 多个对象数据
let games = reactive([
  {id: 'ahsgdyfa01', name: '英雄联盟'},
  {id: 'ahsgdyfa02', name: '王者荣耀'},
  {id: 'ahsgdyfa03', name: '原神'}
])

// 多层级对象
let obj = reactive({
  a: {
    b: {
      c: {
        d: 666
      }
    }
  }
})

// 响应方法
function changeCarPrice() {
  car.price += 10
}

function changeFirstGame() {
  games[0].name = '流星蝴蝶剑'
}

function test() {
  obj.a.b.c.d = 999
}
// 使用setup语法糖，无需return返回值
</script>

<script lang="ts" setup name="Person_Vue3_Reactive">
import { ref } from 'vue'

// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = ref({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

console.log(car)

// 使用ref 改变响应数据需要.value
function changeCarPrice() {
  car.value.price += 10
}
function changeFirstGame() {
  games.value[0].name = '流星蝴蝶剑11'
}
function test(){
  obj.value.a.b.c.d = 999
}
</script>