2、Vue3中setup()、 ref()、 reactive()、toRefs()

一、setup()和 ref()

setup()和 ref()是Vue3中新的知识点:

• setup 函数的用法，可以代替 Vue2 中的 data 和 methods 属性，直接把逻辑写在 setup 里就可以
• ref 函数的使用，要在template中使用的变量，必须用ref声明一下。
• return出去的数据和方法，在模板中才可以使用，这样可以精准的控制暴露的变量和方法。 下面以student为例，来熟悉运用setup()和 ref(),其实有Vue2基础的话，很好理解Vue3的,代码如下：

<!-- student -->
<template>
    <div>
      <button v-for="(item,index) in student" :key="index" @click="sClick(index)">{{item}}</button>
      <h1>你好！我是{{sName}}</h1>
    </div>
</template>

<script lang='ts'>
import {defineComponent,ref} from 'vue'
export default defineComponent({
    name: 'student',
    setup() {
        const student = ref(['小明','小红','小王','小李'])
        const sName = ref('')
        const sClick = (index:number) =>{
            sName.value = student.value[index]
        }
        return {
            student,
            sName,
            sClick,
        }
    }
  });
</script>

二、reactive()和toRefs()

如果我们全部使用ref()的话，代码看起来会很乱，当要改变和读取一个值的时候，还要加上value，很麻烦，这时候就可以使用reactive()和toRefs()来解决，让代码更接近Vue2的风格,无论是变量和方法，都可以作为 Object 中的一个属性,return返回的时候也不用一个个返回了，只需要返回一个data,代码如下：

<!-- student -->
<template>
    <div>
      <button v-for="(item,index) in student" :key="index" @click="sClick(index)">{{item}}</button>
      <h1>你好！我是{{sName}}</h1>
    </div>
</template>

<script lang='ts'>
import {defineComponent,ref,reactive,toRefs} from 'vue'

export default defineComponent({
    name: 'student',
    setup() {
        const data = reactive({
            student:['小明','小红','小王','小李'],
            sName:'',
            // sClick:(index:number)=>{
            //     data.sName= data.student[index] 
            // } 
            //当然可以将方法写在data对象中，但是为代码可读性和美观性等，建议将方法分开
        })
        const sClick = (index:number) =>{
            data.sName= data.student[index]
        }
        const refData = toRefs(data)
        return {
            ...refData,
            sClick,
        }
    }
  });
</script>

当然，如果公司要求代码规范严格，我们可以给 data 增加类型注解,符合Typescript规范：

<script lang='ts'>
import {defineComponent,ref,reactive,toRefs} from 'vue'

interface Data {
  student: string[];
  sName: string;
}

export default defineComponent({
    name: 'student',
    setup() {
        const data:Data = reactive({
            student:['小明','小红','小王','小李'],
            sName:'',
        })
        const sClick = (index:number):void =>{
            data.sName= data.student[index]
        }
        const refData = toRefs(data)
        return {
            ...refData,
            sClick,
        }
    }
  });
</script>

学习日期：2022/1/11

视频参考：www.bilibili.com/video/BV1L5…

文档参考：jspang.com/detailed?id…

仅供个人学习和记录