VUE3.0 setup(),reactive,ref,toRefs使用

vue3常用函数的使用

• setup 函数用法,可以代替Vue2中的data和method属性,直接把逻辑加在setup中

• ref 函数在temlate中用的变量需要用ref包装下

• return出去的数组和方法在模板中才可以使用

• reactive函数的用法,他的参数不是基本类型,而是一个object,这样就你不用在方法中写.value了,同时放回data就可以

  但是这样写,必须在template使用变量和方法的时候需要加上data.,这样显然是不符合我们开发的编码习惯的,
  我们可以想到在return的时候将data解构使用...拓展运算符,但是这样解构后就成了普通变量,不再具有响应式的能力,
  所以我们需要使用toRefs()函数

<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>

如何选择ref和reactive,两种方法都可以,他们都可以生成响应式对象,个人选择reactive