vue3响应式数据reactive和ref解析

在vue3中ref()或reactive()都可以创建响应式数据，主要区别在于针对的数据类型不同，ref()可以创建所有的数据类型的响应式数据，reactive()仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对string、number 和 boolean这样的基本类型无效。

reactive()

---

reactive参数必须是对象，其他基本类型无法实现响应式。

要在组件模板中使用响应式状态，需要在setup()函数中定义并返回,如果我们使用了构建工具，在单文件组件中 可以通过下列方式直接使用。

                        
                        <!-- <script setup> -->
                            import { reactive } from 'vue' 
                            const state = reactive({ number: 0 })  
                            function increment() {
                                state.number++
                            }
                        <!-- </script>   -->
                        
                    

                        
                        //模板中使用