在本文中，您將了解功能組件，并了解如何在Vue中的工作流中使用無狀態(tài)組件。Vue應用程序狀態(tài)是一個確定組件行為的對象。Vue應用程序狀態(tài)指示組件如何呈現(xiàn)或如何動態(tài)。

在你開始之前

你需要在你的電腦:

node.js 10.x及以上版本已安裝。通過在終端/命令提示符下運行以下命令，可以驗證是否具有此版本的node.js：

node -v

• Visual Studio代碼編輯器(或類似的代碼編輯器)

• 在您的計算機上全局安裝Vue的最新版本

• 在您的機器上安裝了Vue CLI 3.0

要做到這一點，首先卸載舊的CLI版本:

npm uninstall -g vue-cli

接下來，安裝一個新的:

npm install -g @vue/cli

• 在這里下載一個Vue入門項目

• 解壓下載的項目

• 導航到解壓縮的文件，并運行命令，以保持所有的依賴關系最新:

npm install

引言:什么是狀態(tài)和實例?

Vue應用程序狀態(tài)是一個確定組件行為的對象。Vue應用程序狀態(tài)指示組件如何呈現(xiàn)或如何動態(tài)。

同時，vue實例是一個viewmodel，它包含一些選項，包括表示元素的模板、要裝入的元素、方法和初始化時的生命周期掛鉤。

Vue組件

js中的組件通常是被動的：在vue.js中，數(shù)據(jù)對象可以有很多選項用于概念、計算屬性、方法和觀察程序。此外，數(shù)據(jù)對象會在數(shù)據(jù)值更改時重新呈現(xiàn)。

相反，功能組件不保持狀態(tài)。

功能組件

從本質上講，函數(shù)組件是具有自己的組件的函數(shù)。功能組件沒有狀態(tài)或實例，因為它們不保存或跟蹤狀態(tài)。此外，您不能在功能組件中訪問構造。

功能組件是為了表示而創(chuàng)建的。Vue.js中的功能組件與React.js中的類似。在Vue中，開發(fā)人員可以通過傳遞上下文輕松地使用功能組件直接構建整潔的組件。

語法功能組件

從官方文檔來看，功能組件是這樣的:

Vue.component('my-component', {   functional: true,   // Props are optional   props: {     // ...   },   // To compensate for the lack of an instance,   // we are now provided a 2nd context argument.   render: function (createElement, context) {     // ...   } })

創(chuàng)建功能組件

創(chuàng)建功能組件時要記住的一個關鍵準則是功能屬性。函數(shù)屬性在組件的模板部分或腳本部分中指定。模板部分語法如下所示：

<template functional>   <div> <h1> hello world</h1>   </div> </template>

你可以像這樣指定腳本的屬性:

export default {   functional: true,   render(createElement) {     return createElement(       "button", 'Click me'     );   } };

為什么功能組件很重要?

功能組件可以快速執(zhí)行，因為它們沒有狀態(tài)，并且在數(shù)據(jù)值發(fā)生更改時，不會經歷相同的初始化和重新呈現(xiàn)過程。

大多數(shù)情況下，功能組件對于表示或顯示循環(huán)項非常有用。

演示

在這個介紹性的演示中，您將看到帶有Vue模板的單頁面組件類型演示和功能組件的呈現(xiàn)函數(shù)類型演示。

單頁功能組件

打開test.vue文件并將下面的代碼塊復制到該文件中：

<template functional>   <div>     <p v-for="brand in props.brands" :key="brand">{{brand}} </p>   </div> </template> <script>  export default {   functional: true,   name: 'Test',   props: {     brands: Array   } } </script>

腳本和模板中的功能指示器顯示這是一個功能組件。注意，仍然可以傳遞道具——它們是在功能組件中可以傳遞的惟一數(shù)據(jù)值。

暫時的數(shù)據(jù)道具持有也可以循環(huán)通過。

打開您的app.vue文件，將下面的代碼塊復制到其中:

<template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png">     <Test       :brands ="['Tesla', 'Bentley', 'Ferrari', 'Ford']">     </Test>   </div> </template> <script> import Test from './components/Test.vue' export default {   name: 'app',   components: {     Test   } } </script> <style> #app {   font-family: 'Avenir', Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>

這里，您將看到props引用與冒號一起使用。

使用以下命令在dev服務器中運行應用程序:

npm run serve

你的瀏覽器的結果應該是這樣的:

呈現(xiàn)函數(shù)方法

功能組件也可以包含呈現(xiàn)函數(shù)。

開發(fā)人員使用呈現(xiàn)函數(shù)來創(chuàng)建他們自己的虛擬DOM，而不使用Vue模板。

使用渲染函數(shù)在cars列表下創(chuàng)建一個新按鈕。在你的項目文件夾中創(chuàng)建一個名為example.js的新文件，并將下面的代碼塊復制到文件中:

export default {     functional: true,     render(createElement, { children }) {       return createElement("button", children);     }   };

這將在功能組件中創(chuàng)建一個呈現(xiàn)函數(shù)來顯示按鈕，并使用元素上的子節(jié)點作為按鈕文本。

打開app.vue文件，將下面的代碼塊復制到文件中:

<template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png">     <Test       :brands ="['Tesla', 'Bentley', 'Ferrari', 'Ford']">     </Test>     <Example>      Find More Cars     </Example>   </div> </template> <script> import Test from './components/Test.vue' import Example from './Example' export default {   name: 'app',   components: {     Test, Example   } } </script> <style> #app {   font-family: 'Avenir', Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>

如果再次運行該應用程序，您將看到find more cars（查找