web0331/11.vue3/vue-project3/src/shallowRef-shallowReactive.vue

<template>
  <div>
    <h1>shallowRef-shallowReactive</h1>
    <p>sum:{{ sum }}</p>
    <p>sum1:{{ sum1 }}</p>
    <p>第一个：{{ car.name }}--{{ car.color }}--{{ car.options.c1 }}</p>
    <p>第二个：{{ car1.name }}--{{ car1.color }}--{{ car1.options.c1 }}</p>
    <button @click="changeMain1">修改1</button>
    <button @click="changeMain2">修改2</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, shallowRef, shallowReactive } from "vue";
let sum = ref(10);
let sum1 = shallowRef(20);
let car = reactive({
  name: "自行车",
  color: "白",
  options: {
    c1: "1",
  },
});
let car1 = shallowReactive({
  name: "自行车",
  color: "白",
  options: {
    c1: "1",
  },
});
function changeMain1() {
  // sum.value = 100;
  // car.name = '你好'
  // car.options.c1 = '12'
  //   car = {
  //     name: "自行车1",
  //     color: "白1",
  //     options: {
  //       c1: "11",
  //     },
  //   };
  Object.assign(car, {
    name: "自行车1",
    color: "白1",
    options: {
      c1: "11",
    },
  });
}
function changeMain2() {
  // sum1.value = 200;
  // car1.name = '你好1'
  // car1.options.c1 = '122222'
  //   car1.value = {
  //     name: "自行车12",
  //     color: "白12",
  //     options: {
  //       c1: "112",
  //     },1
  //   };
  Object.assign(car1, {
    name: "自行车12",
    color: "白12",
    options: {
      c1: "112",
    },
  });
}
</script>

<style lang="scss" scoped>
</style>