VUE3:组合式API

一、什么是组合式 API？

将同一个逻辑关注点相关代码收集在一起。

---

二、组合式 API 基础

1.setup详解 ：

a.在 setup 中应该避免使用this，因为它不会找到组件实例。

b.setup 的调用

• 发生在data、computed、methods 被解析之前， 所以data/computed/methods
  的内容无法在setup中被获取。

c.接受参数props和context。

c>1.props

1. props 是响应式的，当组件传入新的 prop 时，它将被更新。
2. setup中的props 无法使用 ES6的解构模式。
3. 如下面代码中的 第6行。 如果要使用解构模式，可以使用 toRefs。如下面代码中的第7行。注意使用 toRefs 需要引用第1行。
4. 如下例子中，如果 title传值 不存在，也就是 props 中没有title 的情况下，toRefs 不会为title 创建一个ref。所以需要使用toRef 代替 toRefs。如第8行。

import { toRefs,toRef } from "vue";// 第1行
props:{
     title: String
},
setup(props,content){
  //第6行 let { title } = props  
  //第7行 let { title } = toRefs(props)
  let { title } = toRef(props,'title')//第8行
}

c>2. context

    a. context是一个普通 JavaScript 对象，暴露了其它可能在setup中有用的值attrs/slots/emit/expose

export default {
  // context 是非响应式的，所以可以使用解构赋值，比如1或2,推荐1的写法
  //1
  setup(props, { attrs, slots, emit, expose }) {}
  //2
  setup(props, context) {
    let { attrs, slots, emit, expose } = context
  }
  setup(props, context) {
    // Attribute (非响应式对象，等同于 $attrs)
    console.log(context.attrs)

    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots)

    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit)

    // 暴露公共 property (函数)
    console.log(context.expose)
  }
}

context.expose

如果return 返回了渲染函数 如：return () => h(‘div’) 就不能再返回其他 property。
* property 指元素对象的属性
如果需要将 property 暴露给外部访问，比如通过父组件的 ref，可以使用 expose：

import { h, ref } from 'vue'
export default {
  setup(props, { expose }) {
    const count = ref(0)
    const increment = () => ++count.value

    expose({
      increment
    })

    return () => h('div', count.value)
  }
}

---

2. 带 ref 的响应式变量

a. 定义： 通过 ref 定义的响应式变量，可以在任何地方都起效。

b. 用法和参数：ref(Array)/ref(Number)/ref(Boolean) …

c. 从 setup 返回的 refs 在模板中访问时是被自动浅解包的，因此不应在模板中使用xx.value。

<template>
      <p>数组:{{array}}</p>
      <p>数字:{{number}}</p>
      <p>布尔:{{boolean}}</p>
 </template>
<script>
import { ref } from 'vue'

setup (props) {
    const array = ref([])
    array.value = [1,2,3]
    const number = ref(0)
    number.value = 1
    const boolean = ref(true)
    boolean.value = false
    return {
      array,
      number,
      boolean
    }
}
</script>

---

3. 在 setup 内注册生命周期钩子

a.选项式 API 的生命周期选项和组合式 API 之间的映射

 1. beforeCreate -> 使用 setup() 
 2. created -> 使用 setup() 
 3. beforeMount -> onBeforeMount 
 4. mounted -> onMounted 
 5. beforeUpdate -> onBeforeUpdate    
 6. updated -> onUpdated 
 7. beforeDestrory -> onBeforeUnmount 
 8. destroyed -> onUnmounted 
 9. activated ->  onActivated 
10. deactivated ->  onDeactivated  

新增： 
 1. errorCaptured -> onErrorCaptured 
 2. renderTracked ->  onRenderTracked 
 3. renderTriggered ->    onRenderTriggered

:）.什么是选项式API? 什么是组合式API?

➢ 选项API：生命周期钩子是被暴露 Vue实例上的选项。不需要导入，只要调用这个方法并为这个生命周期钩子编写代码。
➢ 组合式API：将生命周期钩子导入到项目中，才能使用。有助于保持项目的轻量性

// 选项 API
<script>     
   export default {         
      mounted() {
        
      },         
      updated() {
        
      }     
   }
</script> 
// 组合 API
<script>
import { onMounted } from 'vue'
export default {
   setup () {
         onMounted(() => {
           console.log('mounted')
         })
   }
}
</script>

b. 声明周期图示

3. 选项式API 可以和 组合式API一起使用吗？（不建议一起使用）

---

4. Computed

a. 不可变的响应式ref，表示只接收一个getter

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // error

b. 可变的响应式ref,表示接收get 和 set

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0

---

5. watch 响应式更改

watch 响应式

• @params1:想要侦听的响应式引用或getter函数。
• @params2:回调
• @params3:可选的配置选项 { deep: true }