NO6 在setup中定义变量（字符串，对象和数组）

<script setup lang="ts">

    import {ref, reactive} from 'vue'

    const count = ref(0)

    const user = reactive({

        name: '张三'

    })

    const arr = reactive([1,2,3])

    const setCount = () => {

        count.value++

        user.name = '李四'

    }

    // 综合定义

    const data = reactive({

        count: 0,

        user: {

            name: '王五'

        },

        arr: ['a','b','c']

    })

    const setCount2 = () => {

        data.count++

        data.user.name = '李四'

    }

</script>


<template>

    <p>{{count}} {{user.name}}</p>

    <button @click="setCount">增加</button>

    <p v-for="(item,index) in arr" :key="index">{{item}}</p>

    <!-- 综合定义 -->

    <p>{{data.count}} {{data.user.name}}</p>

    <button @click="setCount2">增加</button>

    <p v-for="(item,index) in data.arr" :key="index">{{item}}</p>

</template>