vue3.0 更进一步

vue reactive，toRef 使用

reactive()

• 传入一个obj对象，可以将一系列的响应式数据放进去，一次性导出
• 修改其中的值时，不需要加.value，但是需要在前面加data.
• ts语法中，在其中使用computed()函数时，会导致无法推算data类型而报错，
  并不影响结果，或创建一个interface指定给data即可消除警告
• 使用 ...data 展开data即可在模板中省略data.
• reactive()导出的对象是普通的js类型，并不是响应式的数据

---

toRefs()

• 接收一个reactive对象作为参数，返回普通对象，其每一项都会转换成ref类型对象

<template><div id="app"><h1> {
   { count }} </h1><h2> {
   { double }} </h2><button @click="increase">+1</button></div>
</template>

import {
     reactive, toRefs, computed } from 'vue'
interface DataProps{
    count: number;double: number;increase: () => void;
}
export default {
    name: 'app',setup() {
    const data: DataProps = reactive({
    count: 0,increase: () => {
     data.count ++ },double: computed(() => {
     return data.count * 2 })})const refData = toRefs(data)return {
    ...refData,}}
}

• 之前的ref()就行js里的let y = 0 可以随时改变变量的值

• reactive() 就行是一个类，里面的变量需要跟着类名使用