六安做网站/制作网站/搭建网站/设计网站/开发网站-网站服务一站式

六安做网站/制作网站/搭建网站/设计网站/开发网站-网站服务一站式

Vue3 组合式 API（Composition API） 主要用于在大型组件中提高代码逻辑的可复用性。

传统的组件随着业务复杂度越来越高，代码量会不断的加大，整个代码逻辑都不易阅读和理解。

Vue3 使用组合式 API 的地方为 setup。

在 setup 中，我们可以按逻辑关注点对部分代码进行分组，然后提取逻辑片段并与其他组件共享代码。因此，组合式 API（Composition API） 允许我们编写更有条理的代码。

 对比以下两端代码：

1、传统组件

2、组合式 API

setup 组件

setup() 函数在组件创建 created() 之前执行。

setup() 函数接收两个参数 props 和 context。

第一个参数 props，它是响应式的，当传入新的 prop 时，它将被更新。

第二个参数 context 是一个普通的 JavaScript 对象，它是一个上下文对象，暴露了其它可能在 setup 中有用的值。

注意：在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

以下实例使用组合 API 定义一个计数器：

实例（src/APP.vue）

<template>

    <div>

        <p>计数器实例: {{ count }}</p>

        <input @click="myFn" type="button" value="点我加 1">

    </div>

</template>

<script>

import {ref, onMounted} from 'vue';

export default {

    setup(){

        //定义初始值为0的变量，要使用ref方法赋值，直接赋值的话变量改变不会更新 UI

        let count = ref(0);

        // 定义点击事件 myFn

        function myFn(){

            console.log(count);

            count.value += 1;

        }

       // 组件被挂载时，我们用 onMounted 钩子记录一些消息

        onMounted(() => console.log('component mounted!'));

        // 外部使用组合API中定义的变量或方法，在模板中可用。

        return {count,myFn} // 返回的函数与方法的行为相同

    }

}

</script>

在 Vue 3.0 中，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用，如下所示：

import { ref } from 'vue'

let count = ref(0);

ref() 函数可以根据给定的值来创建一个响应式的数据对象，返回值是一个对象，且只包含一个 .value 属性。

在 setup() 函数内，由 ref() 创建的响应式数据返回的是对象，所以需要用 .value 来访问。

实例

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }

console.log(counter.value) // 0

counter.value++

console.log(counter.value) // 1

Vue 组合式 API 生命周期钩子

在 Vue2 中，们通过以下方式实现生命周期钩子函数：

实例

export default {

  beforeMount() {

    console.log('V2 beforeMount!')

  },

  mounted() {

    console.log('V2 mounted!')

  }

};

在 Vue3 组合 API 中实现生命周期钩子函数可以在 setup() 函数中使用带有 on 前缀的函数：

实例

import { onBeforeMount, onMounted } from 'vue';

export default {

  setup() {

    onBeforeMount(() => {

      console.log('V3 beforeMount!');

    })

    onMounted(() => {

      console.log('V3 mounted!');

    })

  }

};

下表为 Options API 和 Composition API 之间的映射，包含如何在 setup () 内部调用生命周期钩子：

Vue2 Options-based API Vue Composition API

beforeCreate setup()

created setup()

beforeMount onBeforeMount

mounted onMounted

beforeUpdate onBeforeUpdate

updated onUpdated

beforeDestroy onBeforeUnmount

destroyed onUnmounted

errorCaptured onErrorCaptured

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

这些函数接受一个回调函数，当钩子被组件调用时将会被执行:

实例

setup() {

...

    // 组件被挂载时，我们用 onMounted 钩子记录一些消息

    onMounted(() => console.log('component mounted!'));

...

}

六安做网站/制作网站/搭建网站/设计网站/开发网站-网站服务一站式