This is the 26th day of my participation in the More Text Challenge. For more details, see more text Challenge

Readonly and shallowReadonly

Readonly depth read-only data, the incoming response type or pure object, return a read-only agency of the original object any nested inside the object attribute is read-only, in certain cases, don’t want to update the data, then you can packaging production a read-only proxy object to read the data, to prevent the data modify, or delete operation, etc. ShallowReadonly Data that is passed in a reactive or pure object. Returns a read-only proxy for the original object, but only at the first level, not deep.

In the following code, the readonly layer is read-only, and the allowReadOnly layer is read-only only

<template>
  <div></div>
</template>

<script lang="ts">
import { defineComponent, readonly, shallowReadonly } from "vue";

export default defineComponent({
  name: "".setup() {
    // readonly Deep read-only
    let deepObj = readonly({
      a: 0.b: {
        c: 0,}});let changeDeepObj = () = > {
        deepObj.b.c++
    }

    // shallowReadonly Shallow read-only
    let shallowObj = shallowReadonly({
      a: 0.b: {
        c: 0,}});let changeShallowObj = () = > {
        shallowObj.b.c++
    }
    return {
        deepObj,
        changeDeepObj,
        shallowObj,
        changeShallowObj
    }
  },
});
</script>

<style scoped>
</style>
Copy the code

ToRaw and markRaw

ToRaw converts the reactive or readonly functions into reactive proxies. The properties of the reactive objects are changed without updating the view interface. Typically used to render large lists with immutable data sources, skipping the proxy transformation can improve performance.

MarkRaw marks an object so that it can never be converted to reactive data, only the object itself is returned, and is typically used in scenarios where values should not be set to reactive, such as third-party class instances or Vue objects.

The following code, after using toRaw, the responsive data becomes not responsive

<template>
  <div>
      <p>Name: {{rawobja. name}} Quantity: {{rawobja. count}}<button @click="changeRawObjA">Change the rawObjA method</button></p>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRaw, markRaw , reactive } from 'vue';

export default defineComponent({
  name: 'raw'.setup() {
      // Define a responsive data
      let reactiveObjA = {
          name: 'Joe'.count: 1
      }

      // Use toRaw to transform responsive data into non-responsive data
      let rawObjA = toRaw(reactiveObjA)

      // Change the rawObjA method
      let changeRawObjA = () = >  {
          rawObjA.count++
          console.log(rawObjA.count);
      }

      return {
          rawObjA,
          changeRawObjA
      }
  }
});
</script>

<style scoped>

</style>
Copy the code

MarkRaw marks data that is never reactive, even if it’s reactive

<p> Name: {{markrawobjb. name}} Quantity: {{markrawobjb. count}} < button@click ="changeReactiveMarkRawB"> Change the rawObjA method </button></p>

  // Change the rawObjA method
      let changeRawObjA = () = >  {
          rawObjA.count++
          console.log(rawObjA.count);
      }

      // 2. MarkRaw indicates that a data is always unresponsive
      let markRawObjB = {
          name: 'Cathy'.count: 1
Copy the code

Three, toRef characteristics and function

ToRef creates a Ref reference for an attribute on the responsive object, and the reference object is updated synchronously when it is updated. Note that if the data created through toRef is modified, it does not trigger an update to the view interface, because toRef is essentially a reference associated with the original data.

You take a property from an object, you manipulate that property, that property is not reactive

<template>
  <div>
      <p>{{objA.count}} <button @click="changeObjA">How to change objA</button> </p>
  </div>
</template>

<script lang="ts">
import { defineComponent,toRef,reactive } from 'vue';

export default defineComponent({
  name: ' '.setup() {
      let objA = reactive({
          count: 0
      }) 

      let changeObjA = () = > {
          let count = objA.count
          count++ 
      }

      return {
          objA,
          changeObjA
      }
  }
});
</script>

<style scoped>

</style>
Copy the code

Use toRef to make it responsive

  let count =toRef(objA,'count')
          count.value++ 
Copy the code