VUE3----toRaw 与 markRaw

toRaw 与 markRaw

• toRaw:

  • 作用:将一个由reactive生成的响应式对象转为普通对象
  • 使用场景:用于读取响应式对象的普通对象,对这个普通对象的所有操作,不会引起页面刷新

• markRaw:

  • 作用:标记一个对象,使其永远不会再成为响应式对象
  • 应用场景:
    • 1.有些值不应被设置成响应式时,例如复杂的第三方类库等
    • 2.当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能

<template>
  <h4>当前的求和为:{{sum}}</h4>
  <button @click="sum++">点我++</button>
  <hr>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>薪水:{{job.j1.salary}}</h2>
  <h2>汽车:{{person.car}}</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">增长薪水</button>

  <button @click="showRawPerson">输出最原始的person</button>
  <button @click="addCar">给人添加一台车</button>
  <button @click="person.car.name+='!'">换车名</button>
  <button @click="changePrice">换价格</button>
</template>

<script>
import {reactive, ref,toRefs, toRaw, markRaw} from 'vue'
export default {
  name:'demo',
  setup(){
    // 数据
    let sum = ref(0)
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    function showRawPerson(){
      let p = toRaw(person)
      console.log(p)
      // console.log(person)
    }

    function addCar(){
      let car = {
        name:'宝马',
        price:40
      }

      person.car = markRaw(car)
      console.log(person.car)
    }

    function changePrice(){
      person.car.price++
      console.log(person.car.price)
    }

    // 返回一个对象(常用)
    return {
      sum,
      person,
      ...toRefs(person),
      showRawPerson,
      addCar,
      changePrice
    }
  },
}
</script>