vue3 从入门到放弃之【 ref 】

composition api中的2个响应式apI `ref`和`reactive`

`ref`用于基本数据类型，`reactive` 是用来处理对象（通过递归深度响应式）

如果`ref`数组/对象，内部会自动转成`reactive`

`ref`内部：通过给value属性添加getter/setter来实现数据劫持

`reactive`内部：通过`proxy`来实现对象内部所以数据劫持，并通过Reflect操作对象内部数据

// ref 是一个对象，作用是定义一个响应式数据，返回是一个Ref对象，
// 对象中有一个value属性，如果需要对数据进行操作，需要调用ref对象的value属性操作

<template>
  <div class="home">
    111
    {{ number }}
    <button @click="upFn">点击++</button>
  </div>
</template>

<script lang="ts">
// 定义一个组件
import { defineComponent, ref } from "vue";

// 暴露出去的一个定义好的主键
export default defineComponent({
  name: "Home",
  setup() {
    // ref 是一个对象，作用是定义一个响应式数据，返回是一个Ref对象，
    // 对象中有一个value属性，如果需要对数组进行操作，需要调用ref对象的value属性操作
    const number = ref(0);
      // 类型是ref
    function upFn() {
      number.value++; // ref 是一个对象，对象不能加++ 用xx.value属性
    }
    return {
      number, // 属性
      upFn, // 方法
    };
  },
});
</script>