前端人必备的Vue小技巧|建议收藏

​Vue是一套响应式的 JavaScript 开发库，是当下非常流行的 JavaScript 技术开发框架之一。vue 作为目前前端三大框架之一，对于前端开发人来说是一项必备技能。相比于其他大型框架，Vue更加灵活，开发者既可以选择使用Vue来开发一个全新项目，也可以将Vue引入到一个现有的项目中。代码简洁、上手容易，使得Vue深受前端人的青睐。

所以，对于每一个前端人来说，掌握和熟练运用Vue是非常重要的。而在工作中去学习和使用一些Vue的小技巧，不仅能够帮助我们更快更好地完成工作，也能让我们的代码看起来更加专业。

 那么，下面小编就为大家总结了一些前端人在工作中会常用到的Vue小技巧，建议收藏哦~

一、把 prop 限制为类型列表

当你在 prop 定义中需要使用到 validator 选项时，可以将 prop 限制为一组特定的值：

export default {

  name: 'Image',

  props: {

    src: {

      type: String,

    },

    style: {

      type: String,

      validator: s => ['square', 'rounded'].includes(s)

    }

  }

};

复制代码

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

二、使用引号观察嵌套值

只需使用引号就可以轻松地直接查看嵌套值，这对于处理深度嵌套的对象非常有用。

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

三、require.context()

如页面需要导入多个组件，可以直接利用require.context写成下面这样，来避免原始写法中出现大量重复代码的情况。

const path = require('path')

const files = require.context('@/components/home', false, /\.vue$/)

const modules = {}

files.keys().forEach(key => {

  const name = path.basename(key, '.vue')

  modules[name] = files(key).default || files(key)

})

components:modules

四、 模板标签的另一种用途

该template标签可以在模板内的任何地方使用，以更好地组织代码。我们可以用它来简化v-if逻辑，有时v-for也是。我们可以使用template标签对元素进行分组，并将他们提升v-if到template标签本身：

  

五、多文件单文件组件

这是 SFC 的一个鲜为人知的功能，如果你需要共享样式、文档或其他任何内容，可以像使用常规 HTML 文件一样导入文件，这会很方便，也非常适合那些超长组件文件。

六、检测元素外部（或内部）的点击

有时我们需要检测点击是发生在特定元素el的_内部_还是_外部_。这个时候我们通常会使用到下面这个方法：

window.addEventListener('mousedown', e => {
  // 获取被点击的元素
  const clickedEl = e.target;

  // `el` 是你正在检测外部点击的元素
  if (el.contains(clickedEl)) {
    // 单击“el”内部
  } else {
    // 在`el`之外点击
  }
});

七、在 Vue 中循环一个范围

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

显示效果：

项目#1

项目#2

项目#3

项目#4

项目#5

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

八、 覆盖子组件的样式

Scoped CSS 比较容易保持整洁，并且不会意外地将样式渗入应用程序的其他部分。但有时你需要覆盖子组件的样式，并突破该范围。Vue 有一个deep专门用于此的选择器（如果你使用的是 SCSS 之类的 CSS 预处理器，则可能需要改用/deep/）。

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

九、观察slot的变化

有时我们需要知道slot内的内容什么时候发生了变化，而 Vue 没有内置的方法来检测这一点，这种时候使用突变观察器是一种非常简洁的方法。

export default {
  mounted() {
    // 当事情发生变化时调用`update`
    const observer = new MutationObserver(this.update);

    // 观察这个组件的变化
    observer.observe(this.$el, {
      childList: true,
      subtree: true
    });
  }
};

十、单作用域 slot 的简写

Scoped slot 比较有趣，但为了使用它们，你也必须使用很多template标签。为了避免使用很多template标签，我们可以使用单个作用域slot，会更加地简单直接。

  

掌握并且熟练运用上面这十个Vue使用中的小技巧，不仅能够帮助你更快更好地完成工作，还能让你的代码看起来更加专业简洁。

 最后，在我们的工作中脚踏实地是非常重要的，但是找对方法、掌握技巧也同样重要。我们在工作时不能只是一味地去想应该怎么完成工作，更应该去思考怎样既能完成工作，又能让我们的工作变得更加轻松。成功者和普通人的区别也往往体现在此。