009-使用toRefs解构reactive构造的数据

使用toRefs解构reactive构造的数据

toRefs() //可以结构reactive整合的数据

<template>

<!-- 如下显示, 所有通过解构的数据均可以直接根据其变量名进行访问 -->

<div>{{name}}</div>

<div>{{age}}</div>

<div>{{studySubject[0]}}</div>

<div>{{moreInfo.homePage}}</div>

</template>

<script>

import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({

name: 'example',

setup(){

let data = reactive({

name: 'jack',

age: 10,

studySubject: ['math', 'english'],

moreInfo: {

homePage: 'blog.jack.com'

}

})

}

return {

//使用reRefs解构之后, 可以直接在templete使用解构后的变量名, 例如<div>{{name}}</div>即可,也就是是说, {{data.name}} -> {{name}}即可访问

//需要注意的是, 通过reRefs解构后, 其他变量就不能和解构后的变量名冲突了, 例如data内有name成员, 解构后, 不能再次定义变量名为name的变量

//...是ES6的语法, 大概其实就是将对象进行解构, 也就是说, 结构后全部出赋值给return

...reRefs(data)

}

})

</script>