Vue3获取响应式数据的四种方法

import { reactive } from 'vue'
const reactiveObj = reactive({
  count: 1,
  flower: {
    name: 'rose'
  }
})
window.reactiveObj = reactiveObj;

<template>
  <div>
    <p>reactiveObj.count: {{ reactiveObj.count }}</p>
  </div>
</template>
 
<script setup>
import { reactive } from 'vue';
const reactiveObj = reactive({
  count: 1
})
window.reactiveObj = reactiveObj;
</script>

import { ref, reactive } from "vue";
// value 是普通类型数据时
const numberRef = ref(0);
window.numberRef = numberRef;
const stringRef = ref("hello");
window.stringRef = stringRef;
 
// value 是一个对象时
const objectRef = ref({ a: 1, b: 2 });
window.objectRef = objectRef;
 
// value 是一个代理对象
const reactiveObj = reactive({ a: 11, b: 22 });
const reactiveRef = ref(reactiveObj);
window.reactiveObj = reactiveObj;
window.reactiveRef = reactiveRef;

<template>
  <div>{{ numberRef }}</div> <!-- Vue 自动解包为 numberRef.value -->
</template>

import { reactive, readonly } from "vue";
const reactiveObj = reactive({ a: 1, b: 2 });
const readonlyObj1 = readonly({ a: 11, b: 22 });
const readonlyObj2 = readonly(reactiveObj);
 
window.reactiveObj = reactiveObj;
window.readonlyObj1 = readonlyObj1;
window.readonlyObj2 = readonlyObj2;

import { computed, reactive } from "vue";
const reactiveObj = reactive({ a: 1, b: 2 });
const sumRef = computed(() => {
  console.log("computed函数执行");
  return reactiveObj.a + reactiveObj.b;
});
console.log(sumRef);
console.log(sumRef.value);
console.log(sumRef.value);
console.log(sumRef.value);
reactiveObj.a = 3;
reactiveObj.b = 4;
console.log(sumRef.value);
console.log(sumRef.value);

import { ref, computed } from 'vue'
const count = ref(1);
const double = computed({
  get: () => count.value * 2,
  set: (value) => {
    count.value = value / 2
  }
})
double.value = 10;
console.log(count.value) // 5
count.value = 20;
console.log(double.value); // 40