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

<template>
  <div id="demo5">
    <h3>姓名：{{obj.name}}</h3>
    <h3>年龄：{{obj.age}}</h3>
    <h3>
        玩具：
        <p>{{obj.car.c1}}</p>
        <p>{{ obj.car.c2 }}</p>
    </h3>
    <button @click="changeCar1">修改第一辆车</button>
    <button @click="changeCar2">修改第二辆车</button>
  </div>
</template>
/**
    ref:可以修改基本数据类型类型 也可以修改引用数据类型类型 
    走的还是object.defineProperty()中getter和setter劫持数据 修改数据
    ref修改引用 只适用于 浅层的引用数据类型
    reactive: 只能修改引用数据类型
    走的是ES6中的代理 proxy
    深层的引用数据类型
*/
<script setup lang="ts" name="Demo5">
  import { ref,reactive } from 'vue';
  let aa = ref('哈哈');
  let obj1 = reactive({
    bb:"1",
    cc:"2"
  })
  let obj = ref({
    name: "图图",
    age: 3,
    car: {
      c1: "玛莎拉蒂",
      c2: "大G",
    }
  })
  let obj3 = {
    a: {
        b:{
            c: {
                d:"121"
            }
        }
    }
  }
  console.log(aa);
  console.log(obj1);
  function changeCar1() {
    console.log(obj)
    obj.value.car.c1 = '夏利'
    // obj.car.c1 = '夏利';
  }
  function changeCar2() {
    obj.value.car.c2 = '五菱'
  }
</script>

<style>

</style>