【Vue3】shallowReactive与shallowRef用法

一、说明

shallowReactive：只处理数组对象的父节点的响应式，适用于：数组对象太多太大，但是，仅需要对父节点响应。

shallowRef:只处理基本类型数据的响应式,不进行对象的响应式处理，适用于：生成一个替代新的对象，而不是原对象。

 

<template>
  <h4>当前的x值是:{{x.y}}</h4>
  <button @click="x.y++">x.y++</button>
  <hr>
  <h4>{{person}}</h4>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <h2>薪水:{{job.j1.salary}}</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">增长薪水</button>
</template>

<script>
import {reactive, ref, toRef,toRefs,shallowReactive,shallowRef} from 'vue'
export default {
  name:'demo',
  setup(){
    // 数据
    let person = shallowReactive({  // 只考虑第一层数据的响应式
    // let person = reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    let x = shallowRef({
    // let x = ref({
      y:0
    })

    const name1 = person.name
    console.log('%%%',name1)

    const name2 = toRef(person,'name')
    console.log('###',name2)
    // 返回一个对象(常用)
    return {
      x,
      person,
      ...toRefs(person)
    }
  },
}
</script>