25 Vue-Tipps, die Sie kennen sollten-View.js-php.cn

Dieser Artikel fasst 25 Vue-Tipps zur Verbesserung Ihrer Entwicklungsgeschwindigkeit zusammen und teilt sie mit Ihnen. Ich hoffe, dass er für alle hilfreich sein wird!

25 Vue-Tipps, die Sie kennen sollten

1. Beschränken Sie die Requisite auf eine Liste von Typen

Mit der Option validator in der Requisite-Definition können Sie die Requisite auf einen bestimmten Satz von Werten beschränken: validator 选项，你可以将 prop 限制为一组特定的值：

export default {
  name: &#39;Image&#39;,
  props: {
    src: {
      type: String,
    },
    style: {
      type: String,
      validator: s => [&#39;square&#39;, &#39;rounded&#39;].includes(s)
    }
  }
};

Nach dem Login kopieren

这个 validator 函数接受一个 prop，返回 true 或 false。当你需要比布尔值允许的更多选项时，也可以使用它。按钮类型或警报类型（信息、成功、危险、警告）是一些比较常见的用途。【相关推荐：vuejs视频教程】

2. 默认内容和扩展点

Vue 中的slot可以具有默认内容，你可以制作更易于使用的组件：

<button class="button" @click="$emit(&#39;click&#39;)">
  <slot>
    <!-- 如果没有提供slot则使用 -->
    Click me
  </slot>
</button>

Nach dem Login kopieren

基本上你可以获取组件的任何部分，将它包装在一个slot中，然后你可以使用你想要的任何内容覆盖该组件的该部分。默认情况下，它仍然会照常一样工作，不过还可以有更多选择：

<template>
  <button class="button" @click="$emit(&#39;click&#39;)">
    <!-- 一开始在 slot 标签中添加什么都不做 -->
    <!-- 我们可以通过向 slot 提供内容来覆盖它 -->
    <slot>
      <div class="formatting">
        {{ text }}
      </div>
    </slot>
  </button>
</template>

Nach dem Login kopieren

现在你可以用多种不同的方式使用此组件。简单的默认方式或者你自己的自定义方式：

<!-- 使用组件的默认功能 -->
<ButtonWithExtensionPoint text="Formatted text" />

<!-- 使用扩展点创建自定义行为 -->
<ButtonWithExtensionPoint>
  <div class="different-formatting">
    在这里做一些不同的事情
  </div>
</ButtonWithExtensionPoint>

Nach dem Login kopieren

3. 使用引号观察嵌套值

你可能不知道这一点：只需使用引号就可以轻松地直接查看嵌套值：

watch {
  &#39;$route.query.id&#39;() {
    // ...
  }
}

Nach dem Login kopieren

这对于处理深度嵌套的对象非常有用

4. 知道何时使用 v-if（以及何时避免使用）

有时不使用v-if，使用v-show会更高效：

<ComplicatedChart v-show="chartEnabled" />

Nach dem Login kopieren

当v-if打开和关闭时，它将完全创建和销毁元素。v-show不同的是将创建元素并将其留在那里，通过将其样式设置为display: none来隐藏它。

如果你需要切换的组件渲染起来代价比较高，那么这样做会更有效率。另一方面，如果你不需要立即使用那个组件，可以使用v-if以便它跳过渲染它并更快地加载页面。

5. 单作用域 slot 的简写（不需要模板标签！）

Scoped slot 比较有趣，但为了使用它们，你也必须使用很多template标签。

然而有一个速记可以让我们摆脱它，但前提是我们使用单个作用域slot。

可以不用这样写：

<DataTable>
  <template #header="tableAttributes">
    <TableHeader v-bind="tableAttributes" />
  </template>
</DataTable>

Nach dem Login kopieren

我们可以这样写：

<DataTable #header="tableAttributes">
  <TableHeader v-bind="tableAttributes" />
</DataTable>

Nach dem Login kopieren

这样更简单、直接。

6. 有条件地渲染slot

每个 Vue 组件都有一个特殊的 $slots 对象，其中包含所有slot。默认slot具有默认键，名字命名的slot都使用它们的名称作为键：

const $slots = {
  default: <default slot>,
  icon: <icon slot>,
  button: <button slot>,
};

Nach dem Login kopieren

但是这个$slots对象只有应用于组件的slot，而不是每个定义的slot。

以这个定义了几个slot的组件为例，包括几个命名的slot：

<!-- Slots.vue -->
<template>
  <div>
    <h2>这里是一些slots</h2>
    <slot />
    <slot name="second" />
    <slot name="third" />
  </div>
</template>

Nach dem Login kopieren

如果我们只对组件应用一个slot，则只有该slot会出现在我们的$slots对象中：

<template>
  <Slots>
    <template #second>
      这将应用于第二个slot
    </template>
  </Slots>
</template>

Nach dem Login kopieren

$slots = { second: <vnode> }

Nach dem Login kopieren

我们可以在我们的组件中使用它来检测哪些slot已应用于组件，例如，通过隐藏slot的包装元素：

<template>
  <div>
    <h2>一个包裹的slot</h2>
    <div v-if="$slots.default" class="styles">
      <slot />
    </div>
  </div>
</template>

Nach dem Login kopieren

现在div，应用样式的包装器只有在我们实际用某些东西填充该slot时才会呈现。

如果我们不使用v-if，div如果我们没有slot，我们最终会得到一个空的和不必要的。根据所div具有的样式，这可能会弄乱我们的布局并使事情看起来很奇怪。

为什么我们希望能够有条件地渲染slot呢？

使用条件slot主要有以下三个原因：

使用 wrapper div 来添加默认样式时
slot是空的
当我们将默认内容与嵌套slot组合

例如，当我们添加默认样式时，我们会在slot周围添加一个div：

<template>
  <div>
    <h2>This is a pretty great component, amirite?</h2>
    <div class="default-styling">
      <slot >
    </div>
    <button @click="$emit(&#39;click&#39;)">Click me!</button>
  </div>
</template>

Nach dem Login kopieren

但是，如果父组件没有将内容应用到该slot，我们最终会在页面div上呈现一个空的：

<div>
  <h2>这是一个非常棒的组件</h2>
  <div class="default-styling">
    <!-- slot中没有内容，但仍会呈现此 div-->
  </div>
  <button @click="$emit(&#39;click&#39;)">Click me!</button>
</div>

Nach dem Login kopieren

v-if在包装上添加它div

<div>
  <h2>这是一个非常棒的组件</h2>
  <button @click="$emit(&#39;click&#39;)">Click me!</button>
</div>

Nach dem Login kopieren

Dieser Validator Die Funktion akzeptiert eine Requisite und gibt true oder false zurück. Es kann auch verwendet werden, wenn Sie mehr Optionen benötigen, als der boolesche Wert zulässt. Zu den gebräuchlichsten Verwendungszwecken gehören Schaltflächentypen oder Alarmtypen (Info, Erfolg, Gefahr, Warnung). [Verwandte Empfehlungen: vuejs Video-Tutorial

]

2. Standardinhalte und Erweiterungspunkte

Slots in Vue können Standardinhalte haben, und Sie können Komponenten erstellen, die einfacher zu verwenden sind:

<!-- 可惜这个活动不存在 -->
<slot @change="update" />

25 Vue-Tipps, die Sie kennen sollten

1. Beschränken Sie die Requisite auf eine Liste von Typen

2. 默认内容和扩展点

3. 使用引号观察嵌套值

4. 知道何时使用 v-if（以及何时避免使用）

5. 单作用域 slot 的简写（不需要模板标签！）

6. 有条件地渲染slot

为什么我们希望能够有条件地渲染slot呢？

]

export default { mounted() { // 当事情发生变化时调用`update` const observer = new MutationObserver(this.update); // 观察这个组件的变化 observer.observe(this.$el, { childList: true, subtree: true }); } };Nach dem Login kopieren

Warum wollen wir Slots bedingt rendern?

9. 覆盖子组件的样式——正确的方法

10. 用上下文感知组件创造魔法

1. 状态共享

2. 配置

3. 造型

11. 如何使在 Vue 之外创建的变量具有响应性？

12. 在 v-for 中解构

13. 在 Vue 中循环一个范围

14. 观察组件中的任何内容

15. 窃取道具类型

16. 检测元素外部（或内部）的点击

17. 递归槽

18. 组件元数据

19. 多文件单文件组件

20. 可重用组件不是你想的那样

21. 从组件外部调用方法

22. 观察数组和对象

23. 与 Vue Router 深度链接

24. 模板标签的另一种用途

25. 处理错误（和警告）的更好方法

export default { mounted() { // 当事情发生变化时调用`update` const observer = new MutationObserver(this.update); // 观察这个组件的变化 observer.observe(this.$el, { childList: true, subtree: true }); } };
Nach dem Login kopieren