Vue3基础(十)___toRaw___markRaw

toRaw

ref

<template>
  <div>
    <p>name:{
   {
   strObj.name}}</p>
    <p>age:{
   {
     strObj.age}}</p>
    <button @click="isChangeFun">点击按钮年龄加1</button>
  </div>
</template>
<script>
import {
    ref ,toRaw} from "vue";
export default {
   
  name: "App",
  setup() {
   
    let strObj1={
   
      name:"zjq",
      age:188
    }
    let strObj = ref(strObj1)
    const isChangeFun = ()=>{
   
      strObj.value.age++
      let toRawStrObj = toRaw(strObj.value)
     console.log(toRawStrObj);
    }
    return {
   strObj,isChangeFun}
  },
};
</script>

toRaw方法能获取到ref的原始对象，前提是需要.value,将ref对象转成普通对象，因为对象在ref的value属性上，所以我们在获取原始数据的时候需要.value。

reactive

<template>
  <div>
    <p>name:{
   {
   strObj.name}}</p>
    <p>age:{
   {
     strObj.age}}</p>
    <button @click="isChangeFun">点击按钮年龄加1</button>
  </div>
</template>

<script>
import {
    reactive ,toRaw} from "vue";

export default {
   
  name: "App",
  setup() {
   
    let strObj1={
   
      name:"zjq",
      age:188
    }
    let strObj = reactive(strObj1)
    const isChangeFun = ()=>{
   
      strObj.value.age++
      let toRawStrObj = toRaw(strObj)
     console.log(toRawStrObj);
    }
    return {
   strObj,isChangeFun}
  },
};
</script>

利用reactive包裹的响应式数据获取原始数据直接就可以获取到，这也是ref和reactive的特点。

markRaw

ref

<template>
  <div>
    <p>name:{
   {
   strObj.name}}</p>
    <p>age:{
   {
     strObj.age}}</p>
    <button @click="isChangeFun">点击按钮年龄加1</button>
  </div>
</template>

<script>
import {
    ref ,markRaw} from "vue";
export default {
   
  name: "App",
  setup() {
   
    let strObj1={
   
      name:"zjq",
      age:188
    }
    let strObj = markRaw(strObj1)
    let strObjRef = ref(strObj)
    const isChangeFun = ()=>{
   
      strObjRef.value.age++
      console.log('strObjRef.value===', strObjRef.value);
    }
    return {
   strObj,isChangeFun}
  },
};
</script>

使用markRaw包裹之后的对象，永远不能转成响应式数据，即使使用ref包裹。
页面不会发生改变。

reactive

<template>
  <div>
    <p>name:{
   {
   strObj.name}}</p>
    <p>age:{
   {
     strObj.age}}</p>
    <button @click="isChangeFun">点击按钮年龄加1</button>
  </div>
</template>

<script>
import {
    reactive ,markRaw} from "vue";

export default {
   
  name: "App",
  setup() {
   
    let strObj1={
   
      name:"zjq",
      age:188
    }
    let strObj = markRaw(strObj1)
    let strObjRef = reactive(strObj)
    const isChangeFun = ()=>{
   
      strObjRef.age++
      console.log('strObjRef===', strObjRef);
    }
    return {
   strObj,isChangeFun}
  },
};
</script>

reactive包裹也同样如此，无法更新UI界面。