Vue 中的受控与非受控组件的实现

受控组件

什么是受控组件？

其值由React控制的输入表单元素称为“受控组件”。

受控组件有两个特点：1. 设置value值，value由state控制，2. value值一般在onChange事件中通过setState进行修改

什么时候使用受控组件？

需要对组件的value值进行修改时，使用受控组件。比如：页面中有一个按钮，每点击一次按钮受控组件的值加1.

非受控组件

什么是非受控组件？

表单数据由 DOM 处理的组件非受控组件。

非受控组件有两个特点：1. 不设置value值，2. 通过ref获取dom节点然后再取value值

<input type="text" placeholder="请输入姓名" name='username' ref={(input) => this.usernameElem = input}/>

取值方法：this.usernameElem.value

什么时候使用非受控组件？

任何时候都不需要改变组件的value值，这时候可以使用非受控组件。

Vue 中的受控与非受控组件

熟悉 React 的开发者应该对“受控组件”的概念并不陌生，实际上对于任何组件化开发框架而言，都可以实现所谓的受控与非受控，Vue 当然也不例外。并且理解受控与非受控对应的需求场景，可以让我们在设计一些基础组件时思路更加清晰，暴露出来的组件 API 也更加合理、统一。

需求

许多 UI 组件都是有状态（stateful）的，而这个状态是由组件外部控制还是组件内部维护，也就对应了受控与非受控两种模式。

例如 Tabs 组件是很常见的一种 UI 组件，它的核心状态就是记录当前 active 的 Tab，并且允许用户切换。

很多时候我们只希望 Tabs 可以正确的展示 active 的内容、并在用户操作时正常切换，不需要进行任何干预，那么就希望 只需要传入所有的 Tab 内容，不需要再做额外的配置。

但有的时候我们又希望对 Tabs 的状态有很强的控制能力，例如多个关联的 Tabs，子级 Tabs 的内容需要根据父级 Tabs 的 active Tab 动态切换，这时候就会希望 Tabs 组件可以暴露足够充分的 API，来实现业务的需求。

因此我们可以用一种通用的模式，来让任意组件的任意状态同时兼容受控与非受控两种模式，让不同需求场景下都可以使用最合理的 API。

简化示例

我们用一个简单的 Tabs 实现来演示这种通用的组件 API 设计模式，简化的部分包括：

可以打开 online DEMO 配合阅读

API 设计

对于 Vue 组件而言，API 设计主要指的是内部的 data, computed, methods 以及对外的 props, events。在这个示例中，我们会用 activeIdx 作为核心状态，所有的 API 也都会围绕这个状态命名。