傑森前端

理解

toRaw

將一個reactive生成的響應式物件轉回普通物件

markRaw

讓響應式物件裡面的某些屬性不會響應式

<script >
import {  reactive, toRaw, markRaw } from "vue"
export default {
  setup() {
    let person = reactive({
      name: 'jason',
      job: {
        salary: 100 //只有這個能改
      }
    })
    function toRawPerson() {
      //把reactive響應式物件轉回原本的物件
      let p = toRaw(person)
      console.log(p)
    }
    function toMarkRaw() {
      // vue3中對響應式的物件添加新屬性新的屬性也會是響應式使用markRaw可以把不想要響應的物件去掉響應式
      person.test = markRaw({
        name: 'test'
      })
      person.job = markRaw(person.job)
      console.log(person)
    }
    return {
      toRawPerson,
      toMarkRaw,
      person
    }
  }
}
</script>

<template>
  {{ person }}
  <button @click="toRawPerson">toRawPerson</button>
  <button @click="toMarkRaw">markRaw</button>
</template>

markRaw應用場景

有不須修改的未知大數據時可以使用加快性能