2 - ref 全家桶

[mu-muw]

// 你的答案 没有审题的败笔啊
<script setup>
import { ref, reactive, isRef, unref,toRef } from "vue";
// 定义初始值
const initial = ref(10);
const count = ref(0);

// 挑战 1: 更新 ref
function update(value) {
  // 实现...
  count.value = value
}

/**
* 挑战 2: 检查`count`是否为一个 ref 对象
* 确保以下输出为1
*/
console.log(
  // impl ? 1 : 0
  isRef(count) ? 1 : 0 // 输出: 1
 // isRef(count) 输出true
);

/**
* 挑战 3: 如果参数是一个 ref，则返回内部值，否则返回参数本身
* 确保以下输出为true
*/
function initialCount(value) {
  // 确保以下输出为true
  value = unref(value)
  console.log(value === 10);// 输出: true
}
initialCount(initial);

/**
* 挑战 4:
* 为源响应式对象上的某个 `property` 新创建一个 `ref`。
* 然后,`ref` 可以被传递，它会保持对其源`property`的响应式连接。
* 确保以下输出为true
*/// 为源响应式对象上的某个 `property` 新创建一个 `ref`
const state = reactive({
  foo: 1,
  bar: 2,
});
const fooRef = toRef(state, 'foo'); // 修改这里的实现...

// 修改引用将更新原引用
fooRef.value++;
console.log(state.foo === 2); // 输出: true

// 修改原引用也会更新`ref`
state.foo++;
console.log(fooRef.value === 3); // 输出: true

</script>

<template>
  <div>
    <h1>msg</h1>
    <p>
      <span @click="update(count - 1)">-</span>
      {{ count }}
      <span @click="update(count + 1)">+</span>
    </p>
  </div>
</template>