VUE3.0 setup(),reactive,ref,toRe

<template>
    <div>{{loginName }}</div>
    <div>{{userName}}</div>
    <div>{{password}}</div>
</template>
<script>
  import {reactive,ref,toRefs} from "vue"
    export default {
        name: "Home",
        setup() {
          const fromData = reactive({
            userName:'admin',
            password:'123456'
          })
          const loginName = ref("admin");
          const data = toRefs(fromData);
          return {
            ...data,
            loginName 
          }
        }
    };
</script>

1.reactive()方法的作用是对象直接在模板当中使用。(我的理解vue2.0里的data(){}函数类似)

2. ref 方法的作用时页面打印参数。（代码中获取值需要用.value来获取）
3. toRefs()方法的作用是把对象转成响应式的数据