在Vue 3中，ref是一个函数，用于创建一个响应式的引用对象。ref函数可以用于在setup函数中创建响应式的数据。
使用ref函数时，它会返回一个响应式对象，该对象有一个.value属性，用于访问和修改其值。当你改变.value的值时，Vue会自动追踪这个变化，并在需要时更新视图。
下面是使用ref的示例：
1. <template> 2. <div> 3. <p>计数: {{ count.value }}</p> 4. <button @click="increment">增加</button> 5. </div> 6. </template> 7. 8. <script> 9. import { ref } from 'vue'; 10. 11. export default { 12. setup() { 13. // 创建一个响应式引用对象 14. const count = ref(0); 15. 16. // 创建一个函数用于增加计数 17. const increment = () => { 18. count.value++; 19. }; 20. 21. // 返回响应式数据和方法 22. return { 23. count, 24. increment, 25. }; 26. }, 27. }; 28. </script>
在上面的例子中，我们使用ref函数来创建一个响应式的引用对象count，并初始化其值为0。然后，我们使用increment方法来增加count的值，注意我们访问count时需要使用.value来获取其值。
ref还有一个 shallowRef函数，用于创建一个非深层次的响应式引用对象。在shallowRef下，如果对象的属性变化，Vue只会追踪对象本身的改变，而不会递归地追踪对象内部属性的改变。这在处理复杂对象时可能会有一些性能上的优势。
例如：
1. <template> 2. <div> 3. <p>用户信息：</p> 4. <p>Name: {{ user.name }}</p> 5. <p>Age: {{ user.age }}</p> 6. </div> 7. </template> 8. 9. <script> 10. import { shallowRef } from 'vue'; 11. 12. export default { 13. setup() { 14. // 创建非深层次的响应式引用对象 15. const user = shallowRef({ 16. name: 'John', 17. age: 30, 18. }); 19. 20. // 模拟异步修改用户信息 21. setTimeout(() => { 22. // 这里改变user对象本身，不会追踪对象内部属性的改变 23. user.value = { 24. name: 'Jane', 25. age: 28, 26. }; 27. }, 2000); 28. 29. return { 30. user, 31. }; 32. }, 33. }; 34. </script>
在这个示例中，我们使用shallowRef来创建非深层次的响应式引用对象user。在定时器的回调函数中，我们更新了user对象本身，而不是更新对象内部的属性。由于使用了shallowRef，Vue不会追踪对象内部属性的改变，因此视图不会在属性改变时更新。
总结：ref和shallowRef是Vue 3中用于创建响应式数据的函数。ref可以用于创建普通的响应式数据，而shallowRef用于创建非深层次的响应式引用对象。在setup函数中使用ref或shallowRef可以确保创建响应式数据，以便在组件中正确地追踪数据的变化并更新视图。
