Vue的一些技巧,有些你可能不知道

Vue的一些技巧,有些你可能不知道

1,默认内容和扩展点

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

<button class="button" @click="$emit('click')">
  <slot>
    <!-- 如果提供slot则使用 -->
    Click me
  </slot>
</button>

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

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

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

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

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

2,使用引号观察嵌套值

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

watch {
  '$route.query.id'() {
    // ...
  }
}

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

3,知道何时使用 v-if（以及何时避免使用）

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

<ComplicatedChart v-show="chartEnabled" />

当v-if打开和关闭时，它将完全创建和销毁元素。v-show不同的是将创建元素并将其留在那里，通过将其样式设置为display: none来隐藏它。
如果你需要切换的组件渲染起来代价比较高，那么这样做会更有效率。另一方面，如果你不需要立即使用那个组件，可以使用v-if以便它跳过渲染它并更快地加载页面。

4, 将本地和全局风格混合在一起

通常在使用样式时我们希望它们被限定为单个组件：

<style scoped>
  .component {
    background: green;
  }
</style>

如果你需要还可以添加一个非作用域样式块来添加全局样式：

<style>
  /*全局应用*/
  .component p {
    margin-bottom: 16px;
  }
</style>

<style scoped>
  /*范围限定于此特定组件*/
  .component {
    background: green;
  }
</style>

5,覆盖子组件的样式——正确的方法

coped CSS 比较容易保持整洁，并且不会意外地将样式渗入应用程序的其他部分。但有时你需要覆盖子组件的样式，并突破该范围。Vue 有一个deep专门用于此的选择器：

<style scoped>
/* 覆盖子组件的 CSS，同时保持样式范围*/
.my-component >>> .child-component {
  font-size: 24px;
}
</style>

注意：如果你使用的是 SCSS 之类的 CSS 预处理器，则可能需要改用/deep/。

6,在 v-for 中解构

你知道你可以在 v-for 中解构吗？

<li
  v-for="{ name, id } in users"
  :key="id"
>
  {{ name }}
</li>

众所周知，你可以使用这样的元组从 v-for 中获取索引：

<li v-for="(value, key) in [
  'Hai Yong',
  'Frozen',
  'Web Beginner'
]">
  {{ index + 1 }} - {{ value }}
</li>

使用对象时，你还可以抓住key：

<li v-for="(value, key) in {
  name: 'Hai Yong',
  released: 2021,
  director: 'A blogger',
}">
  {{ key }}: {{ value }}
</li>

也可以结合这两种方法，获取属性的键和索引：

<li v-for="(value, key, index) in {
  name: 'Hai Yong',
  released: 2021,
  director: 'A blogger',
}">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>

7,在 Vue 中循环一个范围

v-for指令允许我们遍历一个数组，但它也让我们遍历一个范围：

<template>
  <ul>
    <li v-for="n in 5">项目#{{ n }}</li>
  </ul>
</template>

显示效果：

• 项目#1
• 项目#2
• 项目#3
• 项目#4
• 项目#5

当我们使用v-for范围时，它将从 1 开始并以我们指定的数字结束。

8, 多文件单文件组件

这是 SFC 的一个鲜为人知的功能。你可以像使用常规 HTML 文件一样导入文件：

<!-- "single" 文件组件 -->
<template src="./template.html"></template>
<script src="./script.js"></script>
<style scoped src="./styles.css"></style>

如果你需要共享样式、文档或其他任何内容这会很方便。也非常适合那些因滚动而磨损手指的超长组件文件

9,与 Vue Router 深度链接

你可以在 URL 中存储（一些）状态，允许你直接跳转到页面上的特定状态。
比如你可以加载一个已选择日期范围过滤器的页面：

someurl.com/edit?date-range=last-week

这对于用户可能共享大量链接的应用程序部分、服务器呈现的应用程序或在两个独立应用程序之间传递比常规链接通常提供的信息更多的信息非常有用。

你可以存储过滤器、搜索值、模式是打开还是关闭，或者我们滚动到的列表中的位置——非常适合无限分页。

使用vue-router这样的方式获取查询（这也适用于 Nuxt 和 Vuepress 等大多数 Vue 框架）：

const dateRange = this.$route.query.dateRange;

要更改它，我们使用RouterLink组件并更新query：

<RouterLink :to="{
  query: {
    dateRange: newDateRange
  }
}">

10,处理错误（和警告）的更好方法

你可以为 Vue 中的错误和警告提供自定义处理程序：

// Vue 3
const app = createApp(App);
app.config.errorHandler = (err) => {
  alert(err);
};

// Vue 2
Vue.config.errorHandler = (err) => {
  alert(err);
};

Bugsnag 和 Rollbar 等错误跟踪服务挂接到这些处理程序中以记录错误，但你也可以使用它们来更优雅地处理错误以获得更好的用户体验。

例如，如果错误未得到处理，应用程序不仅会崩溃，还可以显示整页错误屏幕并让用户刷新或尝试其他操作。

在 Vue 3 中，错误处理程序仅适用于模板和观察程序错误，但 Vue 2 错误处理程序几乎可以捕获所有内容。两个版本中的警告处理程序仅适用于开发。

此文章希望对大家有所帮助