VUE3-shallowReactive

VUE3-shallowReactive

作用

对象的第一层支持响应式，第二层就不在支持了

代码

<template>
  <h2>计数器：{
   
   {data.a.b.c.counter}}</h2>
  <button @click="data.a.b.c.counter++">点我加1</button>
  <hr>
  <h2>计数器：{
   
   {data.counter2}}</h2>
  <button @click="data.counter2++">点我加1</button>
</template>

<script>
  import {
      
      
    shallowReactive
  } from 'vue'
  export default {
      
      
    setup() {
      
      
      // data
      let data = shallowReactive({
      
      
        counter2: 1000,
        a: {
      
      
          b: {
      
      
            c: {
      
      
              counter: 1
            }
          }
        }
      })

      return {
      
      
        data
      }
    }
  }
</script>

会发现第一按钮没有反应，第二个按钮会有反应加1

涉及内容

vue3、shallowReactive、浅响应