vue3在reactive如何取数据的方式

我们知道，在vue2里面如果要取数据只需要this.xxx，但是在vue3里面是没法的，vue3写数据的setup(){}是没有this的，也就是不能在setup直接this取数据。
我这里主要介绍的是reactive和toRefs的写法，当然还有ref和refs的写法，但是笔者认为reactive和toRefs的写法是最好的，因为这样在template里取数据方式跟vue2的写法就是一样的了。
话不多说，直接上代码块展示。

<script>
	import {reactive,toRefs} from 'vue'
	export default {
		setup(){
			let data = reactive({
				a:1,
				b:{a:1,b:2},
				c:[1,2,3],
				fn:()=>{
					data.b.a=2
				}
			})
			return { ...toRefs(data) }
		}
	}
</script>

vue3都是按需引入的，不像vue2那样，不用引入就可以直接使用，也可能也是vue3的代码性能比vue2代码性能好的原因吧。
如代码块，我们在import里引入reactive和toRefs，在reactive里传入一个json对象，这样json对象里可以是值、可以是json对象、可以是数组、也可以是方法。fn就是方法，是个箭头函数。
这个就是在reactive对象里面如何修改值的方法，可以看到是没有this的，你打印个this也只能是undefined。
再看看template是怎么取值的

<div>{{a}}</div>
<div>{{b}}</div>
<div>{{c}}</div>
<button  @click="fn">点击修改json对象的值</button>

看起来语法是不是就跟vue2写法相差不大了呢？，这样就只需要记script里的写法就可以了。

补充

以下是uniapp中用vue3的写法修改数据的方式，uniapp有小程序的语法，比如onShow、onLoad等生命周期函数，这里再介绍一下如何获取数据。

笔者遇到的情景是这样的，打开一个页面并向打开的页面传本页面的数据。

这里是接收上一个页面传递过来的数据，第一个紫色官网文档是function，但是这时候用this修改不了detailsData的数据，此时只需改为箭头函数就可以了，function的this指向是window，windows没有detailsData，就会显示undefined