近日，Vue正式公布了最重要的RFC:Vue 3.0的基于函数的组件API，并发布了与Vue 2.0兼容的插件：Vue-function-API，可以提前体验Vue 3.0的基于函数的组件API。为了学习，作者在项目中提前尝试了vue-function-api。

作者计划写两篇文章，这是作者计划的第一篇，主要是针对作者在体验Vue Function API方面的学习经验。第二部分计划编写和阅读vue-function-api的核心代码原则，包括设置、可观察和生命周期。

本文阅读时间约15~20分钟。

总结

Vue 2.x及其之前的高层组件的组织形式会在一定程度上面临一些问题，尤其是在需要处理重复逻辑的项目中。一旦开发人员没有很好地组织项目，组件代码很可能会被批评为“胶水代码”。在Vue 2.x和以前的版本中，解决这类问题的方案大致如下：

Mixin功能组件槽作者维护的项目还需要处理大量的重用逻辑。在此之前，作者一直在尝试使用mixin来实现组件的重用。有些问题一直困扰着开发者和维护者。例如，一个组件同时混合多个组件，因此很难区分相应的属性或方法是用哪个mixin编写的。其次，mixin的名称空间冲突也会导致问题。很难保证不同的mixin不使用相同的属性名。为此，官方团队提出了一份关于功能写作的征求意见稿，就是RFC:基于功能的组件API。使用函数式编写，您可以更灵活地重用组件。当开发人员组织高阶组件时，他们不需要考虑组件组织中的重用，这样他们可以更好地专注于功能本身的开发。

注：本文作者只是使用vue-function-api来提前体验Vue Function api，这个API只是Vue 3.0的RFC，与最终的Vue 3.x API并不一致。发布后可能会有不一致的地方。

用于Vue 2.x

要提前体验Vue 2.x中的Vue Function API，需要引入vue-function-api，基本介绍如下：

从“Vue”导入Vue；从“vue-function-api”导入{ plugin as vuefficationapiling }；vue . use(vueffunctionapilublicin)；基本组件示例

让我们从一个基本的例子开始：

模板div spancount为{{ count }}/span spanplusOne为{ { plusOne } }/span button @ click=' increment ' count/button/div/templatescriptionimport Vue from ' Vue '；从“vue-function-api”导入{ value，computed，watch，OnMounted }；导出默认值{ setup(props，context){//reactive state const count=value(0)；//计算状态const PluSone=computed(()=count . value 1)；//方法常量增量=()={ count . value；};//watch watch(()=count.value * 2，val={ console.log(`count * 2为$ { val } `))；} );//life cycle OnMounted(()={ console . log(` mounted `))；});//在呈现上下文上公开绑定返回{ count，plusOne，increment，}；},};/script详细说明

设置

设置函数是Vue Function API构建的函数式编写的主要逻辑。当一个组件被创建时，它将被调用。该函数接受两个参数，它们是父组件和当前组件的上下文传入的道具。查看下面的示例，我们可以知道可以在上下文中获得以下属性值：

const MyComponent={ prop : { name : String }，setup(props，context){ console . log(props . name)；//context . attrs//context . slots//context . refs//context . emit//context . parent//context . root } }值状态

value函数创建包含响应属性值的包装对象：

那为什么要用value呢，因为在JavaScript中，没有对基本类型的引用，而且为了保证属性的响应性，只能借助包装器对象来实现。这样做的好处是组件的状态会被引用保存，这样在设置中调用的不同模块的功能可以以参数的形式传递，既重用了逻辑，又方便实现响应。

你必须使用。值直接获取包装对象的值。但是，如果包装对象是另一个响应对象的属性，包装对象将由Vue内部的代理自动展开。同时会在模板渲染的上下文中自动展开。

从“vue-function-api”导入{ state，value }；const MyComponent={ setup(){ const count=value(0)；const obj=state({ count，})；Console.log(obj.count) //，作为另一个响应对象的属性，会自动展开obj.count //作为另一个响应对象的属性，会自动展开count.value //，直接获取响应对象。必须使用valuereturn {count，}。}，template : ` button @ click=' count“{ count } }/button `，}；如果某个状态不需要在不同的函数中进行响应性修改，可以通过state创建一个响应对象，它不是包装对象，不需要使用。值来获取它的值。

手表计算

watch和computed的基本概念与Vue 2.x的相同，watch可用于跟踪状态变化以执行一些后续操作，computed用于计算属性并根据属性变化进行重新计算。

Computed返回一个只读包装对象，它可以像普通包装对象一样由setup函数返回，因此computed属性可以在模板上下文中使用。可以接受两个参数，第一个参数返回当前计算的属性值，当第二个参数被传递时，计算的属性值是可写的。

从“vue-function-api”导入{ value，computed }；const count=值(0)；const count plusone=computed(()=count . value 1)；console . log(countplussone . value)；//1 count . value；console . log(countplussone . value)；//2//可写计算属性值const可写计算的=计算的(///read()=count . value 1，//write val={ count . value=val-1；},);watch的第一个参数类似于computed，它返回被监控的包装对象属性值，但是还需要传递另外两个参数：第二个参数是回调函数，当数据源发生变化时触发，第三个参数是options。它的默认行为不同于Vue 2.x:

Lazy:组件创建时是否会调用一次回调函数。与Vue 2.x相反，lazy在默认情况下为false，并且在默认情况下创建组件时将被调用一次。Deep:与Vue 2.x flush的deep一致：有三个可选值，分别是“post”(渲染后调用回调函数，即nextTick)、“pre”(渲染前调用回调函数，即nextTick)和“sync”(同步触发)。默认值为“发布”。//double是计算包装对象const double=computed (()=count。值* 2)；watch(double，值={ console . log(' double count is : '，值)；});//-双倍计数是is: 0count.value//-双倍计数是： 2当观察多个包装的对象属性时，参数可以通过数组传递。同时，像VM一样。$ watch of Vue 2.x，watch返回取消收听的功能：

const stop=watch([valueA，()=valueB.value]，([a，b]，[普雷瓦，普雷沃])={ console . log(` a is : $ { a } `)；console . log(` b is : $ { b } `)；});stop()；注：《RFC:基于函数的组件API》初稿中有提到效果清理，用于清理一些特殊情况的副作用，目前提案中已取消。

生存期

所有现有的生命周期都有相应的钩子函数，这些钩子函数是以onXXX的形式创建的。但是，一个不同之处是，被破坏的挂钩功能需要由未安装的功能代替：

从“vue-function-api”导入{ onMounted，onUpdated，onUnmounted }；const MyComponent={ setup(){ OnMounted(()={ console . log('已挂载'！));});onUpdated(()={ console.log('已更新！');});//在unmounded()={ console . log(' unmounded ')上将销毁的调整为未安装);});},};一些想法

上面的详细讲解主要提取了Vue Function API的共性部分，而不是整个RFC:比如基于函数的组件API，它的优势如依赖注入、TypeScript类型派生等。这里因为篇幅有限，如果想认识更多的朋友，可以点击RFC:基于函数的组件API查看。个人；我在基于函数的组件API讨论论坛上也看到了一些更多的观点。

由于底层的设计，在设置中无法获得这个的组件实例，这也是我尝试体验的时候遇到的。希望官方发布的Vue 3.x能够改善这个问题。对于基本类型的值，必须使用包装器对象：在RFC论坛中，为了保证TypeScript类型派生和可重用性，保留Vue的数据监控，包装器属性必须使用。value to take value，这是关于包装对象value和state方法命名不明确的最热烈的讨论，可能会导致开发人员的误解。已经讨论了对基于函数的组件API的修改建议：setup(){ const state=reactive({ count : 0，})；const double=computed(()=state . count * 2)；函数increment(){ state . count；}返回{.toBindings(state)，//保留对突变的反应性，使“state”加倍，递增，}；}介绍反应式API和绑定API，其中反应式API类似于状态API，绑定API类似于值API。之前使用的方法名状态可能在Vue 2.x中被用作组件状态对象，导致变量名称空间冲突。该团队认为将状态API重命名为reactive更优雅。开发人员编写const state=.然后通过state.xxxx获取组件状态当使用value方法封装一个基本类型时，它看起来并不优雅。值，而开发人员可能会忘记使用。直接从打包对象中获取值时的值。修改方案中提出的reactive API是指创建一个响应对象，并初始化状态状态，使用reactive来创建，可以保留每个属性的getter和setter。这样既能满足类型派生，又能保持响应引用，使得状态值的引用可以在不同模块间共享。但是，反应性可能会导致以下问题，这需要引入绑定API。为了解决这个问题，例如，当扩展运算符.用于由reactive创建的响应对象时，对象的getter和setter将丢失，并且将提供toBindings方法可以保留状态的响应表达式。在下一篇文章中，作者将阅读vue-function-api的核心代码原则，包括设置、可观察、生命周期等。并从内部探索Vue Function API带来的可能变化。

当然，Vue函数API还处于讨论阶段，Vue 3.0还处于开发阶段。我们还是期待下半年的Vue 3.0第一版，希望能给我们带来更多的惊喜。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。