随笔
1.方法是和实例绑定的, 方法和属性的区别
2.动态绑定classstyle
3.computed计算属性,有缓存 set和get
4.let和var 块级作用域, for循环 i经过块级改了,但是函数有作用域,所以用闭包
5.v-on什么时候能省略方法的() 1.事件监听的时候,2没有参数、
6.组织事件冒泡@click.stop(详细参考vue修饰符.md)
7.v-if 需要有key来让虚拟dom区别数据显示
8.key的作用是高效的更新虚拟dom
1.根据html文件构建DOM树和CSSOM树。构建DOM树期间,如果遇到JS,阻塞DOM树及CSSOM树的构建,优先加载JS文件,加载完毕,再继续构建DOM树及CSSOM树。
2.构建渲染树(Render Tree)。构建渲染树,根据渲染树计算每个可见元素的布局,并输出到绘制流程,将像素渲染到屏幕上。
(渲染树(Render Tree)由DOM树、CSSOM树合并而成,但并不是必须等DOM树及CSSOM树加载完成后才开始合并构建渲染树。三者的构建并无先后条件,亦非完全独立,而是会有交叉,并行构建。因此会形成一边加载,一边解析,一边渲染的工作现象。)
3.页面的重绘(repaint)与重排(reflow,也有称回流)。页面渲染完成后,若JS操作了DOM节点,根据JS对DOM操作动作的大小,浏览器对页面进行重绘或是重排。
1、浏览器内核拿到内容后,渲染步骤大致可以分为以下几步:
2、解析HTML,构建DOM树
3、解析CSS,生成CSS规则树
4、合并DOM树和CSS规则,生成render树(DOM树和CSSOM树连接在一起形成render tree .‘渲染数’)
5、布局render树(Layout/reflow),负责各元素尺寸、位置的计算
6、绘制render树(paint),绘制页面像素信息
7、浏览器会将各层的信息发送给GPU,GPU会将各层合成(composite),显示在屏幕上
_
举例:就好像在百度搜索时,每次输入之后都有联想词弹出,这个控制联想词的方法就不可能是输入框内容一改变就触发的,他一定是当你结束输入一段时间之后才会触发。
_
举例:预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时,你不断点刷新点购买,可是总有一段时间你点上是没有效果,这里就用到了节流,就是怕点的太快导致系统出现bug。
本质上,webpack 是一个现代 JavaScript 应用程序的静态
模块打包器(module bundler)。当 webpack 处理应用程序
时它会递归地构建一个依赖关系图(dependency graph),其
中包含应用程序需要的每个模块,然后将所有这些模块打包
成一个或多个 bundle。
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有setting.json哪些模块和库是入口起点(直接和间接)依赖的。
1 | module.exports = { |
在Vue文件中的style标签上有一个特殊的属性,scoped。当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性,相当于实现了样式的模块化。
Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:
1 | <style scoped lang="less"> |
转译后:
1 | .example[data-v-5558831a] { |