Vue Loader 之 Scoped CSS 与热重载的影响

前情介绍

其实在学习已经使用Vue这么久以来从来没有认真的看过Vue Loader生态系统的详细介绍,之前在工作中使用第三方的UI插件的时候难免有时需要自定义一些样式,但是每次在实现的时候对于>>> , /deep/,还有新遇到的v-deep的用法原理都不是很了解,每次都是在三种方式中尝试,很是无脑,后来一次偶然的机会看到了Vue Loader中的油相关的介绍,当时没有详细的看,但是内心已经种下了一颗要系统学习一遍的种子,所以今天的任务就是过官网,并且在这个过程中记录下自己的笔记,废话不多说开始吧!

Vue Loader 是什么?

在了解什么是loader前,还是需要了解一下什么是webpack.

Vue Loader是一个webpack的loader,她允许我们以单文件组件的格式撰写Vue组件

• 在开发过程中可以使用热重载来保持状态
• 为每一个组件模拟出scooped css
• 允许在一个.vue文件中使用自定义块,并对其运用自定义的loader链

Vue Loader的使用

其实如果徐翔手动的设置webpack,我们在使用Vue CLI创建项目一个项目的脚手架,Vue CLI创建的项目会针对多数常见的开发需求进行预先的配置,做到开箱即可使用.

Scoped CSS

当style 标签有scoped属性时,他的css只作用于当前组件中的元素在编译结果中会再对应的样式属性名的后面加上一个[data-x-xxxx..]的为一标识

混用本地和全局样式

我们可以在一个文件中同时使用有scoped和非scoped的样式

<style scoped>
	/* 作用于当前的文件样式 */
</style>
<style>
	/* 作用于全局的样式 */
</style>
复制代码

嵌套组件的样式

在使用了scoped后,父组件的样式不会渗透到子组件中,不过子组件的根节点会同时受到父节点的scoped css和子组件的scoped css 的影响,这样的设计是为了让父组件可以从布局的角度调整子组件根元素的样式.

深度作用选择器

如果希望在scoped样式中的一个选择器能够作用的更深,影响子组件我们可以使用 >>>操作符,还可以使用>>>的别名/deep/或者::v-deep

注意

动态生成的内容

通过v-html创建的DOM内容不受scoped样式的影响,这时我们仍然可以使用深度作用选择器来为他们设置样式

留意

• scoped样式不能代替class,在浏览器渲染这种css选择器的方式,当在scoped中使用标签选择器是回慢很多,如果使用class或者id就会改善很多
• 在递归组件小心使用后代选择器, 对选择器 .a .b 中的css规则来说,如果匹配 .a的元素包含一个递归的子组件,则所有的子组件中的.b都会被这个规则匹配

CSS Modules

• Css modules的功能很单纯,只是加入了局部作用域和模块依赖,可以保证某个组件的样式不会受到其他组件的影响.
• css的规则都是全局的,任何一个组件额样式规则,都对整个页面有效.
• 产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会与其他的选择器重名
• 使用css modules就是讲calss名字都编译成哈希字符串.

热重载

“热重载”不只是简单的当我们在修改文件的是偶重新加载页面.而是启用热重载后,当我们修改.vue文件时,该组件的所有实例将在不刷新页面的情况下被替换,他甚至可以保存应用程序和被替换组件的当前状态,当你调整模板或者修改样式时,这极大的提高了开发的体验.

热重载对于不同文件的影响

• 当编辑的是一个<template>时,这个组件实例将就地渲染,并保留当前所有的私有状态,能够做到这一点是因为模板被编译成了新的无副作用的渲染函数.
• 当编辑一个组件的<script>时,这个组件实例将就地销毁并重新创建,(应用中其他组价的转态将会被保留),因为在script中可能会有一些带有副作用的生命周期钩子,所以在重新渲染替换为重新加载是必须的,这样可以保证组件行为的一致性,如果此时的组件带有全局的副作用,则整个页面将会被重新加载.
• 编辑<style>文件时,<style>会通过vue-style-loader 自行热加载,所以不会影响应用的状态

用法

当使用vue-cli创建项目的时候热重载是开箱即用, 默认也是打开的,当手动的配置工程的时候,如果配置热重载会在启动项目webpack-dev-sever --hot服务时自动开启