vue $nextTick & 样式私有化

$nextTick

先updated中更新,再nextTick

状态更改做什么事情:

updated

$nextTick

同步执行完之后,把当前放到队列中

vue $nextTick & 样式私有化_第1张图片

vue $nextTick & 样式私有化_第2张图片

$forceUpdate->sub.update()  // 把更新操作放在队列里面

vue $nextTick & 样式私有化_第3张图片vue $nextTick & 样式私有化_第4张图片

队列机制

vue $nextTick & 样式私有化_第5张图片

基于发布订阅模式,callbacks队列

更新完毕后会依次执行

样式私有化

没有加scoped,都是全局样式

人为控制:最外层组件类名的唯一性

scoped样式私有化原理:

  1. 组件id:data-v-xxx,
  2. template中各dom元素;组件根节点
  3. style中每个类都会加上属性选择器

vue $nextTick & 样式私有化_第6张图片

整套在进行单文件编译的时候,视图编译的时候

vue $nextTick & 样式私有化_第7张图片

你可能感兴趣的:(前端,javascript,html)