Vue.js中使用無狀態元件的方法介紹

在本文中，您將了解功能元件，並了解如何在Vue中的工作流程中使用無狀態元件。 Vue應用程式狀態是一個確定元件行為的物件。 Vue應用程式狀態指示元件如何呈現或如何動態。

在你開始之前

你需要在你的電腦:

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

引言:什麼是狀態和實例?

Vue應用程式狀態是一個確定組件行為的物件。 Vue應用程式狀態指示元件如何呈現或如何動態。

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

Vue元件

js中的元件通常是被動式的：在vue.js中，資料物件可以有很多選項用於概念、計算屬性、方法和觀察程序。此外，資料物件會在資料值變更時重新呈現。

相反，功能元件不會保持狀態。

功能元件

從本質上講，函數元件是具有自己的元件的函數。功能組件沒有狀態或實例，因為它們不保存或追蹤狀態。此外，您不能在功能元件中存取構造。

功能元件是為了表示而創建的。 Vue.js中的功能元件與React.js中的類似。在Vue中，開發人員可以透過傳遞上下文輕鬆地使用功能元件直接建立整潔的元件。

語法功能元件

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

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) {
    // ...
  }
})

建立功能元件

建立功能元件時要記住的一個關鍵準則是功能屬性。函數屬性在元件的模板部分或腳本部分中指定。範本部分語法如下所示：

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

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

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

為什麼功能元件很重要?

功能元件可以快速執行，因為它們沒有狀態，並且在資料值發生變更時，不會經歷相同的初始化和重新呈現過程。

大多數情況下，功能元件對於表示或顯示循環項目非常有用。

示範

在這個介紹性的示範中，您將看到帶有Vue範本的單頁元件類型示範和功能元件的呈現函數類型演示。

單頁功能元件

開啟test.vue檔案並將下面的程式碼區塊複製到該檔案中：

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

腳本和範本中的功能指示器顯示這是一個功能元件。請注意，仍然可以傳遞道具——它們是在功能組件中可以傳遞的惟一資料值。

暫時的資料道具持有也可以循環通過。

開啟您的app.vue文件，將下面的程式碼區塊複製到其中:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test 
     :brands ="[&#39;Tesla&#39;, &#39;Bentley&#39;, &#39;Ferrari&#39;, &#39;Ford&#39;]">
    </Test>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test
  }
}
</script>
<style>
#app {
  font-family: &#39;Avenir&#39;, 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

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

呈現函數方法

功能元件也可以包含呈現函數。

開發人員使用呈現函數來建立自己的虛擬DOM，而不使用Vue範本。

使用渲染函數在cars列表下建立一個新按鈕。在你的專案資料夾中建立一個名為example.js的新文件，並將下面的程式碼區塊複製到文件中:

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

這將在功能元件中建立一個呈現函數來顯示按鈕，並使用元素上的子節點作為按鈕文字。

開啟app.vue文件，將下面的程式碼區塊複製到文件中:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test 
     :brands ="[&#39;Tesla&#39;, &#39;Bentley&#39;, &#39;Ferrari&#39;, &#39;Ford&#39;]">
    </Test>
    <Example>
     Find More Cars
    </Example>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Example from &#39;./Example&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Example
  }
}
</script>
<style>
#app {
  font-family: &#39;Avenir&#39;, 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（查找更多汽车）子节点现在是按钮的文本。示例组件在检查时显示为功能组件。

添加点击事件

您可以在组件上添加单击事件，并在根组件中包含该方法。但是，您需要render函数中的数据对象参数来访问它。

复制这个在你的example.js文件:

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

现在，将单击事件添加到根组件中，Vue将识别它。将以下内容复制到您的app.vue文件:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test 
     :brands ="[&#39;Tesla&#39;, &#39;Bentley&#39;, &#39;Ferrari&#39;, &#39;Ford&#39;]">
    </Test>
    <Example @click="callingFunction">
     Find More Cars
    </Example>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Example from &#39;./Example&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Example
  },
  methods: {
    callingFunction() {
      console.log("clicked");
    }
  }
}
</script>

除了上面的示例之外，您还可以在官方文档中列出的功能组件中使用其他参数。

结论

这个功能组件的初学者指南可以帮助您实现快速的表示，显示项目的循环，或者显示不需要状态的工作流的简单部分。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

以上是Vue.js中使用無狀態元件的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！