Vue3基础之组合Api

1. 简述

Composition API：组合式 API；一组低侵入式的、函数式的 API，使得我们能够更灵活地【组合】组件的逻辑。
Composition API提供了一个setup函数，我们可以将data数据、计算属性、方法等等，都放在setup函数中，这样就可以对业务进行集中处理了。

2. 常用组合api

2.1. setup

• setup函数是Composition API 的入口点，是它的核心。
• 由于执行 setup 时，组件实例尚未被创建，因此在 setup 中不能使用 this。
• setup中定义的东西必须要return出去，才能被使用或绑定视图。

使用方式1
vue版本3.2以后可以在<script>标签中，没有export default

• setup如何使用组件name属性下面使用方式2是其中一种 还有一种是引入defineComponent设置，需要写两个script标签。其他写法是配合ts使用。

<template>
  <div>
    组合api{{title}}
  </div>
</template>
<script>
    import { defineComponent } from 'vue'
    export default defineComponent({  
        name:'demoVue'
 })
</script>
<script setup>
 import {ref} from 'vue'
 const title = ref('这是组合api例子');

</script>

<style>

</style>

使用方式2
使用setup函数

<template>
  <div>
    组合api{{title}}
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
    name:'demoVue',
    setup(){
       const title = ref('这是组合api例子')
       return{
        title
       }
    }
}
</script>

<style>

</style>

2.1. ref函数

推荐定义基本类型，ref声明的类型，通过value获取值
方法：引入 ref 函数，const xxx = ref(initValue) 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

• const msg_ = ref() msg_ 是underfind

<script setup >
import {ref} from 'vue'
 const msg = ref("初始化")
 const msg_ = ref()
 msg.value = '初始化后赋值'
 console.log('msg--------',msg.value,msg_.value)
 // 声明对象、数组、map
const json = ref({})
const array = ref([])
const map = ref(new Map())
</script>

toRefs 是对数据的解构

• import {name} = recitive({name:'zhangsan'})name不可以直接赋值，需要赋值则 let name = toRefs(name) 则name.value = zhangz 即可还是数据绑定

<script setup >
   const obj = reactive({
    name:'張三',
    age:18
   })
   const {name,age} = toRefs(obj)
   const btn = ()=>{ 
    name.value= '李四'
   }
</script>

2.2.reactive 函数

对象类型的响应式数据（基本类型不要用它，要用ref函数） 方法：const x= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy 的实例对象，简称 proxy 对象） 特点：可以实现数组、深层对象的响应式数据，这是 vue2.0 中无法实现的，底层基于 Proxy

• 注意若声明数组 const arr = reactive([1,2,3]) arr = [] 会断了响应，应arr.length = 0

<script setup >
import {reactive} from 'vue' 
 const obj1 = reactive({
    name:'zyj',
    age:18
 }) 
 obj1.age = 19
 obj1.sex = '男'
console.log('--obj1---',obj1.name);
</script>

2.3.computed函数

计算属性函数，与Vue2.x中computed配置功能一致

<script setup >
import {reactive,computed} from 'vue' 
 const obj1 = reactive({
    name:'zyj',
    age:18
 }) 
 obj1.age = 19
 obj1.sex = '男'
 const age = computed(()=>{
    return obj1.age + 1
 })
console.log('--obj1---',obj1.name);
</script>

2.4.watch函数

• immediate：如果要加载时执行一次，需要加第三个配置对象，immediate:true
• deep：如果监视的对象属性也是一个对象，需要手动开启
• watchEffect：不需要明确的去监视谁，谁在回调函数里面用到了，就监视谁。注意：该回调函数一开始会执行一次

import {watch} from 'vue' 

2.4.1.watch函数 监听单个ref

• 一秒后修改值，输入watch监听日志

日志 ---watch--- 222 111

<script setup >
import {ref,watch} from 'vue'  

const age = ref(111)

watch(age,(newValue,oldValue)=>{
     console.log('---watch---',newValue,oldValue);
})

let timer = setTimeout(()=>{
      age.value = 222  
},1000)
</script>

2.4.2.watch函数 监听多个ref

• 一秒后修改值，输入watch监听日志

日志 ---watch--- [1111, 3333] ， [111, 333]
按数组返回对应监听值的多个ref数组，一个新值，一个旧值。

<script setup >
import {ref,watch} from 'vue'  

const age = ref(111)
const count = ref(333)

watch([age,count],(newValue,oldValue)=>{
     console.log('---watch---',newValue,oldValue);
})

let timer = setTimeout(()=>{
      age.value = 1111
      count.value = 3333
},1000)
</script>

2.4.3.watch函数 监听单个对象

• 一秒后修改值，输入watch监听日志

日志 ---watch--- Proxy(Object) {name: 'zyj', age: 1}， Proxy(Object) {name: 'zyj', age: 1}

<script setup >
import {reactive,watch} from 'vue' 

 const obj1 = reactive({
    name:'zyj',
    age:18
 })   

watch(obj1,(newValue,oldValue)=>{
     console.log('---watch---',newValue,oldValue);
})

setTimeout(()=>{
      obj1.age = 1 },1000)
  
</script>

2.4.4.watch函数 监听多个对象

• 一秒后修改值，输入watch监听日志

日志---watch--- (2) [Proxy(Object), Proxy(Object)]， (2) [Proxy(Object), Proxy(Object)]
一个新值一个旧值

<script setup >
import {reactive,watch} from 'vue' 

 const obj1 = reactive({
    name:'zyj',
    age:18
 })  
  const obj2 = reactive({
    name:'zyj--',
    age:180
 })  

watch([obj1,obj2],(newValue,oldValue)=>{
     console.log('---watch---',newValue,oldValue);
})

setTimeout(()=>{
      obj1.age = 1
      obj2.age = 2
},1000)
  
</script>

2.4.5.watch函数 监听对象和ref值

• 一秒后修改值，输入watch监听日志

日志---watch--- (2) [Proxy(Object), 2] (2) [Proxy(Object), 222]
一个新值一个旧值

<script setup >
import {ref,reactive,watch} from 'vue' 

 const obj1 = reactive({
    name:'zyj',
    age:18
 })  
 const count= ref(222)

watch([obj1,count],(newValue,oldValue)=>{
     console.log('---watch---',newValue,oldValue);
})

setTimeout(()=>{
      obj1.age = 1
      count.value = 2
},1000)
  
</script>

2.4.6.watch函数 监听对象属性

使用箭头函数,否则监听不到。如数据是对象需要开启深度监听

• 一秒后修改值，输入watch监听日志

日志---watch--- (3) [1, 2, Proxy(Object)] ，(3) [18, 22222, Proxy(Object)]

下面例子监听obj1.age属性，ref的count，obj1.moudle属性

import {reactive,ref,watch} from 'vue' 

 const obj1 = reactive({
    name:'zyj',
    age:18,
    module:{
        name:'hhhhhh'
    }
 })  
 const count = ref(22222)

watch([()=>obj1.age,count,()=>obj1.module],(newValue,oldValue)=>{
     console.log('---watch---',newValue,oldValue);
},{immediate:true,deep:true})

setTimeout(()=>{
      obj1.age = 1
      count.value = 2
      obj1.module.name = 'qqqqqqq'
},1000)
  
</script>