vue3 ref创建对象

在Vue3中，可以使用`ref`函数创建对象。使用`ref`函数可以将一个普通的JavaScript对象转换成一个可观察对象。通过`ref`函数创建的对象可以在模板中使用，并且响应式地更新。通过在模板中使用`.value`来访问对象的属性。

下面是一个使用`ref`函数创建对象的示例代码：

import { ref } from 'vue'

export default {
  setup() {
    let name = ref('张珊')
    let age = ref(18)
    let job = ref({ type: '前端工程师', salary: '30k' })

    function changeInfo() {
      job.value.type = 'ui设计师'
      job.value.salary = '20k'
    }

    return {
      name,
      age,
      changeInfo,
      job
    }
  }
}

在上面的代码中，我们使用`ref`函数将`name`、`age`和`job`转换为可观察对象。可以通过`.value`来访问对象的属性，例如`job.value.type`和`job.value.salary`。在`changeInfo`函数中，我们可以直接更新`job`对象的属性值。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vuse-rx:Vue 3 + rxjs =:red_heart:](https://download.csdn.net/download/weixin_42099906/15609904)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue3（工程创建 setup ref，reactive函数）](https://blog.csdn.net/weixin_61774894/article/details/124989286)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]