【Vue2+3入门到实战】（22）VUE3之组合式API - setup、reactive和ref函数、computed、watch、生命周期函数详细讲解

一、组合式API - setup选项

1. setup选项的写法和执行时机

写法

<script>
  export default {
    setup(){
      
    },
    beforeCreate(){
      
    }
  }
</script>

执行时机

在beforeCreate钩子之前执行

2. setup中写代码的特点

在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用

<script>
  export default {
    setup(){
      const message = 'this is message'
      const logMessage = ()=>{
        console.log(message)
      }
      // 必须return才可以
      return {
        message,
        logMessage
      }
    }
  }
</script>

3.

script标签添加 setup标记，不需要再写导出语句，默认会添加导出语句

<script setup>
  const message = 'this is message'
  const logMessage = ()=>{
    console.log(message)
  }
</script>

二、组合式API - reactive和ref函数

1. reactive

接受对象类型数据的参数传入并返回一个响应式的对象

<script setup>
 // 导入
 import { reactive } from 'vue'
 // 执行函数 传入参数 变量接收
 const state = reactive({
   msg:'this is msg'
 })
 const setSate = ()=>{
   // 修改数据更新视图
   state.msg = 'this is new msg'
 }
</script>

<template>
  {
   
   { state.msg }}
  <button @click="setState">change msg</button>
</template>

2. ref

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

<script setup>
 // 导入
 import { ref } from 'vue'
 // 执行函数 传入参数 变量接收
 const count = ref(0)
 const setCount = ()=>{
   // 修改数据更新视图必须加上.value
   count.value++
 }
</script>

<template>
  <button @click="setCount">{
   
   {count}}</button>
</template>

3. reactive 对比 ref

1. 都是用来生成响应式数据
2. 不同点
   1. reactive不能处理简单类型的数据
   2. ref参数类型支持更好，但是必须通过.value做访问修改
   3. ref函数内部的实现依赖于reactive函数
3. 在实际工作中的推荐
   1. 推荐使用ref函数，减少记忆负担，小兔鲜项目都使用ref

三、组合式API - computed

计算属性基本思想和Vue2保持一致，组合式API下的计算属性只是修改了API写法

<script setup>
// 导入
import {ref, computed } from 'vue'
// 原始数据
const count = ref(0)
// 计算属性
const doubleCount = computed(()=>count.value * 2)

// 原始数据
const list = ref([1,2,3,4,5,6,7,8])
// 计算属性list
const filterList = computed(item=>item > 2)
</script>

四、组合式API - watch

侦听一个或者多个数据的变化，数据变化时执行回调函数，俩个额外参数 immediate控制立刻执行，deep开启深度侦听

1. 侦听单个数据

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
  })
</script>

2. 侦听多个数据

侦听多个数据，第一个参数可以改写成数组的写法

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('cp')
  // 2. 调用watch 侦听变化
  watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
    console.log(`count或者name变化了，[newCount, newName],[oldCount,oldName])
  })
</script>

3. immediate

在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
  },{
    immediate: true
  })
</script>

4. deep

通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state
  watch(state, ()=>{
    console.log('数据变化了')
  })
  const changeStateByCount = ()=>{
    // 直接修改不会引发回调执行
    state.value.count++
  }
</script>

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state 并开启deep
  watch(state, ()=>{
    console.log('数据变化了')
  },{deep:true})
  const changeStateByCount = ()=>{
    // 此时修改可以触发回调
    state.value.count++
  }
</script>

五、组合式API - 生命周期函数

1. 选项式对比组合式

2. 生命周期函数基本使用

1. 导入生命周期函数
2. 执行生命周期函数，传入回调

<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
  // 自定义逻辑
})
</script>

3. 执行多次

生命周期函数执行多次的时候，会按照顺序依次执行

<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
  // 自定义逻辑
})

onMounted(()=>{
  // 自定义逻辑
})
</script>

六、总结

组合式API是Vue3中的新特性，它允许我们以更灵活和可组合的方式编写组件逻辑。

1. setup函数：setup函数是组合式API的入口，它在组件实例创建之前调用。我们可以在setup函数中执行一些初始化逻辑，并返回一个对象，这个对象将会成为组件实例的属性。setup函数接收两个参数：props和context，props是组件的属性，context提供了一些常用的API，例如emit用于派发事件。

2. reactive和ref函数：reactive函数接收一个普通对象，并返回一个响应式代理对象。ref函数接收一个普通值，并返回一个响应式引用对象。我们可以使用reactive和ref函数来创建响应式数据。响应式数据可以在模板中使用，并能够自动追踪其依赖。

3. computed函数：computed函数接收一个getter函数，并返回一个计算属性。计算属性是一个响应式对象，它会自动追踪其依赖，并在依赖发生变化时重新计算。我们可以使用computed函数来处理一些复杂的数据逻辑，例如对多个响应式数据进行运算得到一个新的值。

4. watch函数：watch函数用于监听一个响应式数据的变化，并在数据变化时执行一些副作用。watch函数接收两个参数：要监听的响应式数据和回调函数。我们可以使用watch函数来处理一些异步操作，例如发送网络请求或保存数据。

5. 生命周期函数：Vue3中的生命周期函数经过了一些改变。setup函数中可以使用onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted等函数来代替Vue2中的生命周期钩子函数。这些函数分别在组件挂载前、挂载后、更新前、更新后、卸载前和卸载后调用。我们可以在这些函数中执行一些与组件生命周期相关的操作，例如请求数据、添加事件监听器等。

综上所述，Vue3的组合式API提供了更灵活和可组合的方式来编写组件逻辑，使我们能够更好地组织和重用代码。它使用了一些新的函数和概念，例如setup函数、reactive和ref函数、computed函数、watch函数以及新的生命周期函数。通过学习和掌握这些API，我们可以更高效地开发Vue3应用。