在 Vue.js 中使用无状态组件

作者：Nwose Lotanna

翻译：疯狂的技术宅

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

未经允许严禁转载

在本文中，你将了解功能组件，并了解如何在 Vue 中使用工作流中的无状态组件。

在开始之前

你的PC需要以下内容：

• 安装 Node.js version 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'
    );
  }
};

为什么功能组件很重要？

功能组件可以快速执行，因为它们没有状态，并且在数据的值改变时不会像模板的组件那样经历相同的初始化和重新渲染过程。

通常，功能组件对于渲染或用于循环显示项目是有用的。

演示

在这个介绍性演示中，你将看到带有 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>

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

---

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

• 深入理解Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13个帮你提高开发效率的现代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切
• WebSocket实战：在 Node 和 React 之间进行实时通信
• 关于 Git 的 20 个面试题
• 深入解析 Node.js 的 console.log
• Node.js 究竟是什么？
• 30分钟用Node.js构建一个API服务器
• Javascript的对象拷贝
• 程序员30岁前月薪达不到30K，该何去何从
• 14个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩展插件
• Node.js 多线程完全指南
• 把HTML转成PDF的4个方案及实现

---

• 更多文章...