Vue 3 中响应式数据丢失的种情况

响应式丢失的常见情况

1. 解构响应式对象

   解构响应式对象会丢失响应式。

   <template>
     <div>
       <p>Name: {{ name }}</p>
       <button @click="updateName">Update Name</button>
     </div>
   </template>
   
   <script setup>
   import { reactive } from 'vue';
   
   const user = reactive({
     name: 'Alice',
   });
   
   const { name } = user; // 错误，响应式丢失
   
   const updateName = () => {
     user.name = 'Bob';
   };
   </script>
   

   解释:

   • user 是一个响应式对象。
   • 解构 user 得到的 name 变量不是响应式的。

   解决方法:

   • 使用 toRefs 将响应式对象转换为 ref 对象：

     <script setup>
     import { reactive, toRefs } from 'vue';
     
     const user = reactive({
       name: 'Alice',
     });
     
     const { name } = toRefs(user); // 正确，响应式
     
     const updateName = () => {
       user.name = 'Bob';
     };
     </script>
     

   • 直接使用 user.name：

     <template>
       <div>
         <p>Name: {{ user.name }}</p>
         <button @click="updateName">Update Name</button>
       </div>
     </template>
     
     <script setup>
     import { reactive } from 'vue';
     
     const user = reactive({
       name: 'Alice',
     });
     
     const updateName = () => {
       user.name = 'Bob';
     };
     </script>