精读《Vue3.0 Function API》攻略

什么是Vue3.0 Function API

Vue3.0 Function API 是 Vue3.0 中新添加的一种 API 范式，它是建立在组合式 API 之上的，旨在提高我们在编写 Vue 应用时的代码风格及组件复用率等方面的优化。

如何使用Vue3.0 Function API

安装 Vue3.0

  // 安装 Vue3.0
  npm install vue@next

引入 Vue3.0

  // 引入 Vue3.0
  import { createApp } from 'vue'

使用 Vue3.0 Function API

Vue3.0 Function API 有以下几种使用方法：

1.使用setup配置函数

  // 自定义组件 Test.vue
  <template>
    <div>{{ state }}</div>
  </template>

  <script>
    import { reactive } from 'vue'
    export default {
      setup() {
        const state = reactive({
          msg: 'Hello, Vue3.0 Function API'
        })
        return { state }
      }
    }
  </script>

2.使用CompositionAPI

  // 自定义组件 Test.vue
  <template>
    <div>{{ state }}</div>
  </template>

  <script>
    import { reactive, toRefs } from 'vue'
    export default {
      setup() {
        const state = reactive({
          msg: 'Hello, Vue3.0 Function API'
        })
        return {
          ...toRefs(state)
        }
      }
    }
  </script>

Vue3.0 Function API的基本使用

1. ref

ref 其实就是 createRef 的加强版，用于传递数据，可以使用 .value 进行读写操作。

  import { ref } from 'vue'

  // 创建一个 ref
  const count = ref(0)

  // 读取 ref
  console.log(count.value) // 0

  // 修改 ref
  count.value++

  // 读取修改后的值
  console.log(count.value) // 1

2. computed

计算属性可以将一个响应式的依赖同步到 computed 中，可以在计算属性中封装一些具有简单逻辑的数据计算，返回值可以是任何 JavaScript 值。

  import { computed, reactive } from 'vue'

  const state = reactive({
    num1: 0,
    num2: 0
  })

  // 定义计算属性
  const total = computed(() => {
    return state.num1 + state.num2
  })

  // 读取计算属性
  console.log(total.value) // 0

  // 修改依赖
  state.num1 = 1

  // 读取修改后的值
  console.log(total.value) // 1

3. watchEffect

watchEffect 的作用与 watch 相似，监听响应式数据的变化并执行回调函数，但是 watchEffect 可以自动依赖响应式数据，并在依赖数据发生变化时重新执行一次回调函数。

  import { reactive, watchEffect } from 'vue'

  const state = reactive({
    num1: 0,
    num2: 0
  })

  // 监听响应式数据
  watchEffect(() => {
    console.log(state.num1 + state.num2)
  })

  // 修改依赖
  state.num1 = 1