VUE3组合式API

1.options api与composition api的区别

options api开发出来的应用每个选项都有自己的位置，响应式数据放在data里面，操作方法放在methods里面以及监听和计算属性也放在对应的watch和computed里面，但是面对功能庞大的项目维护起来很麻烦
composition api开发出来的应用可以将某一个功能的响应式数据，操作方法放在一起，两者是并存的关系

2.ref函数

作用：ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象

<template>
  <div>{{ money }}</div>
  <button @click="changeMondy">改值</button>
</template>
 
<script>
import { ref } from 'vue'
export default {
  setup() {
    let money = ref(100)
    console.log(money.value)
    return {
      money
    }
  }
}
</script>

使用步骤

从vue框架中导出ref函数
在setup函数中调用ref函数并传入数据（简单类型或者复杂类型）
在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
注意：在setup函数中使用ref结果，需要通过.value 访问，模板中使用不需要加.value

3.reactive函数

作用：reactive是一个函数，接收一个普通的对象传入，把对象数据转化为响应式对象并返回
 

<template>
  <div>{{ state.name }}</div>
  <div>{{ state.age }}</div>
  <button @click="state.name = 'pink'">改值</button>
</template>
 
<script>
import { reactive } from 'vue'
export default {
  setup () {
    const state = reactive({
      name: 'cp',
      age: 18
    })
    return {
      state
    }
  }
}
</script>

使用步骤

从vue框架中导入reactive函数
在setup函数中调用reactive函数并将对象数据传入
在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去
注意：以上二者都可以返回响应式对象，需要注意的是当对象内部的字段名都明确了才可以使用reactive，否则使用ref 
 

<template>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
  <button @click="name = 'pink'">改值</button>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: 'cp',
      age: 18
    })
    return {
      ...state
    }
  }
}
</script>

4.computed计算属性 

作用：对现有响应式数据做一定的计算处理得到新的数据

<template>
  <!-- 计算属性 -->
  <div>{{ageNum}}</div>
</template>
 
<script>
import { computed, ref } from 'vue'
export default {
  setup() {
    let objExample = reactive({
      name: "lily",
      age: 18,
      city: "山西",
      study: "前端",
    });
    let ageNum=computed(()=>objExample.age+5)
    
    return {
      ...toRefs(objExample),//使用toRefs不会破坏调用响应式特性，点击按钮依然可以改变值
      ageNum,
    }
  }
}
</script> 

5.ref的使用

实现步骤

1. 使用ref函数传入null创建 ref对象 => const hRef = ref(null)
2. 模板中通过定义ref属性等于1中创建的ref对象名称建立关联 => <h1 ref="hRef"></h1>
3. 使用 =>hRef.value

ref + 普通dom标签 获取真实dom对象

1. <template>
     <h1 ref="h1Ref">我是普通dom标签</h1>
   </template>
    
   <script>
   import { onMounted, ref } from 'vue'
   export default {
     setup() {
       const h1Ref = ref(null)
       onMounted(() => {
         console.log(h1Ref.value)
       })
       // 必须return
       return {
         h1Ref,
       }
     }
   }
   </script> 

   ref + 组件标签 获取组件实例对象

   <template>
     <ref-comoonent ref="comRef"></ref-comoonent>
   </template>
    
   <script>
   import { onMounted, ref } from 'vue'
   import RefComoonent from '@/components/RefComponent'
   export default {
     components: {
       RefComoonent
     },
     setup() {
       const comRef = ref(null)
       onMounted(() => {
         console.log(comRef.value)
       })
       // 必须return
       return {
         comRef
       }
     }
   }
   </script>