• Vue3组合式API

    目录

    composition API vs options API

    体验 composition API

    setup 函数

    reactive 函数

    ref 函数

    script setup 语法

    计算属性 computed 函数

    监听器 watch 函数

    生命周期

    模板中 ref 的使用

    组件通讯 - 父传子

    组件通讯 - 子传父

    依赖注入 - provide 和 inject

    保持响应式 - toRefs 函数

    ​​​​​​​composition API vs options API

    1. vue2 采用的就是 options API

      (1) 优点: 易于学习和使用, 每个代码有着明确的位置 (例如: 数据放 data 中, 方法放 methods 中)

      (2) 缺点: 完成相同功能的代码不能放在一起, 在大项目中尤为明显。可维护性不好

    2. vue3 新增的就是 composition API

      (1) compositionAPI 是基于 逻辑功能 组织代码的, 一个功能相关的代码可以放到一起

      (2) 即使项目大了, 功能多了，也能快速定位相关功能的代码，大大的提升了代码的可维护性

    3. vue3 推荐使用 composition API, 也保留了options API

      即就算不用 composition API, 用 vue2 的写法也完全兼容!!

    体验 composition API

    需求：

    1. 显示隐藏图片

    2. 计数器功能

     options API 版本

    1. <template>
    2.   <button @click="toggle">显示隐藏图片</button>
    3.   <img v-show="show" alt="Vue logo" src="./assets/vue.svg" />
    4.   <hr />
    5.   计数器：{{ count }} <button @click="add">+1</button>
    6. </template>
    7. <script>
    8. export default {
    9.   data() {
    10.     return {
    11.       show: true,
    12.       count: 0
    13.     }
    14.   },
    15.   methods: {
    16.     toggle() {
    17.       this.show = !this.show
    18.     },
    19.     add() {
    20.       this.count++
    21.     }
    22.   }
    23. }
    24. </script>

    composition API 版本

    1. <template>
    2.   <button @click="toggle">显示隐藏图片</button>
    3.   <img v-show="show" alt="Vue logo" src="./assets/vue.svg" />
    4.   <hr />
    5.   计数器：{{ count }} <button @click="add">+1</button>
    6. </template>
    7. <script>
    8. // ref 就是一个组合式API，用于数据响应式 
    9. import { ref } from 'vue';
    10. export default {
    11.   setup () {
    12.     // 显示隐藏图片
    13.     const show = ref(true)
    14.     const toggle = () => {
    15.       show.value = !show.value
    16.     }
    17.     
    18.     // 计数器
    19.     const count = ref(0)
    20.     const add = () => {
    21.       count.value++
    22.     }
    23.     return { show, toggle, count, add }
    24.   }
    25. }
    26. </script>

    小结：

    optionsAPI

    • 优点: 易于学习和使用, 每个代码有着明确的位置

    • 缺点: 完成相同功能的代码不能放在一起, 在大项目中尤为明显。可维护性不好

    compositionAPI

    • 基于 逻辑功能 组织代码

    • 可复用性和可维护性都更好!

    setup 函数

    composition api 的使用, 需要配置一个 setup 函数

    1. setup 函数是一个新的组件选项, 作为组件中 composition API 的起点

    2. setup 比 beforeCreate 执行时机还要早，此时 vue 的实例还没有创建，所以setup 中不能使用 this, this 指向 undefined

    3. 在模版中需要使用的数据和函数，需要在 setup 返回

    1. <template>
    2.   <h1 @click="sayHi">{{msg}}h1>
    3. template>
    4.  
    5. <script>
    6. export default {
    7.   setup () {
    8.     console.log('setup')
    9.     console.log(this)
    10.     
    11.     // 定义数据和函数
    12.     const msg = 'hi vue3'
    13.     const sayHi = () => {
    14.       console.log(msg)
    15.     }
    16.  
    17.     return { msg, say }
    18.   },
    19.   beforeCreate() {
    20.     console.log('beforeCreate')
    21.     console.log(this)
    22.   }
    23. }
    24. script>

    reactive 函数

    setup 中定义的数据，默认情况不是响应式的，需要用 reactive 函数，将数据变成响应式的

    作用：可以将一个复杂类型的数据，转换成响应式数据

    1. <template>
    2.   <div>{{ user.name }}</div>
    3.   <div>{{ user.age }}</div>
    4.   <button @click="changeAge">改年龄</button>
    5. </template>
    6.  
    7. <script>
    8. import { reactive } from 'vue'
    9.  
    10. export default {
    11.   setup () {
    12.     const user = reactive({
    13.       name: 'zs',
    14.       age: 18
    15.     })
    16.     
    17.     const changeAge = () => {
    18.       user.age++
    19.       console.log(user.age)
    20.     }
    21.  
    22.     return {
    23.       user,
    24.       changeAge
    25.     }
    26.   }
    27. }
    28. </script>

    ref 函数

    reactive 处理的数据，必须是复杂类型，如果是简单类型无法处理成响应式，所以有 ref 函数!

    作用：可以将一个简单类型或复杂类型的数据，转换成响应式数据。

    1. <template>
    2.   <div>{{ count }}</div>
    3.   <button @click="add">+1</button>
    4. </template>
    5.  
    6. <script>
    7. import { ref } from 'vue'
    8.  
    9. export default {
    10.   setup() {
    11.     const count = ref(0)
    12.     console.log(count)
    13. 		console.log(count.value)
    14.     
    15.     const add = () => {
    16.       count.value++
    17.     }
    18.     return {
    19.       count,
    20.       add
    21.     }
    22.   }
    23. }
    24. </script>

    ref 和 reactive 的最佳使用方式：

    • 明确的对象，明确的属性，用 reactive，其他用 ref

    • 从vue3.2之后，更推荐使用 ref（ref底层性能做了提升 => 260%）

    1. // 1. 明确的对象和属性
    2. const form = reactive({
    3.   username: '',
    4.   password: ''
    5. })
    6.  
    7. // 2. 不明确的对象和属性
    8. const list = ref([])
    9. const res = await axios.get('/list')
    10. list.value = res.data

    script setup 语法

    script setup 是在单文件组件 (SFC) 中，使用组合式 API 的编译时语法糖。相比于普通的 script 语法更加简洁

    要使用这个语法，需要将 setup attribute 添加到