ref函数

作用：在setup函数中，用于创建一个响应式的数据，当数据发生改变时，Vue会自动更新视图层

语法：const xxx = ref(initValue)

• 逻辑中操作数据： xxx.value
• 模板中读取数据: 不需要.value，直接：<div>{{ xxx }}</div>

注意：

• 在setup函数中需引入 import { ref } from "vue"
• 接收的数据可以是：基本类型、也可以是复杂类型(比如对象，数组)。建议处理基本类型数据。
• 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="MyCount">MyCount</button>
  </div>
</template>
 
<script setup>
import { ref } from "vue"

const count = ref(0)

const MyCount = () => {
  count.value = count.value + 1
}
</script>

下面通过ref属性获取元素

vue3.2需借助生命周期方法，在setup执行时，template中的元素还没挂载到页面上，在生命周期方函数中onMounted获取元素。

<template>
  <div ref="box">
    <button>Hehe</button>
  </div>
</template>
 
<script setup>
  import { ref, onMounted } from "vue";
  const box = ref(null);
  onMounted(() => {
    console.log(box.value);
  });
</script>