下载掌阅APP，畅读海量书库
立即打开
ref是Vue3组合式API中常见的用来定义响应式数据的函数。ref函数接收一个任意类型的数据参数作为响应式数据，由Vue内部保存。ref函数返回一个响应式的ref对象，通过ref对象的value属性可以读取或者更新内部保存的数据。
根据3.2节的学习，我们知道要想让模板操作ref对象，需要将ref对象添加到setup函数返回的对象中。由于ref对象是响应式的，因此在模板中操作ref对象比较特殊，不需要我们亲自添加.value去操作它内部的数据，只需要指定ref对象就可以实现操作，因为模板在编译时会自动添加.value来读取或更新value属性值。
将上面所述过程通过代码来演示，具体如下。
运行代码后，页面上显示的是count的初始值0，如图3-3所示；点击“增加count”按钮后，显示的数量会自动增加1，如图3-4所示。
图3-3 初始页面效果（1）
图3-4 点击按钮后的页面效果（1）
ref函数除了可以接收基础类型的数据，还可以接收对象或数组类型的数据。无论是在JavaScript代码中，还是在模板代码中，我们都可以进行读取或更新数据操作。需要注意的是，只有在JavaScript代码中才能通过添加.value来操作，而在模板中则不能通过添加.value来操作，请思考下方代码。
运行代码后，页面上显示的是Tom的信息，如图3-5所示。点击“指定新的人”按钮后，就变为了Jack的信息，如图3-6所示。
图3-5 初始页面效果（2）
图3-6 点击按钮后的页面效果（2）
数组和对象的读取与更新采用的是相同的方式，这里不多做讲解。至此，读者可能会有这样一个疑问：如果点击按钮不是指定一个新的人员信息，而是更新对象中的name或age属性值（如person.value.age=24），那么页面会自动更新吗？答案是会更新，但这涉及reactive函数，3.4节将会进行具体讲解。