Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what Vue.js functional components are", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what is Vue.js functional components" this article.

Preface

If you are a front-end developer and have read some Java code in some opportunities, you may see a way to write the arrow function in the latter, similar to that in ES6 syntax.

(String a, String b)-> a.toLowerCase () + b.toLowerCase ()

This kind of lambda expression, which appears after Java 8, can be found in both C++ / Python, and it is more compact than traditional OOP-style code; although this expression in Java is essentially a functional interface (functional interface) syntax candy for generating class instances, it is a typical functional programming (FP-functional programming) feature regardless of its concise writing or the behavior of dealing with immutable values and mapping them to another value.

Butler Lampson, the Turing Prize winner in 1992, has a famous conclusion:

All problems in computer science can be solved by another level of indirection

Any problem in computer science can be solved by adding an indirect level.

The "indirect level" in this sentence is often translated as "abstract layer". Although some people have argued about its rigor, it makes sense no matter how it is translated. In any case, the OOP language embracing FP is the direct embodiment of the increasing integration of the programming field and attaching importance to functional programming, and also confirms the "basic theorem of software engineering" by introducing another indirect level to solve practical problems.

Another popular saying, which is not necessarily so rigorous, is:

OOP is the abstraction of data, while FP is used to abstract behavior.

Different from object-oriented programming, by abstracting all kinds of objects and paying attention to the decoupling problems between them, functional programming focuses on the smallest single operation, turning complex tasks into the superposition of function operations of f (x) = y. A function is a first-class citizen (First-class object) in FP and can be treated as a function argument or returned by a function.

At the same time, in FP, functions should not depend on or affect external state, which means that given input will produce the same output-which is why words such as "immutable" and "pure" are often used in FP; if you mention the aforementioned "lambda calculus" and "curring Coriarization", you sound like a FP enthusiast.

The above concepts and related theories were born in the first half of the 20th century, many scientists have achieved fruitful results in the study of mathematical logic, and even the popular ML, AI and so on have benefited from these achievements. For example, Haskell Curry, a master American Polish mathematician at that time, his name was not wasted in the typical functional practices of Haskell language and Coriarization.

React functional component

If you have used the "chained syntax" of jQuery / RxJS, it can actually be regarded as the practice of monad in FP; in recent years, most front-end developers have really come into contact with FP, one is the introduction of several functional-style Array instance methods such as map / reduce from ES6, and the other is from the functional components in React (FC-functional component).

Functional components in React are also often called stateless components (Stateless Component), which are more intuitively called rendering functions (render function), because they are really just functions for rendering:

Const Welcome = (props) = > {return Hello, {props.name};}

In combination with TypeScript, you can also use type and FC to input parameters to the function constraint that returns jsx:

Type GreetingProps = {name: string;} const Greeting:React.FC = ({name}) = > {return Hello {name}}

You can also use interface and paradigms to define props types more flexibly:

Interface IGreeting {name: string; gender: t} export const Greeting = ({name, gender}: IGreeting): JSX.Element = > {return Hello {gender = 0? 'Ms.':' Mr.'} {name}}; functional components in Vue (2.x)

In the functional components section of the Vue official website document, it is described as follows:

... We can mark the component as functional, which means it is stateless (no responsive data) and no instance (no this context). A functional component looks like this: Vue.component ('my-component', {functional: true, / / Props is optional props: {/ /.}, / / to make up for the missing instance / / provide a second parameter as the context render: function (createElement, context) {/ /.}}). In version 2.5.0 and above, if you use single File components, template-based functional components can be declared as follows:

Developers who have written React and read this document for the first time may subconsciously send out "Ah here." With a sigh, writing a functional is called functional.

In fact, in Vue 3.x, you can really write the "functional components" of pure rendering functions like React, which we'll talk about later.

In today's more generic Vue 2.x, as stated in the documentation, a functional component (FC-functional component) means a component without an instance (no this context, no lifecycle methods, no listening on any properties, no management of any state). From an external point of view, it can also be seen as a fc (props) = > VNode function that accepts only some prop and returns some rendering as expected.

Also, the real FP function is based on immutable state (immutable state), while the "functional" component in Vue is less idealized-- the latter is based on mutable data, but there is no instance concept compared to ordinary components. But its advantages are still obvious:

Because functional components ignore implementation logic such as lifecycle and monitoring, rendering overhead is very low and execution speed is fast.

Compared with instructions such as v-if in ordinary components, using the h function or in combination with jsx logic is clearer.

It is easier to implement the HOC-higher-order component pattern, that is, a container component that encapsulates some logic and conditionally renders parameter subcomponents

Multiple root nodes can be returned through an array

? Take a chestnut: optimize custom columns in el-table

Let's start with a visual experience of a typical scenario suitable for FC:

This is an example of a custom table column on ElementUI's official website. The corresponding template code is as follows:

{{scope.row.date}}

Name: {{scope.row.name}}

Address: {{scope.row.address}}

{{scope.row.name}} Edit and delete

In the actual business requirements, such a small table as in the document example certainly exists, but it will not be the focus of our attention. ElementUI custom table columns are widely used in the rendering logic of large reports with a variety of fields and interactions, usually starting with more than 20 columns, and each column contains a list of pictures, video preview pop-ups, paragraphs that need to be combined and formatted, a variable number of action buttons depending on permissions or status, and so on. The related template sections are often hundreds of rows or more, and in addition to being lengthy, it is also a problem that directly similar logic in different columns is difficult to reuse.

As the lines in the TV series Friends say:

Welcome to the real world! It's terrible ~ but you'll love it!

Solutions such as include to split template are not available in the vue single-file component-after all, there are plenty of syntax sugars, not the best.

Cleanliness developers will try to solve this pain point by encapsulating complex template parts into separate components; this is good, but it creates a performance hazard compared to the original way of writing.

Recalling your confidence in answering questions about how to optimize multi-tier node rendering during the interview, we should obviously go one step further in this practice, not only to split concerns, but also to avoid performance problems. Functional components are an appropriate solution in this scenario.

The first attempt is to "translate" part of the date column in the original template into a functional component DateCol.vue:

{{props.row.date}}

Declare it in components after import in the container page and use:

Basically authentic; the only problem is that limited by a single root element, there is an extra layer of div, which can also be solved with vue-fragment and so on.

Next, we reconstruct the last name column to NameCol.js:

Export default {functional: true, render (h, {props}) {const {row} = props Return h ('el-popover', {props: {trigger: "hover", placement: "top"}, scopedSlots: {reference: () = > h (' div', {class: "name-wrapper"}, [h ('el-tag', {props: {size:' medium'}}, [row.name +'~']])} [h ('paired, null, [`name: ${row.name} `]), h (' paired, null, [`residential address: ${row.address}`])}}

The effect goes without saying, and arrays are used to circumvent the limitation of a single root element; more importantly, the abstracted widget is a real js module, you can put it into a .js file without wrapping it, and you are more free to do whatever you want.

The h function may bring some extra mental burden, as long as it is configured with jsx support, it will be almost the same as the original.

In addition, the scopedSlots involved here and the event handling that will be faced in the third column, which we will talk about later.

Render context

Reviewing the documentation section mentioned above, the render function looks like this:

Render: function (createElement, context) {}

In actual coding, createElement is habitually written as h, and even if h is not ostensibly called in jsx usage, it still needs to be written; in Vue3, it can be introduced globally with import {h} from 'vue'.

It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language" -- Evan You

The document on the official website continues to read:

Everything the component needs is passed through the context parameter, which is an object that includes the following fields:

Props: an object that provides all prop

An array of children:VNode child nodes

Slots: a function that returns an object containing all slots

ScopedSlots: (2.6.0 +) an object that exposes incoming scope slots. Normal slots are also exposed as functions.

Data: the entire data object passed to the component, passed into the component as the second parameter of createElement

Parent: reference to the parent component

Listeners: (2.3.0 +) an object that contains all event listeners registered by the parent component for the current component. This is an alias for data.on.

Injections: (2.3.0 +) if the inject option is used, the object contains the property that should be injected.

This context is defined as an interface type of RenderContext, which is formed when components are initialized or updated within vue:

Proficiency in the various properties defined by the RenderContext interface is the basis for us to play with functional components.

Template

In the previous example, we used a template template with the functional attribute to abstract the logic of the date column portion of the table into a separate module.

This is partly explained in the schematic above, where Vue templates are actually compiled into render functions, or template templates and explicit render functions follow the same internal processing logic and are appended with attributes such as $options.

In other words, when dealing with some complex logic, we can still use the power of js, such as habitually calling methods in template, etc.-- of course, this is not really a Vue component method:

Emit

There is no such method as this.$emit () in functional components.

However, event callbacks can be handled normally, and all you need to use is the context.listeners attribute-- as mentioned in the document, this is an alias for data.on. For example, in the previous example, we want to listen to the icon of the date column in the container page to be clicked:

In DateCol.vue, this triggers the event:

The only thing to note is that although the above writing is sufficient for most cases, if multiple events of the same name are monitored externally, the listeners will become an array; so a relatively complete encapsulation method is:

/ * event trigger method for functional components * @ param {object} listeners object in listeners-context * @ param {string} eventName-event name * @ param {... any} args-some parameters * @ returns {void}-none * / export const fEmit = (listeners, eventName,... args) = > {const cbk = listeners [eventName] if (_ .isFunction (cbk)) cbk.apply (null) Args) else if (_ .isArray (cbk)) cbk.forEach (f = > f.apply (null, args))} filter

In the return structure of the h function or jsx, the {title | withColon} filter syntax in the traditional Vue template no longer works.

Fortunately, the originally defined filter function is also a common function, so the equivalent way to write it is:

Import filters from'@ / filters'; const {withColon} = filters; / /... / / render returns the slot {withColon (title)} in the jsx

The method of using slots is used in the normal component template section, but cannot be used in functional component render functions, including jsx mode.

In the previous example, the corresponding writing method has been demonstrated when refactoring the last name column to NameCol.js. Let's take a look at an example of the skeleton screen component in ElementUI, such as the common template usage:

Real text

Loading content

This actually involves two slots, default and template, which are changed to the functional component render function, which is written as follows:

Export default {functional: true, props: ['ok'], render (h, {props}) {return h (' el-skeleton', {props: {loading: props.ok}, scopedSlots: {default: () = > 'real text', template: () = > h (' padded, null, ['loading context'])}}, null)}}

If the scope slot of the property is passed, such as "user", then user can be used as the input parameter of the slot function.

The official website document also mentions the comparison between slots () and children:

First

Second

For this component, children gives you two paragraph tags, while slots (). Default passes only the second anonymous paragraph tag, and slots (). Foo passes the first named paragraph tag. It has both children and slots (), so you can choose whether to make the component aware of a slot mechanism or simply pass the children and hand it over to other components to handle. Provide / inject

In addition to the injections usage mentioned in the documentation, note that provide / inject in Vue 2 is ultimately non-responsive.

If you have to use this method after evaluation, you can try vue-reactive-provide

HTML content

Jsx in Vue cannot support the writing of v-html in ordinary component template. The corresponding element attribute is domPropsInnerHTML, such as:

In render, the word is split up as follows:

H ('paired, {domProps: {innerHTML:' hello'}})

It's really hard to write anyway, but fortunately it's easier to remember than dangerouslySetInnerHTML in React.

Style

If you use pure .js / .ts components, the only trouble may be that you can no longer enjoy the style of scoped in .vue components. In the case of React, there are no more than the following solutions:

Import external style and naming conventions such as BEM

Turn on CSS Modules in the vue-loader option and apply the form of styleMod.foo in the component

Dynamically construct style arrays or objects within the module and assign values to attributes

Use a tool approach to dynamically build a style class:

Const _ insertCSS = css = > {let $head = document.head | | document.getElementsByTagName ('head') [0]; const style = document.createElement (' style'); style.setAttribute ('type',' text/css'); if (style.styleSheet) {style.styleSheet.cssText = css;} else {style.appendChild (document.createTextNode (css));} $head.appendChild (style); $head = null;}; TypeScript

Both React and Vue itself provide some means of verifying props types. However, on the one hand, these methods are a little troublesome in configuration, and on the other hand, they are a bit too "heavy" for lightweight functional components.

TypeScript, as a strongly typed JavaScript superset, can be used to more accurately define and check the type of props, make it easier to use, and be more friendly to automatic prompts in VSCode or other development tools that support Vetur.

To combine Vue functional components with TS, as defined by interface RenderContext, for externally entered props, you can declare its structure using a custom TypeScript interface, such as:

Interface IProps {year: string; quarters: Array; note: {content: string; auther: stiring;}}

Then specify the interface as the first generic type of RenderContext:

Import Vue, {CreateElement, RenderContext} from 'vue';... Export default Vue.extend ({functional: true, render: (h: CreateElement, context: RenderContext) = > {console.log (context.props.year); / /...}}); combined with composition-api

Similar to the design purpose of React Hooks, Vue Composition API also brings responsive features, life cycle concepts such as onMounted, and ways to manage side effects to functional components to some extent.

Here we only discuss a unique way of writing composition-api-- returning the render function in the setup () entry function:

For example, define a counter.js:

Import {h, ref} from "@ vue/composition-api"; export default {model: {prop: "value", event: "zouni"}, props: {value: {type: Number, default: 0}, setup (props, {emit}) {const counter = ref (props.value); const increment = () = > {emit ("zouni", + + counter.value);} Return () = > h ("div", null, [h ("button", {on: {click: increment}}, ["plus"])];}}

In the container page:

If you want to use it in conjunction with TypeScript, the only changes are:

Import {defineComponent} from "@ vue/composition-api"

Export default defineComponent ({component})

Unit testing

If the strongly typed support of TypeScript is used, the parameter types inside and outside the component will be better guaranteed.

As for the logic of components, it is still necessary to complete the construction of security scaffolding through unit testing. At the same time, because functional components are generally relatively simple, it is not troublesome to write tests.

In practice, due to the difference between FC and ordinary components, there are still some minor issues that need to be noted:

Re-render

Since functional components only rely on the changes in their input props to trigger a rendering, the updated state cannot be obtained only by nextTick () in the test case, so you need to try to trigger its re-rendering manually:

It ("batch Select all", async () = > {let result = mockData / / this actually simulates the process of updating components each time via external props / / wrapper.setProps () cannot be called ona functional component const update = async () = > {makeWrapper ({value: result}, {listeners: {change: M = > (result = m)}}) Await localVue.nextTick ();}; await update (); expect (wrapper.findAll ("input")) .toHaveLength (6); wrapper.find ("tr.whole label"). Trigger ("click"); await update (); expect (wrapper.findAll ("input:checked")) .toHaveLength (6); wrapper.find ("tr.whole label"). Trigger ("click"); await update () Expect (wrapper.findAll ("input:checked")) .toHaveLength (0); wrapper.find ("tr.whole label"). Trigger ("click"); await update (); wrapper.find ("tbody > tr:nth-child (3) > td:nth-child (2) > ul > li:nth-child (4) > label"). Trigger ("click"); await update (); expect (wrapper.find (tr.whole label input:checked). Exists ()). ToBeFalsy ();}) Multiple root nodes

One advantage of functional components is that you can return an array of elements, which is equivalent to returning multiple root nodes (multiple root nodes) in render ().

At this time, if you directly use shallowMount and other methods to load the component in the test, an error will occur:

[Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node.

The solution is to package a wrapper component:

Import {mount} from'@ vue/test-utils'import Cell from'@ / components/Cell' const WrappedCell = {components: {Cell}, template: ``} const wrapper = mount (WrappedCell, {propsData: {cellData: {category: 'foo', description:' bar'}) Describe ('Cell.vue', () = > {it (' should output two tds with category and description', ()) > {expect (wrapper.findAll ('td')) .toHaveLength (2); expect (wrapper.findAll (' td'). At (0). Text ()) .tobe ('foo'); expect (wrapper.findAll (' td'). At (1). Text () .tobe ('bar');}); fragment component

Another trick that can be used with FC is that for some common components that reference vue-fragment (which is also generally used to solve multi-node problems), you can encapsulate a functional component stub instead of fragment components in their unit tests, thus reducing dependencies and facilitating testing:

Let wrapper = null;const makeWrapper = (props = null, opts = null) = > {wrapper = mount (Comp, {localVue, propsData: {... props}, stubs: {Fragment: {functional: true, render (h, {slots}) {return h ("div", slots (). Default) }}, attachedToDocument: true, sync: false,... opts});}; functional components in Vue 3

This part is basically consistent with our previous practice in composition-api, so let's roughly extract what is said in the new official website document:

Real function components

In Vue 3, all functional components are created with ordinary functions. In other words, there is no need to define the {functional: true} component option.

They will receive two parameters: props and context. The context parameter is an object that contains the attrs, slots, and emit property of the component.

In addition, h is now imported globally, rather than implicitly provided in the render function:

Import {h} from 'vue' const DynamicHeading = (props, context) = > {return h (`h$ {props.level} `, context.attrs, context.slots)} DynamicHeading.props = [' level'] export default DynamicHeading single file component

In 3.x, the performance difference between stateful and functional components has been greatly reduced and is negligible in most use cases. Therefore, the migration path for developers using functional on a single-file component is to delete the attribute, rename all references to props to $props, and rename attrs to $attrs:

Export default {props: ['level']}

The main differences are:

Remove functional attribute from

Listeners is now passed as part of $attrs and can be deleted

These are all the contents of the article "what are Vue.js functional components?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.