script setup 语法
通常情况下vue3要在模板中使用的变量都要在setup函数的返回对象中定义，下面是例子
<template>
<div>{{msg}}</div>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup() {
const msg = ref('hello world')
return {
msg
}
},
}
</script>
暴露变量必须 return 出来。有了 script setup 之后，使用这个语法只需要在 script 标签上加上 setup 属性。
<template>
<div>{{msg}}</div>
</template>
<script setup>
import {ref} from 'vue'
const msg = ref('hello world')
</script>
语法变得更简单了。其实 script setup 就相当于在编译运行是把代码放到了 setup 函数中运行，然后把导出的变量定义到上下文中，并包含在返回的对象中
ref
接受一个内部值并 返回 一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property.value。
修改这个变量值的时候必须要加 .value
用法
<script setup>
import {ref} from 'vue'
const msg = ref('hello world')
msg = '哈哈我被修改了' // 直接报错 typeError: Assignment to constant variable.
msg.value = '哈哈我被修改了' // 修改成功并响应式更新视图
</script>
reactive
返回对象的响应式副本。
用法
<template>
<div>{{state.msg}}</div>
<div>{{state.msg2}}</div>
</template>
<script setup>
import Demos from 'components/Demos.vue';
import {reactive} from 'vue'
const state = reactive({
msg:'hello world',
msg2:'你搁这搁这呢'
})
state.msg = '哈哈我被修改了' // 修改成功并响应式更新视图
</script>
tips
官方文档还提到reactive 将解包所有深层的 refs，同时维持 ref 的响应性。
const count = ref(1)
const obj = reactive({ count })
// ref 会被解包
console.log(obj.count === count.value) // true
// 它会更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2
// 它也会更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3
当将 ref 分配给 reactive property 时，ref 将被自动解包。
const count = ref(1)
const obj = reactive({})
obj.count = count
console.log(obj.count) // 1
console.log(obj.count === count.value) // true
toRefs
将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。
用法
如果你觉得用reactive定义的响应式变量用起来总是要加上state.，那么可以用toRefs来把他们解构
<template>
<div>{{state.msg}}</div>
<div>{{state.msg2}}</div>
</template>
<script setup>
import {reactive,toRefs} from 'vue'
const state = reactive({
msg:'hello world',
msg2:'你搁这搁这呢'
})
let {msg,msg2} = toRefs(state)
// 注意这里要加.value
msg.value = '哈哈我被修改了' // 修改成功并响应式更新视图
</script>
