“This is the third day of my participation in the Gwen Challenge.

1. Readonly Depth read-only

Data wrapped by readonly can be readonly. Is a deep read - only and cannot be modified. Let's take a look at the following code. We tried to modify the value, but the view did not respond. And the console warning target is read-only readonly Deep read-only application scenarios: for example, the user information will not change after we log in.Copy the code
<template> <div> <div> <div>{{viewSate}}</div> < button@click ="func1"> </button> </div> </div> </template> <script> import { reactive,readonly} from 'vue' export default { name: 'App', setup(){let state=reactive({name:" zhang ", age:20, sex:" male "}) Let viewSate=readonly(state) function func1(){viewSate. Name =" func1 "} return {viewSate,func1}},} </script>Copy the code

2. ShallowReadonly Shallow read-only

ShallowReadonly puts an object in which direct attributes cannot be modified; Properties under an object can be modified if there are other properties under that object.Copy the code
<template> <div> <div> <div>{{viewSate}}</div> < button@click ="func1"> </button> </div> </div> </template> <script> import { reactive,shallowReadonly} from 'vue' export default { name: 'App', setup(){let state=reactive({name:" zhang ", age:20, info:{h:1.90, W :'64kg'}}) // shallowReadonly is shallow read-only // shallowReadonly contains an object whose direct attributes cannot be modified; // If there are other objects under the properties of the object. ViewSate =shallowReadonly(state) function func1(){viewSate=shallowReadonly(state) function func1(){viewSate=shallowReadonly(state) function func1(){viewSate=shallowReadonly(state) function func1() } return {viewSate,func1}},} </script>Copy the code

3 toRaw turns the proxy object into a normal object

ToRaw turns the proxy object into a normal object. At this point our data is no longer responsive data. So when you modify a normal object, the data changes, but the view doesn't update.Copy the code
<template> <div> <div> <div>{{state}}</div> < button@click ="func1"> button </button> </div> </template> <script> import  { reactive,toRaw} from 'vue' export default { name: 'App', setup(){let state=reactive({name:" zhang ", age:20, } let viewSate=toRaw(state) function func1(){viewSate. Age =40; console.log(state); // Proxy {name: "", age: 40} console.log(viewSate); / / {name: "zhang", the age: 40}} return {state, func1}},} < / script >Copy the code