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

阿新 • • 發佈：2020-12-06

在開始之前

你的PC需要以下內容：

安裝 Node.jsversion 10.x或以上版本。可以通過在終端中執行以下命令來驗證你是否安裝了此版本的Node.js：

node -v

Visual Studio Code editor（或類似的程式碼編輯器）
全域性安裝vue的最新版本
Vue CLI 3.0

為此，請先解除安裝舊的CLI版本：

npm uninstall -g vue-cli

接下來，安裝新的：

npm install -g @vue/cli

下載 Vue starter 專案（https://github.com/viclotana/...）
解壓縮下載的專案
導航到解壓縮的檔案並執行以下命令使所有依賴項保持最新：

npm install

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

Vue 狀態是確定元件行為的物件。 Vue 狀態決定了元件的渲染方式或動態方式。

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

Vue元件

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'
    );
  }
};

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

為什麼功能元件很重要？

功能元件可以快速執行，因為它們沒有狀態，並且在資料的值改變時不會像模板的元件那樣經歷相同的初始化和重新渲染過程。

通常，功能元件對於渲染或用於迴圈顯示專案是有用的。

演示

在這個介紹性演示中，你將看到帶有 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>