学会这些Vue开发技巧让你成为更好的工程师小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。 CSS 样式穿透修

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

CSS 样式穿透修改

说到这个问题是因为在Vue项目开发中经常使用第三方组,那么就避免不了修改第三方组件的样式，三由于Scoped属性的样式隔离，可能需要去除Scoped或是另起一个style。但是这些做法都会带来副作用，比如组件样式污染、写法不够优雅，样式穿透在css预处理其中才会生校。

在我的项目中为了解决这个问题我经常使用的是/deep/ ，还可以使用>>>来结局这一问问题：

<style scoped>\
外层 >>> .el-checkbox {\
display: block;\
font-size: 26px;\
\
.el-checkbox__label {\
font-size: 16px;\
}\
}\
</style>

<style scoped>\
/deep/ .el-checkbox {\
display: block;\
font-size: 26px;\
\
.el-checkbox__label {\
font-size: 16px;\
}\
}\
</style>

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

与其使用v-if，有时使用v-show来替代，会有更好的性能。
<div v-show="isShow">

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

如果你要切换的组件的渲染成本很高，那么这样做会更有效率。

反过来说，如果不需要立即执行昂贵的组件件，可以使用v-if，这样它就会跳过渲染它，而使页面的加载速度更快一些。

v-for中的解构

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

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

更广为人知的是，可以通过使用这样的元组从v-for中取出索引。

<li v-for="(movie, index) in [  'Lion King',  'Frozen',  'The Princess Bride']">
  {{ index + 1 }} - {{ movie }}
</li>

当使用一个对象时，可以这样使用 key：

<li v-for="(value, key) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  {{ key }}: {{ value }}
</li>

也可以将这两种方法结合起来，获取key以及属性的 index。

<li v-for="(value, key, index) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>

如何监听一个插槽的变化

有时我们需要知道插槽内的内容何时发生了变化。

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

不幸的是，Vue没有内置的方法让我们检测这一点。

然而，我的朋友Austin想出了一个非常干净的方法，使用MutationObserver来做这件事。

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。

export default {
  mounted() {
    // 当有变化时调用`update`
    const observer = new MutationObserver(this.update);
 
    // 监听此组件的变化
    observer.observe(this.$el, {
      childList: true,
      subtree: true
    });
  }
};

如何正确的从写子组件

Scoped CSS在保持内容整洁方面非常棒，而且不会将样式引入应用的其他组件中。

但有时你需要覆盖一个子组件的样式，并跳出这个作用域。

Vue有一个 deep 选择器：

<style scoped>
.my-component >>> .child-component {
  font-size: 24px;
}
</style>

注意：如果你使用像SCSS这样的CSS预处理器，你可能需要使用/deep/来代替。

使用v-for在指定范围内循环

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

<template>
    <ul>
        <li v-for="val in 6">Li #{{val}}</li>
    </ul>
</template>

渲染结果
Li #1
Li #1
Li #1
Li #1
Li #1
Li #1

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

使用watch监听数组和对象

使用watch最难控制的是，有时似乎不能正常触发。通常，这是应为我们试图监听数组或对象，但没有将deep设置为true

export default {
  name: 'ColourChange',
  props: {
    colours: {
      type: Array,
      required: true,
    },
  },
  watch: {
    // 使用对象语法，而不仅仅是方法
    colours: {
      // 这将让Vue知道要在数组内部寻找
      deep: true,
 
      handler()
        console.log('The list of colours has changed!');
      }
    }
  }
}

使用vue3的API会是这样的

watch(
  colours,
  () => {
    console.log('The list of colours has changed!');
  },
  {
    deep: true,
  }
);