<template>
    <h1>一個人的信息</h1>
    <h2>姓名：{{person.name}}</h2>
    <h2>年齡：{{person.age}}</h2>
    <h3>工作種類：{{person.job.type}}</h3>
    <h3>工作薪水：{{person.job.salary}}</h3>
    <h3>愛好：{{person.hobby}}</h3>
    <h3>測試的數(shù)據(jù)c：{{person.job.a.b.c}}</h3>
    <button @click="changeInfo">修改人的信息</button>
</template>

<script>
    import {reactive} from 'vue'
    export default {
        name: 'App',
        setup(){
            //數(shù)據(jù)  雖然reactibe用不了基本類型，但是我們可以將基本類型的數(shù)據(jù)作為屬性，
            // 放到一個對象中，比如下面的name，age，總體來說寫法比ref簡單，因為不用.value
            let person = reactive({
                name:'張三',
                age:18,
                job:{
                    type:'前端工程師',
                    salary:'30K',
                    a:{
                        b:{
                            c:666
                        }
                    }
                },
                hobby:['抽煙','喝酒','燙頭']
            })

            //方法
            function changeInfo(){
                person.name = '李四'
                person.age = 48
                person.job.type = 'UI設(shè)計師'
                person.job.salary = '60K'
                person.job.a.b.c = 999
                person.hobby[0] = '學(xué)習(xí)'
            }

            //返回一個對象（常用）
            return {
                person,
                changeInfo
            }
        }
    }
</script>