ref与reactive

ref定义基本类型数据
reactive定义对象或者数组类型的数据

问题：也就是说不建议用ref()来定义对象吗？
回答：ref()可以用来定义对象，但是如果需要对整个对象进行响应式处理，建议使用reactive()。因为ref()只能包装简单的值类型，无法直接包装对象，如果强行使用ref()包装对象，那么得到的是一个带有.value属性的包装对象，而这个.value属性才是真正的对象。而使用reactive()则可以直接将对象转化为响应式对象。

ref通过Object.defineProperty()下面的get()和set()来实现响应式的
reactive是通过Proxy来实现响应式的并通过Reflect来操作源数组

获取ref的数据时候(js中)是需要.value的，读取数据模板中不需要.value
reactive操作是和{{}}模板读取是不需要.value的

Proxy Reflect reactive ref 之间的关系

JavaScript的Proxy和Reflect与Vue的reactive和ref之间有相互关联的关系，它们都是用于实现JavaScript中的响应式编程。

Proxy: 是JavaScript中的一个对象，用于在对象上定义自定义行为。它可以用于拦截对象的属性访问、赋值、函数调用等操作，从而实现对对象行为的监听和修改。Proxy通常用于实现数据的双向绑定和数据的响应式更新。

Reflect: 是JavaScript中引入的一个内置对象，它提供了一组操作对象的方法，这些方法与对象的属性操作相关，例如读取、设置、删除等。Reflect的方法与Object的方法类似，但是它们是作为函数而不是作为对象的方法调用的。Reflect的方法可以用于代替部分Object方法，同时还提供了一些新的功能，例如Reflect.has()可以用于判断对象是否包含某个属性。

Vue的reactive: 可以将一个普通的 JavaScript 对象转换成响应式对象，当响应式对象的属性发生变化时，Vue会自动更新相关的内容。它是通过使用Proxy来实现的。

Vue的ref: 是Vue 3中的一个特殊对象，它用于在组件之间传递数据，并且可以触发视图的重新渲染。Ref对象通常用于对简单类型的数据进行响应式处理。它是通过使用Proxy和Reflect来实现的。

这些概念之间的关系如下图所示：

gherkin
Copy
        +----------+                    +----------+
        |   Proxy  |                    |  Reflect |
        +----------+                    +----------+
              |                                 |
              |                                 |
              v                                 v
      Reactive Programming              Object Operations
              |                                 |
              |                                 |
              v                                 v
        +-------+                         +-------+
        |  Vue  |                         |  Vue  |
        |reactive|                         |   ref  |
        +-------+                         +-------+
在图中，Proxy和Reflect都与对象操作相关，而Vue的reactive和ref则是用于实现Vue中的响应式行为的工具。Vue的ref对象可以使用Proxy和Reflect来实现其内部的响应式行为。

计算属性

<template>
    姓：<input type="text" v-model="person.firstName"><br/>
    名：<input type="text" v-model="person.lastName">
    <p>
        <input type="text" v-model="person.addName">
    </p>
</template>

<script>
import {ref,reactive,computed} from 'vue'
export default {
  name: 'App',
  setup(){
    const person=reactive({
        firstName:'付',
        lastName:"强"
    })
    // 计算属性简写，只读写法
    // person.addName=computed(()=>{
    //     return person.firstName+person.lastName
    // })
    // 计算属性完整写法 读写
    person.addName=computed({
        get(){
            return person.firstName
            +"-"+person.lastName
        },
        set(value){
            const nameArr=value.split('-')
            person.firstName=nameArr[0]
            person.lastName=nameArr[1]
            
        }
    })
    return{
        person
    }
  }

}
</script>

<style>

</style>