Reactivity Transform

在Vue3的Composition API出来以后，定义响应式数据都是使用ref或者reactive。但ref在使用的时候经常到处需要.value，使用起来会感觉很麻烦。下面来看看在测试中的Reactivity Transform的使用吧

如果我们不想使用.value的话可以使用 $ref宏函数 来定义。例如下面：

	import { $ref } from 'vue/macros'
	let num = $ref(0)
	const add = ()=>{
		// 不需要num.value++
		num++
	}

当然，跟ref有关的其他函数都有处理，有如下：
$computed

$shallowRef

$customRef

$toRef

另外，$()也可用于将对象解构

import {reactive} from 'vue'
import {$} from 'vue/macros'
const Student = reactive({
    name: 'ashin',
    age:11,
    subject:'Vue'
})
 
let { name,age,subject } = $(Student);
// 在正常情况下结构是会丢失响应式的，使用$()包裹解构可以保持响应式
 

$$()转换为真实ref

因为$ref()编译之后是.value而不是ref对象，但有时我们是需要用到ref对象而不是.value形式，因而会导致报错，比如使用watch监听的时候,如果不是ref对象，是无法监听并且会抛出警告。因此就需要用到这个 $$()转义

import { watch } from 'vue'

// bind ref as a variable
let count = $ref(0)

watch($$(count),(newVal,oldVal) => {
  console.log(newVal)
})

// assignments are reactive
count++

// get the actual ref
console.log($$(count)) // { value: 1 }

这就是Reactivity Transform的主要内容了，不过现在也只是实验性的，目前仅用于测试和反馈。

详细可参考vue文档