vue3 从入门到放弃之【 ref 】

// 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>