快捷導(dǎo)航

Vue中的reactive函數(shù)操作代碼

更新時(shí)間：2022年12月27日 10:40:31 作者：安靜點(diǎn)--

這篇文章主要介紹了Vue中的reactive函數(shù),本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

reactive函數(shù)

之前給大家介紹過(guò)vue3.2 reactive函數(shù)問(wèn)題小結(jié)，喜歡的朋友點(diǎn)擊查看。

作用: 定義一個(gè)對(duì)象類型的響應(yīng)式數(shù)據(jù)（基本類型不要用它，要用ref函數(shù),ref函數(shù)可以用基本類型也可以對(duì)象類型）
語(yǔ)法：const 代理對(duì)象= reactive(源對(duì)象)接收一個(gè)對(duì)象（或數(shù)組），返回一個(gè)代理對(duì)象（Proxy的實(shí)例對(duì)象，簡(jiǎn)稱proxy對(duì)象）
reactive定義的響應(yīng)式數(shù)據(jù)是“深層次的”。
內(nèi)部基于 ES6 的 Proxy 實(shí)現(xiàn)，通過(guò)代理對(duì)象操作源對(duì)象內(nèi)部數(shù)據(jù)進(jìn)行操作。

<template>
    <h1>一個(gè)人的信息</h1>
    <h2>姓名：{{person.name}}</h2>
    <h2>年齡：{{person.age}}</h2>
    <h3>工作種類：{{person.job.type}}</h3>
    <h3>工作薪水：{{person.job.salary}}</h3>
    <h3>愛(ài)好：{{person.hobby}}</h3>
    <h3>測(cè)試的數(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ù)作為屬性，
            // 放到一個(gè)對(duì)象中，比如下面的name，age，總體來(lái)說(shuō)寫法比ref簡(jiǎn)單，因?yàn)椴挥?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è)計(jì)師'
                person.job.salary = '60K'
                person.job.a.b.c = 999
                person.hobby[0] = '學(xué)習(xí)'
            }

            //返回一個(gè)對(duì)象（常用）
            return {
                person,
                changeInfo
            }
        }
    }
</script>

到此這篇關(guān)于Vue中的reactive函數(shù)的文章就介紹到這了,更多相關(guān)Vue reactive函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: