008-使用reactive定义复杂数据

使用reactive定义复杂数据

我们可以通过ref定义数据, 当数据过多或者复杂时可以通过reactive整合数据

<template>//注意观察注释, 注释掉了所以使用ref定义的数据

<!-- <div>{{ num }}</div>

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

<div>{{ arr.slice(0, 2) }}</div>

<div>{{ obj.age }}</div> -->

<!-- 所有使用reactive定义的数据, 全部必须要包含使用reactive定义的变量名称 -->

<div>{{ data.num }}</div>

<div>{{ data.name }}</div>

<div>{{ data.arr.slice(0, 2) }}</div>

<div>{{ data.obj.age }}</div>

</template>

<script> //注意观察注释, 注释掉了所以使用ref定义的数据

export default defineComponent({

name: "Home",

setup() {

// let num = ref(10)

// let name = ref('jack')

// let arr = ref(['a', 'b', 'c', 'd'])

// let obj = ref({

//   age: 20

// })

let data = reactive({

num: 10,

name: "jack",

arr: ["a", "b", "c", "d"],

obj: {

age: 20

},

});

return { //在return的时候, 只需要return reactive定义的变量即可让template访问

// num,

// name,

// arr,

// obj,

data

};

},

});

</script>