发表于: 2020-09-02 22:37:49
1 2253
今天完成的事情:
1.回顾知识点
明天计划的事情:
1.回顾知识点
遇到的问题和收获:
html是怎么渲染的
1.解析html文件,创建DOM树 自上而下解析,遇到任何样式(link、style)和脚本(script)都会阻塞
css加载不会阻塞html文件的解析,但会阻塞dom的渲染
css加载会阻塞后面js语句的执行
js会阻塞html的解析和渲染
没有defer和async标签的script会立即加载并执行
有async标签的js,js的加载执行和html的解析和渲染并行
有defer标签的js,js的加载和html的解析和渲染并行,但会在html解析完成后执行,在触 发DOMContentLoaded事件前执行
DOMContentLoaded和onload的区别:DOMContentLoaded在html解析完毕后执行,loload在页面完全加载完成后执行(包括样式和图片)
2.解析css,生成CSSOM,css对象模型
3.dom和css合并,构建渲染树(Render Tree)
4.布局(Layout)和绘制(Paint),重绘(repaint)和重排(reflow/回流)
重绘:根据元素的新属性重新绘制,使元素呈现新的外观
重排:当渲染树中的一部分因为元素的规模尺寸,布局,隐藏等改变而需要重新构建
重排必定会引发重绘,但重绘不一定会引发重排
Vue组件间的通信方式
通信种类
父组件向子组件通信
子组件向父组件通信
隔代组件间通信
兄弟组件间通信
实现通信的方式:
props
vue自定义事件
消息订阅与发布
vuex
slot
方式1:
通过一般属性实现父向子通信
通过函数属性实现子向父通信
缺点:隔代组件和兄弟组件间通信比较麻烦
方式2:
vue内置实现,可以代替函数类型的props
绑定监听:<Mycomp @eventName=‘“callback”>
触发(分发)事件:this.$emit(“eventName”,data)
缺点:只适合于子向父通信
方式3:消息订阅与发布
需要引入消息订阅与发布的实现库:如pubsub-js
订阅消息:PubSub.subscribe(‘msg’,(msg,data)=>{})
发布消息:PubSub.publish(‘msg’,data)
优点:此方式可用于任意关系组件间通信
方式4:vuex
是什么:vuex是vue官方提供的集中式管理vue多组件共享状态数据的vue插件
优点:对组件间关系没有限制,且相比于pubsub库管理更为集中,更方便
方式5:slot
是什么:专门用来实现父向子传递带数据的标签
子组件
父组件
注意:通信的标签模板是在父组件中解析好后再传递给子组件的
vuex管理状态的机制
对vuex的基本理解
是什么:vuex是一个专门为vue.js应用程序开发的状态管理的vue插件
作用:集中式管理vue多个组件共享的状态和从后台获取的数据
评论