Composition-API

简介

Composition API概述：提供了一种基于功能形式的扩展API集合，在此基础之上实现了模块化组合组件逻辑的功能。该技术旨在通过提供当前组件属性和可用机制以JavaScript函数的形式暴露出来的方式解决现有问题。在Vue核心团队看来，这种架构可被定义为"一套附加于JavaScript框架的技术方案"——它允许开发者以更加模块化的方式组织其应用架构。采用这种架构设计出的应用程序通常具有较高的可读性和可维护性

Options API和Composition-API的区别

Options API

在Vue 2版本中, 我们会在一个程序文件中设置一系列属性与方法, 其中包含methods、computed、watch与data等字段, 共同完成页面行为. 这种实现方式被我们称为Options API.

优缺点

• 通常会将一个功能分布在不同的Vue配置项中去定义属性和method。对于小型项目而言，这可能还不会造成太大困扰；但随着项目的规模扩大，在一个method中可能会包含多个相关的方法逻辑（或函数），导致难以分辨每个method对应的功能。
• 条理清晰的情况下,相同的功能或逻辑内容应放置在同一位置；然而,当组件的功能规模逐渐扩大时,各模块之间的关联性将显著下降,导致整个组件的整体理解和使用体验将显著下降。

Composition-API

为了应对Vue 2版本中出现的问题，在Vue 3 Composition API框架下，
我们的代码按照功能性模块进行整合，
一个功能性模块下的所有API会被集中在一起（更高程度上的内聚），
即使项目规模庞大且包含众多功能性模块，
也能迅速定位到该功能性模块所需的所有API

知识库系统通过采用统一的知识表示方法和推理机制,实现了不同领域知识之间的智能关联
这一设计消除了由于知识库系统采用分立知识存储架构所带来的诸多局限性
通过建立统一的知识模型,实现了跨领域知识的有效整合与共享

API介绍

Setup函数

在VUE 3官方文档中，默认组件使用场景介绍

在VUE 3官方文档中，默认组件使用场景介绍

参数

使用setup 函数时，它将接受两个参数：props,context

props：父组件传递给子组件的数据，在之前的Vue 2相关文章中提到过；如对相关内容感兴趣的朋友可以通过阅读我的早期文章来深入了解。

context包含三个属性：attrs、slots和emit。

（1）attrs：所有的非prop的attribute；

（2）slots：父组件传递过来的插槽

（3）emit：当我们组件内部需要发出事件时会用到emit

    props: {
    message: {
        type: String,
        required: true
        default:'长夜将至'
    }
    },
    setup(props，context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)
    // 插槽 (非响应式对象)
    console.log(context.slots)
    // 触发事件 (方法)
    console.log(context.emit)
     //因为setup函数中是没有this这个东西的, 然而当我们需要拿到父组件所传递过来的数据时, setup函数的第一个参数props便起作用了
    console.log(this)// undefined
    console.log(props.message);//长夜将至
    return {} // 我们可以通过setup的返回值来替代data选项(但是当setup和data选项同时存在时，使用的是setup中的数据)，并且这里返回的任何内容都可以用于组件的其余部分
    },

注意:

• 设置逻辑位于注册钩子beforeCreate和Created之前执行。
• 当调用setup时，默认情况下组件还未启动。
• 因此，在设置函数内部初始化的时候，默认情况下this会被赋值为undefined以防止误用。

ref

Ref 可用于对数据添加响应式状态。由于Reactive仅接受对象类型作为输入参数，在处理基本数据类型时，则必须依赖于Ref的帮助以实现相应的功能。同样会返回一个带有响应式状态的副本。

    <template>
    <h1>{{newObj}}</h1>
    <button @click="change">点击按钮</button>
     </template>
     
     <script>
    import {ref} from 'vue';
    export default {
      name:'App',
      setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= ref(obj.name);
    function change(){
      newObj.value = 'Tom';
      console.log(obj,newObj)
    }
    return {newObj,change}
      }
    }

注意:

• ref函数仅能监控基本数据类型的更改，并无法处理复杂类型如对象和数组。
• ref的核心功能是创建一个独立副本，并不涉及原始数据的引用。
• ref调整响应式数据时不会干扰原始内容，并实时更新显示界面。

toRef

该函数通过对其源响应式对象的属性字段进行引用操作，以实现对源对象相应字段的动态引用。

    <template>
    <h1>{{newObj}}</h1>
    <button @click="change">点击按钮</button>
     </template>
     
     <script>
    
    import {toRef} from 'vue';
    export default {
      name:'App',
      setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= toRef(obj, 'name');
    function change(){
      newObj.value = 'Tom';
      console.log(obj,newObj)
    }
    return {newObj,change}
      }
    }

注意:

• 在取值操作中需使用value属性。
• toRef后的ref引用并非基于原始数据复制而来；修改结果引用的数据也会同步影响原始数据。
• 该方法有两个必要的输入参数：一是待操作的对象实例；二是选择的操作属性。
• 每次操作只能指定单一的目标字段。

toRefs

有时候，在某些情况下我们需要将对象中的多个字段都转换为响应式格式，并要求这些响应式字段与原始字段保持关联关系。同时，在更新这些响应式字段时无需同步更新界面。这可以通过使用toRefs来实现。我们还可以利用它来进行批量操作以快速设置多组相关联的数据为响应式格式。

    <template>
    <h1>{{newObj}}</h1>
    <button @click="change">点击按钮</button>
     </template>
     
     <script>
    
    import {toRefs} from 'vue';
    export default {
      name:'App',
      setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= toRefs(obj);
    function change(){
      newObj.name.value = 'Tom';
      newObj.age.value = 18;
      console.log(obj,newObj)
    }
    return {newObj,change}
      }
    }

通过查看上图可知，在按钮被点击后，原始数据与响应式数据发生更新而界面保持不变。

注意:

toRefs函数接受一个对象作为参数，并逐一查看该对象所具有的所有属性名称后调用toRef函数进行处理。
在取值时需要附加".value"属性。
toRefs处理完成后得到的ref数据并非原始数据的独立副本，在这种情况下修改结果数据的内容也会同步影响到原始数据的内容。

带 ref 的响应式变量

当调用setup函数处理响应式数据时，
可以通过属性.value来获取这些数据。
从设置对象返回的属性上获得的数据，在模板中被引用时，
这些值会被直接解析为内部对象属性。
不需要在模板中添加额外的.value前缀操作符。

    <template>
    <h1>{{count}}</h1>
     </template>
     
     <script>
      import { ref } from 'vue' // ref函数使任何变量在任何地方起作用
      export default {
    setup(){
      const count= ref(0)
      console.log(count)
      console.log(count.value) // 0
      return {count } 
    }
      }
     </script>

借鉴链接

苦荷夏目 Vue3.0 笔记系列的第4篇：深入解析 Composition-API 与 Options-API 的区别

该文章对比分析了Vue 2框架中的Options API与Vue 3框架中的Composition API两者的功能特点及适用场景差异。具体而言，在组件生命周期管理方面, Options API通过设置context来实现组件间的通信与数据共享, 这种方式具有较高的灵活性与可扩展性, 并且能够有效避免直接引用元素导致的问题, 在开发复杂项目时展现出显著的优势；而Composition API则基于组件树模型构建, 能够实现组件间的深度绑定与依赖管理, 这种模式更加直观地反映了组件之间的层次化关系, 并为后续的状态管理与行为继承提供了便捷的支持；从使用体验层面来看, Options API的操作更为简洁直观, 学习成本较低；而Composition API则由于其复杂性较高的上下文管理机制而相对晦涩难懂；总体而言, 如果开发者更倾向于追求简单易用性和快速上手的效果，则更适合选择Options API；而对于那些需要深入理解组件间复杂依赖关系并追求高度可维护性的场景，则更适合采用Composition API作为首选方案。

调皮小妮 Options API 和 Composition API 的对比

珍惜时光不负年华 ③Vue3 Composition API（setup函數）

wxing164 Vue3 toRef函数和toRefs函数

醉逍遥neo ref、reactive、toRef、toRefs的区别

总结

如本文有侵权之处,请联系鄙人删除，万分抱歉