# Vue3_Study

**Repository Path**: chi_queen/vue3_study

## Basic Information

- **Project Name**: Vue3_Study
- **Description**: 学习Vue3
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-30
- **Last Updated**: 2024-02-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 二、组合式API

## 1. setup

## 2. ref和reactive函数

### reactive函数

>通常使用它定义`对象类型`的响应式数据

问题：以前在`data函数`中返回对象数据就是响应式的，现在`setup`中返回的数据是响应式的吗？

>不是的，需要使用`reactive`转换程响应式
>
>使用步骤：
>
>* 从`vue`中导入`reactive`函数
>* 在`setup`函数中，使用`reactive`函数，传入一个普通对象，返回一个响应式数据对象
>* 最后在`setup`函数中返回一个对象，包含该响应式对象即可，模块中

```vue
<script>
import {reactive} from "vue";

export default {
  name:'reac',
  setup(){
    // reactive:接收一个对象类型的数据，返回一个响应式的对象
    const obj = reactive({name:'zsf',age:23})
    console.log(obj)
    function addAge(){
      obj.age++
    }
    const MinusAge = ()=>{
      obj.age--
    }
   return {obj,addAge,MinusAge}
  },
  // 创建Vue2实例之前执行
  beforeCreate() {
    console.log("beforeCreate", this.$refs.abc);
  },
  // 表示创建vue2实例之后执行
  created() {
    console.log("created", this.$refs.abc);
  },
  // dom元素挂载之前执行
  beforeMount() {
    console.log("beforeMount", this.$refs.abc);
  },
  // dom元素挂载之后执行- 此时表示 document已经被渲染到页面了
  mounted() {
    console.log("mounted", this.$refs.abc);
  },
}
</script>
<template>
<h1>认识reactive函数</h1>
  <h2>姓名:{{obj.name}}</h2>
  <h2>年龄:{{obj.age}}</h2>
  <button @click="addAge">长一岁</button>
  <button @click="MinusAge">减一岁</button>
</template>
<style>

</style>
```



### ref函数

1. 作用：接收简单类型或者对象类型的数据传入并返回一个响应式的对象

2. 语法：`const xxx= ref(initValue)`

   * 从`vue`中导入`ref`函数
   * 创建一个包含响应式数据的的引用对象（reference对象，简称`ref对象`
   * 注意：使用`ref`创建的数据时，`js`中操作需要：`xxx。value`;`template模板`中不需要.value,直接`<div>{{xxx}}</div>`使用。

   >template中自动将ref声明的数据进行了解包-解包- { value: 0  } => 0

   ```vue
   <script setup>
   import {ref} from "vue";
   
   /**
    * ref:接收简单类型或者对象类型数据传入并返回一个响应式的对象
    ref不局限声明任何的响应式数据
    */
   let person =ref({
     name: '张三风',
     age: 108,
     sex: '男',
     job: {
       type: '前端工程师',
       salary: '30k',
     },
     testData: {
       a: {
         c: 333
       }
     },
     hobby: ['抽烟', '喝酒', '打豆豆']
   
   })
   const changeInfo = ()=>{
       //在js中使用ref的值需要.value
     console.log('修改个人信息')
     person.value.name= '李四'
     person.value.age= 48
     console.log(person.value.job)
   
     person.value.hobby[0] = '学习'
   }
   const setCount =() =>{
     console.log('修改')
   }
   </script>
   <template>
     <h1>一个人的信息</h1>
     <div class="info">
       <h2>姓名：{{ person.name }}</h2>
       <h2>年龄：{{ person.age }}</h2>
       <h2>性别：{{ person.sex }}</h2>
       <h2>工作种类：{{ person.job.type }}</h2>
       <h2>工作薪水：{{ person.job.salary }}</h2>
       <h2>爱好：{{ person.hobby }}</h2>
       <h2>测试的数据：{{ person.testData.a.c }}</h2>
     </div>
     <button @click="changeInfo">修改人的信息</button>
     <button @click="setCount">修改人的信息1</button>
   </template>
   ```

### reactive对比ref

-  从定义数据角度对比：
   -  ref用来定义：<strong style="color:#DD5145">基本类型数据</strong>。
   -  reactive用来定义：<strong style="color:#DD5145">对象（或数组）类型数据</strong>。
   -  备注：ref也可以用来定义<strong style="color:#DD5145">对象（或数组）类型数据</strong>, 它内部会自动通过```reactive```转为<strong style="color:#DD5145">代理对象</strong>。
-  从原理角度对比：
   -  ref通过``Object.defineProperty()``的```get```与```set```来实现响应式（数据劫持）。
   -  reactive通过使用<strong style="color:#DD5145">Proxy</strong>来实现响应式（数据劫持）, 并通过<strong style="color:#DD5145">Reflect</strong>操作<strong style="color:orange">源对象</strong>内部的数据。
-  从使用角度对比：
   -  ref定义的数据：操作数据<strong style="color:#DD5145">需要</strong>```.value```，读取数据时模板中直接读取<strong style="color:#DD5145">不需要</strong>```.value```。
   -  reactive定义的数据：操作数据与读取数据：<strong style="color:#DD5145">均不需要</strong>```.value```。

#### 总结

1. `ref`可以把简单数据或者复杂数据转换成响应式数据，注意使用加上 `.value`，不过模板可省略。

- 疑问：定义响应式数据使用 `ref` 还是 `reactive` 呢？

> 知道：在定义响应式数据的时候如何选择reactive和ref
>
> 开始分析：
>
> - `reactive` 可以转换对象成为响应式数据对象，但是不支持简单数据类型。
> - `ref` 可以转换简单数据类型为响应式数据对象，也支持复杂数据类型，但是操作的时候需要 `.value` 。
> - 它们各有特点，现在也没有最佳实践，没有明显的界限，所有大家可以自由选择。

**推荐用法：**

* 如果能确定数据是对象且字段名称也确定，可使用 `reactive` 转成响应式数据，其他一概使用 `ref` 。这样就没有 心智负担 。

```js
    // 1. 明确表单对象有两个字段
    const form = reactive({
      username: '',
      password: ''
    })

    // 2. 后台返回的数据对象
    const data = ref(null)
    const res = await axios.get('/user/100')
    data.value = res.data
```

在实际工作中推荐：遵循：确定字段的对象使用 `reactive` 其他都使用 `ref` 函数

## computed



## watch