响应式数据

1、 reactive() 接收一个普通对象然后返回该普通对象的响应式代理。

2、 ref 接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。

3、readonly ()接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。

4、toRef() 从复杂类型中抽离单个 响应式属性出来

5、toRefs() 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。

<template>
    <h1>ref - {{count}}</h1>
    <h1>reactive - {{obj.name}}</h1>
    <h1>toRef  - {{fooRef}}</h1>
    <h1>toRefs   - {{foo}}</h1>
    <h2>readonly - {{copy.count}}</h2>
</template>
<script setup>
    import { ref, reactive, toRef, toRefs, readonly } from "vue";
    // 创建单个响应式数据
    const count = ref(0);
    count.value = 1;
    console.log(count);
    // 对象响应式数据
    const obj = reactive({
        name: "张三",
    });
    // 修改对象响应式数据
    setTimeout(() => {
        obj.name = "李四";
    });

    const state = reactive({
        foo: 1,
        bar: 2,
    });

    // 双向 ref，会与源属性同步
    const fooRef = toRef(state, "foo");

    // 更改该 ref 会更新源属性
    fooRef.value++;
    console.log(state.foo); // 2

    // 更改源属性也会更新该 ref
    state.foo++;
    console.log(fooRef.value); // 3

    const stateAsRefs = toRefs(state)
    // 可以解构而不会失去响应性
    const { foo, bar } = stateAsRefs


    const original = reactive({ count: 0 })
    const copy = readonly(original)

    setTimeout(() => {
         // 依赖追踪
        console.log(copy.count)
    },2000);

    // 更改源属性会触发
    original.count++

    // 更改该只读副本将会失败，并会得到一个警告
    copy.count++ // warning!
</script>