The use of Reactive (the difference between reactive and shallowReactive)

Available related to Reactive include reactive, shallowReactive, reactive API can update the view responsively, shallowReactive shallow update view. plus readonly API

Reactive

Export from vue, wrap the object with reactive {name: beautiful}

<template>
    <div>
    {
   
   {person.name}}
    </div>
</template>

<script setup lang='ts'>
// <!-- rective 不可以绑定普通类型 -->
import {
      
      reactive} from 'vue'
let person=reactive({
      
      
    name:'大漂亮'
})
person.name="小漂亮"
</script>

shallowReactive

Only the shallow layer is updated on the view, but the data will be updated

Example 1

<template>
    <div v-for="index in person">
        <div>{
   
   {index}}</div>
    </div>
    <button @click="add">数组加一</button>
</template>

import {
    
     shallowReactive } from 'vue'
let person=shallowReactive<number[]>([])
const arr=[1,2,3];
person.push(...arr);
function add(){
    
    
    console.log(person);
    for(let i=0;i<person.length;i++){
    
    
        console.log(person[i]++)
    }
}

Result: Click the button, the value in the person array will increase by one, and the view will be updated synchronously

Example 2

<template>
    <div>
      <div>{
   
   { state }}</div>
      <button @click="change1">test1</button>
      <button @click="change2">test2</button>
    </div>
  </template>
<script setup lang='ts'>
// <!-- rective 不可以绑定普通类型 -->
import {
      
      reactive} from 'vue'
//只能对浅层的数据 如果是深层的数据只会改变值 不会改变视图
import {
      
       shallowReactive } from 'vue'
const obj = {
      
      
  a: 1,
  first: {
      
      
    b: 2,
    second: {
      
      
      c: 3
    }
  }
}
const state = shallowReactive(obj)
 
function change1() {
      
      
  state.a = 7
}
function change2() {
      
      
  state.first.b = 8
  state.first.second.c = 9
  console.log(state);
}

</script>

Result:
The original display of the page
{ “a”: 1, “first”: { “b”: 2, “second”: { “c”: 3 } } } Click text1 and the view result is: { “a”: 7
,
“ first": { "b": 2, "second": { "c": 3 } } }
click text2 view result is
{ "a": 7, "first": { "b": 2, "second": { "c": 3 } } }
The console output is:
{ "a": 7, "first": { "b": 8, "second": { "c": 9 } } } Thus , using shallowReactive deep data will be updated, but not updated to the view. If you change the code to

<script>
import {
      
       shallowReactive } from 'vue'
const obj = {
      
      
  a: 1,
  first: {
      
      
    b: 2,
    second: {
      
      
      c: 3
    }
  }
}
const state = shallowReactive(obj)
 
function change1() {
      
      
  state.a = 7
}
function change2() {
      
      
  state.first.b = 8
  state.first.second.c = 9
  console.log(state);
}

</script>

The result of clicking test1 is { "a": 7, "first": { "b": 2, "second": { "c": 3 } } } The result of clicking test2 is { "a": 7, "
first ": { "b": 8, "second": { "c": 9 } } }
It can be seen that reactive will update all views.

readonly usage example

import {
    
    readonly} from 'vue'
const person = reactive({
    
    count:1})
const copy = readonly(person)
 
 person.count++
 
// copy.count++  直接报错

It can be displayed on the view and cannot be changed.