Vue3

1、ref和reactive

原来reactive是一个对象类型，使用reactive重新赋值一个对象不起作用

<script lang="ts" setup>
import {reactive} from "vue";

let user = reactive({name: '小明', age: 10});

const dj = () => {
  user = {name: '大白', age: 100}// 这样是不起作用的
}
</script>

<template>
  <div>
    <h1>{{ user }}</h1>
    <h1>
      <button @click="dj()">点击</button>
    </h1>
  </div>
</template>

需要改成Object.assign(user,{name: '大白', age: 100});才行

但当user里的属性也为对象类型，可以直接进行赋值

<script lang="ts" setup>
import {reactive} from "vue";

let user = reactive({
  name: '小明',
  age: 10,
  car: {
    carName: '大车',
    carAge: 100
  }
});

const dj = () => {
  user.car = {carName: '小车', carAge: 1000}
}
</script>

<template>
  <div>
    <h1>{{ user }}</h1>
    <h1>
      <button @click="dj()">点击</button>
    </h1>
  </div>
</template>

对于ref这样赋值可以

<script lang="ts" setup>
import {reactive, ref} from "vue";

let user = ref({name: '小明', age: 10});

const dj = () => {
  user.value = {name: '大白', age: 100}
}
</script>

<template>
  <div>
    <h1>{{ user }}</h1>
    <h1>
      <button @click="dj()">点击</button>
    </h1>
  </div>
</template>