vue2.x(scoped-style)

vue中如何做到局部style不污染全局样式？说说它的原理？

① 在一般的开发过程中 我们使用scoped来标识当前组件的局部样式

② scoped属性是HTML5中的新属性 属性值是一个布尔属性 若使用该属性 则样式仅仅应用到style元素的父元素及其子元素 但是目前就只有firefox支持这个特性 其他浏览器都不支持

<div>
    <style type="text/css" scoped>
        h1{color:red}
        p{color:blue}
    </style>
    <h1>我是红色字体h1</h1>
    <p>我是蓝色字体p</p>
</div>
<div>
    <h1>我是默认颜色h1</h1>
    <p>我是默认颜色p</p>
</div>

③ 在vue中使用原理：

其实这个属性一般我们在使用单文件.vue组件进行开发时使用 也就是说下面这种模式
<template></template>
<script><script>
<style lang='scss' scoped></style>
那就说明其实不是vue给我们作了scoped局部样式的处理 而是插件"vue-loader"作的处理

源码vue-loader/lib/loaders/stylePostLoader.js中 我们可以到最终渲染在dom上的自定义属性data-v-xxx 由vue-loader操作生成scopeId最后在vue源码中使用

同理style中的lang属性 来指定我们使用什么预处理css 如：scss sass less stylus等等均在vue-loader中处理lang字段最后在动态require引入指定的预处理css loader插件

④ 深度作用选择器：

通常情况下：
<style scoped>
.a >>> .b {
    color:red;
}
</style>
若使用类似于sass这类预处理无法解析>>>
<style scoped>
// scss
/deep/ .a .b{
    color:blue;
} 
// sass
.a .b::v-deep{
    color:yellow;
}
</style>

⑤ 除了scoped生成局部样式还有什么方式来实现样式作用域？

vue-loader还提供了css modules模式来进行设置局部样式 具体可以看配置项。

⑥ 关于热重载

最关键的就是状态保留：（配合webpack插件webpack-dev-server --hot使用热更新）

​ 编辑组件<template> — 组件实例就地重新渲染 — 模板被编译成了新的无副作用的render函数

​ 编辑组件<script> — 实例就地销毁且重新创建（组件状态保留是因为script中包含带有副作用生命钩子，若关联了全局副作用则整个页面重新reload）

​ 编辑组件<style> — 会通过vue-style-loader自行热加载 不影响组件状态

vue中watch的属性或者methods的方法能使用箭头函数来定义吗？为什么？

不能 因为不管在watch或methods的方法中我们都想以vue的实例来操作 若一旦我们使用箭头函数 则在非严格模式下 this绑定的是父级作用域window 而在严格模式下this是undefined