Vue3基本操作

提示：vue3 的ref和reactive使用技巧

一、ref

对于基本数据类型和引用数据类型都可以修改，ref修改数据时，需要通过 目标对象**.value** 的方式去获取。

代码如下（示例）：

1、基本数据类型

 let refData = ref('胡歌')
 
 let updateRef =  ()=> { 
        refData.value = '肖战'
}

2、引用数据类型

 let refData = ref({name:'张三',age:20})
 
 let updateRef =  ()=> { 
        refData.value.name = '张四'
}

二、reactive

只能修改引用数据类型，不需要**.value**进行修改

代码如下（示例）：

1、基本数据类型

 let reactData = reactive('胡歌')
 
 let updateReactive =  ()=> { 
        reactData = '肖战' //次数无法修改
}

2、引用数据类型

 let reactData = reactive({name:'张三',age:20})
 
 let updateReactive =  ()=> { 
        reactData.name = '张四'//次数才可以被修改
}

总结

本文仅仅简单介绍了ref和reactive的使用,代码中推荐使用ref,因为对于基本数据类型和引用数据类型都可适用。