vue3 reactive解构
    Vue3 中最重要的新特性之一就是 Reactive API，这允许我们将任何对象变成响应式的，这意味着当对象的属性发生变化时，与之相关的内容会自动更新。
    这个 API 由三个主要的函数组成：reactive, readonly 和 ref。
    reactive 函数可以让一个对象变成响应式的。例如：
    ```javascript
    import { reactive } from 'vue'
    const book = reactive({
      title: 'Vue 3 Guide',
      author: 'John Smith',
      year: 2021,
    })
    ```
    现在，book 对象已经变成了响应式的。如果我们在组件中使用这个对象，当 title、author 或 year 发生变化时，组件中相关的内容会自动更新。
    但是要注意的是，Reactive API 只会监听对象自身的属性，而不会监听对象的嵌套属性。例如：
    要解决这个问题，我们需要对 author 对象也使用 reactive 函数：
    这样，当我们修改 author 对象中的属性时，相关的变化也会自动更新。
vue中reactive
    现在，book 对象不能被修改了。如果我们尝试修改 book.title，会抛出一个错误。
    最后是 ref 函数。ref 函数可以让一个值变成响应式的，并且可以使用 .value 语法访问和修改这个值。
    例如：
    const counter = ref(0)
    counter.value++
    console.log(counter.value) // 输出 1
    ```
    当我们在组件中使用 ref 变量时，组件中相关的内容会自动更新。例如：
    ```vue
    <template>
      <div>
        <p>{{ counter }}</p>
        <button @click="increment">Increment</button>
      </div>
    </template>
    function increment() {
          counter.value++
        }
    当我们点击按钮时，组件中的 {{ counter }} 会自动更新。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。