vue3响应式数据reactive和ref解析

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

reactive()


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

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

                        
                        
                            import { reactive } from 'vue' 
                            const state = reactive({ number: 0 })  
                            function increment() {
                                state.number++
                            }
                        
                        
                    
                        
                        //模板中使用
               

你可能感兴趣的:(vue3,vue3新特性,javascript,前端,vue.js)