在 Vue.js 中使用無狀態組件

時間 2019-11-10

原文原文鏈接

做者：Nwose Lotanna
翻譯：瘋狂的技術宅javascript

原文：https://blog.logrocket.com/ho...html

未經容許嚴禁轉載前端

在本文中，你將瞭解功能組件，並瞭解如何在 Vue 中使用工做流中的無狀態組件。vue

在開始以前

你的PC須要如下內容：java

安裝 Node.js version 10.x 或以上版本。能夠經過在終端中運行如下命令來驗證你是否安裝了此版本的Node.js：

node -v

Visual Studio Code editor （或相似的代碼編輯器）
全局安裝 Vue 的最新版本
Vue CLI 3.0

爲此，請先卸載舊的CLI版本：node

npm uninstall -g vue-cli

接下來，安裝新的：git

npm install -g @vue/cli

下載 Vue starter 項目（https://github.com/viclotana/...）
解壓縮下載的項目
導航到解壓縮的文件並運行如下命令使全部依賴項保持最新：

npm install

簡介：什麼是狀態和實例？

Vue 狀態是肯定組件行爲的對象。 Vue 狀態決定了組件的渲染方式或動態方式。程序員

同時，Vue 實例是一個 ViewModel，它包含的選項包括表示元素的模板、要安裝的元素、方法和初始化時的生命週期鉤子。github

Vue組件

Vue.js 中的組件一般是被動的：在 Vue.js 中，數據對象能夠是你可使用的概念、計算屬性、方法和觀察者提供許多選項。此外，數據對象會在數據值發生變化時從新渲染。web

相比之下，功能組件不保持狀態。

功能組件

從本質上講，功能組件是具備本身組件的功能。功能組件沒有狀態或實例，由於它們不保持或跟蹤狀態。此外，你沒法訪問功能組件中的構造。

功能組件的目的是展現。 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: 'Test',
  props: {
    brands: Array
  }
}
</script>

腳本和模板中的功能指示器顯示這是一個功能組件。請注意，你仍然能夠傳遞 props —— 它們是能夠在功能組件中傳遞的惟一數據值。

打開你的 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>

在這裏，你將看到 prop 引用與冒號一塊兒使用。

使用如下命令在 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 ="['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 子節點，如今是該按鈕的文本。示例組件在檢查時顯示爲功能組件。

添加點擊事件

你能夠在組件上添加單擊事件，並在根組件中包含該方法。可是，你須要在 render 函數中使用 data object 參數來訪問它。

將代碼複製到 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 ="['Tesla', 'Bentley', 'Ferrari', 'Ford']">
    </Test>
    <Example @click="callingFunction">
     Find More Cars
    </Example>
  </div>
</template>
<script>
import Test from './components/Test.vue'
import Example from './Example'
export default {
  name: 'app',
  components: {
    Test, Example
  },
  methods: {
    callingFunction() {
      console.log("clicked");
    }
  }
}
</script>

除了上面的示例以外，你還能夠在官方文檔中列出的功能組件中使用其餘參數。