【vue3】深层响应性

深层响应性：在 Vue 中，状态都是默认深层响应式的。这意味着即使在更改深层次的对象或数组，你的改动也能被检测到。

<script setup>
import {
      
       reactive } from 'vue'

const state = reactive({
      
       count: 0 })
const obj = reactive({
      
      
  nested: {
      
       count: 0 },
  arr: ['foo','bar']
})
function mutateDeeply(){
      
      
  obj.nested.count++
  obj.arr.push('baz')
}
  

  
function increment() {
      
      
  state.count++
}
</script>

<template>
  <button @click="increment">
    {
   
   { state.count }}
  </button>
  <br>
  <button @click = mutateDeeply>
    {
   
   {obj}}
  </button>
</template>

演练场：演练场-vuejs.org