无题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div>
    <h1>count:{{ obj2.name }}</h1>
    <button @click="handClick">点击</button>
  </div>
</template>

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

const obj1 = reactive({
  name:"hainoir",
})//reactive 对多个变量使用

const obj2 = ref({
  name:"noirkl",
})//ref 对单个变量使用；使用ref对多变量操作时，需要取value；

const handClick =  () => {
  obj2.value.name = "noir";
}

</script>
1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <div>
    <h1>count:{{ count }}</h1>
    <button @click="count++">点击</button>  // 此处不取value，因为在template中，ref自动取value
  </div>
</template>

<script setup>
import { ref } from "vue";
    
const count = ref(0)
</script>