Vue中的reactive函數操作代碼

更新時間：2022年12月27日 10:40:31 作者：安靜點--

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

reactive函數

之前給大家介紹過vue3.2 reactive函數問題小結，喜歡的朋友點擊查看。

作用: 定義一個對象類型的響應式數據（基本類型不要用它，要用ref函數,ref函數可以用基本類型也可以對象類型）
語法：const 代理對象= reactive(源對象)接收一個對象（或數組），返回一個代理對象（Proxy的實例對象，簡稱proxy對象）
reactive定義的響應式數據是“深層次的”。
內部基于 ES6 的 Proxy 實現，通過代理對象操作源對象內部數據進行操作。

<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>測試的數據c：{{person.job.a.b.c}}</h3>
    <button @click="changeInfo">修改人的信息</button>
</template>

<script>
    import {reactive} from 'vue'
    export default {
        name: 'App',
        setup(){
            //數據  雖然reactibe用不了基本類型，但是我們可以將基本類型的數據作為屬性，
            // 放到一個對象中，比如下面的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設計師'
                person.job.salary = '60K'
                person.job.a.b.c = 999
                person.hobby[0] = '學習'
            }

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

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

您可能感興趣的文章: