VUE3-shallowReactive

Vue3中shallowReactive的响应式限制

最新推荐文章于 2025-12-09 14:55:59 发布

原创最新推荐文章于 2025-12-09 14:55:59 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #vue3 #shallowReactive #浅响应

文章展示了在Vue3中使用shallowReactive创建的对象只有第一层属性是响应式的，例如`data.a.b.c.counter`点击无法更新，而`data.counter2`则可以正常响应。这说明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>