Vue3

发布时间 2023-12-20 21:32:40作者: 有何和不可

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});才行

对于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>