Vue3超详细的ref()用法教程(看这一篇就够了!)

const a = ref(1);
// 为 a.value 赋予新的值
a.value = 2;
console.log("a--->", a);
console.log("a.value--->", a.value);

const b = ref({ name: 'vue3' });
// 响应式替换
b.value = { name: 'vite' };
console.log("b--->", b);
console.log("b.value--->", b.value);

const obj = {
  foo: ref(0),
  bar: ref(1)
}
 
// 该函数接收一个 ref
// 需要通过 .value 取值
// 但它会保持响应性
callSomeFunction(obj.foo);
 
// 仍然是响应式的
const { foo, bar } = obj;

<script setup>
import { ref } from 'vue';
const a = ref(1);
</script>
<template>
  <!-- 无需 .value -->
  <div>a:{{ a }}</div>
</template>

<script setup>
import { ref } from 'vue';
const obj = {
  count: ref(1)
}
</script>
 
<template>
  <div>{{ obj.count + 1 }}</div> 
</template>

<script setup>
import { ref } from 'vue';
const obj = {
  count: ref(1)
}
// 将 count 改成顶层属性
const { count } = obj;
</script>
 
<template>
  <div>{{ count + 1 }}</div>
</template>

<script setup>
import { ref } from 'vue';
const obj = {
  count: ref(1)
}
const { count } = obj;
</script>
 
<template>
  <div>{{ count + 1 }}</div>
  <div class="count">{{ obj.count }}</div>
</template>

import { ref, reactive } from 'vue';
const a = ref(0);
const obj = reactive({
  a
})
console.log("obj.a--->", obj.a);
obj.a = 2;
console.log("a.value--->", a.value);

import { ref, reactive } from 'vue';
const a = ref(0);
const other = ref(1);
const obj = reactive({
  a
})
// 将一个新的 ref 赋值给一个关联了已有 ref 的属性
obj.a = other;
console.log("obj.a--->", obj.a);
// 原始 ref 现在已经和 obj.a 失去联系
console.log("a.value--->", a.value);

import { ref, reactive } from 'vue';
const books = reactive([ref('Vue 3 Guide')]);
// 这里需要 .value
console.log(books[0].value);
const map = reactive(new Map([['count', ref(0)]]));
// 这里需要 .value
console.log(map.get('count').value);

import { ref } from 'vue'
 
// 推导出的类型：Ref<number>
const year = ref(2020)
 
// => TS Error: Type 'string' is not assignable to type 'number'.
year.value = '2020'

import { ref } from 'vue'
import type { Ref } from 'vue'
 
const year: Ref<string | number> = ref('2020')
 
year.value = 2020 // 成功！

// 得到的类型：Ref<string | number>
const year = ref<string | number>('2020')
year.value = 2020 // 成功！

// 推导得到的类型：Ref<number | undefined>
const n = ref<number>()