Vue.js 3.0:从方法读取和设置对象属性

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: 'John',
      age: 30
    });

    function getUserInfo() {
      return `Name: ${user.name}, Age: ${user.age}`;
    }

    function updateUserName(newName) {
      user.name = newName;
    }

    return {
      ...toRefs(user),
      getUserInfo,
      updateUserName
    };
  }
};

function updateUser(user) {
  user = { ...user, name: 'Jane' }; // 这样会导致响应式丢失
}

function updateUserCorrectly(user) {
  user.name = 'Jane'; // 正确的方式
}

import { reactive } from 'vue';

const user = reactive({
  name: 'John',
  age: 30
});