vue笔记(持续更新)
Vue scoped
scoped解决了什么？
模块化编程下，在对应模块的js中import css，这个css仍然是全局。因此会产生css样式之间污染。scoped可以使css样式只作用于当前组件，解决了组件之间样式污染。给每个style都设置上scoped，相当于实现了样式的模块化。
官方解释：当style有scoped属性时，它的CSS只作用于当前组件中元素(解决样式冲突)
<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>
<!--
scoped 会自动添加一个唯一的 attribute (如 data-v-hash) 为组件内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成 .list-container[data-v-hash]:hover。
-->
例如：
<!-- scoped转译前 -->
<style lang="scss" scoped>
.test {
background: blue;
span{
color:red;
}
}
</style>
<!-- scoped转译后 -->
<style lang="css">
.test[data-v-ff86ae42] {
background: blue;
}
.test span[data-v-ff86ae42]{
color: red;
}
</style>
以前有个人在Vue提了个issue，style的scope使一些必要的css无效，然偶后尤大大亲自耐心的回答了，scope的功能是为了让css更规范，能更简单让css仅对本组件的内容起到作用而不影响其他组件，这样也是为了减少各组件之间的样式黏性，可以避免修改单组件样式而影响到整个项目众多组件的问题。反正能用外联css或公共css文件建立共有的css，所以我是非常建议使用scope但别穿透它
穿透scoped
为什么要穿透scoped？
通过scoped，组件的样式是被封装在组件范围内的，也就是说组件样式对外部组件是不可见的。这种封装样式的机制可以防止样式冲突和作用域污染，提高样式的可维护性。然而某些情况下，我们希望通过组件样式去修改或影响子组件内部的样式。
<template>
<div class="parent">
<child-component class="custom-class" />
</div>
</template>
<style scoped>
.parent /deep/ .custom-class {
/* 修改子组件的样式 */
}
</style>
使用scoped情况
在模板中使用两次style标签
<!-- 使用两次style分别控制 需要覆盖子组件的样式 和 只能本模块使用样式 -->
<style lang="scss">
/*添加要覆盖的样式*/
</style>
<style lang="scss" scoped>
/* 本模块样式 */
</style>
<!-- vue官网明确表示一个vue文件可以包含多个style标签 -->
scoped穿透
<!--使用 >>> 或者 /deep/ 操作符（Sass，less 之类的预处理器无法正确解析 >>>，可以使用/deep/）-->
<style lang="scss" scoped>
.box {
/deep/ input {
width: 166px;
text-align: center;
}
}
</style>
或者
<style lang="scss" scoped>
.box >>> input {
width: 166px;
text-align: center;
}
</style>
不使用scoped情况
-
使用全局样式：将样式定义在全局的CSS文件中，这样定义的样式将会被整个应用所共享。
-
使用CSS Modules：CSS Modules允许您在每个组件中定义独立的、局部作用域的样式，但仍然可以通过类名选择器来影响其他组件的样式
-
使用CSS预处理器：大多数CSS预处理器（如Sass、Less）都支持全局样式和变量。
总结
scoped穿透是一种非正式的语法，不是标准的CSS规范，因此在使用时要谨慎考虑其兼容性和易读性。
总而言之，scoped穿透在一定程度上打破了组件样式的封装性，允许父组件的样式影响到子组件内部的样式，但需要注意合理使用，避免引入样式的混乱和复杂性。
Vue nextTick
标签：nextTick,vue,样式,笔记,CSS,scoped,组件,css From： https://www.cnblogs.com/RatherBe/p/17481491.html为什么会存在nextTick
vue采用异步更新策略来提高性能，当修改Vue实力数据时，Vue并不会立即更新真实DOM，而是讲DOM更新操作推入一个队列中，在下一个事件循环周期中进行统一的更新。这样做可以有效地合并多次数据变更，避免频繁的DOM操作。然而，这也导致了一个问题：在某些情况下，我们需要在数据更新之后立即访问更新后的DOM。
nextTick作用
通过使用nextTick方法接收一个回调函数作为参数，并讲这个回调函数延迟到下次DOM更新循环结束后执行，确保DOM已经被更新。这样就能够安全地操作更新后的DOM元素，而不用担心获取到旧的值或状态。
nextTick实现原理
将传入的回调函数包装成异步任务，异步任务又分微任务和宏任务，为了尽快执行所以优先选择微任务；
nextTick 提供了四种异步方法 Promise.then、MutationObserver、setImmediate、setTimeout(fn,0)
这四种异步可以阅读nextTick源码解读。