vue3-toRaw和markRaw

627 阅读1分钟

一、toRaw

toRaw将reactive的数据从响应式数据变为普通数据

<script>
    import {reactive,toRaw} from 'vue'
    export default{
        setup(){
            let person=reactive({
                name:'张三',
                age:24,
                job:{
                    teacher:{
                        salary:11
                    }
                }
            })
            function changeToRaw(){
                let p=toRaw(person)
                console.log(p)
            }
            return{
                person,
                changeToRaw
            }
        }
    }
</script>

二、markRaw

markRaw将数据设置成普通数据,数据将不再是响应式

<script>
    import {reactive,markRaw} from 'vue'
    export default{
        setup(){
            let person=reactive({
                name:'张三',
                age:24,
                job:{
                    teacher:{
                        salary:11
                    }
                }
            })
            function addCar(){
               let car={name:'宝马',price:'100'},
                person.car=markRaw(car)
            }
            return{
                person,
                addCar
            }
        }
    }
</script>