var,let,const的区别
1、let和const是es6新增的用于声明变量的特性
2、const是声明常量,不可更改
3、let和const具有块级作用域,var没有
4、var有变量提升和预解析,let和const没有
5、var可以重复声明,let和const不可以重复声明
6、var没有暂时性死区,let和const有暂时性死区(暂时性死区指的是:在声明一个变量前,这个变量是不可用的,使用该变量会报错)
重绘和回流
重绘:简单来说就是重新绘画,当给一个元素更换颜色、更换背景,虽然不会影响页面布局,但是颜色或背景变了,就会重新渲染页面,这就是重绘。
回流:当增加或删除dom节点,或者给元素修改宽高时,会改变页面布局,那么就会重新构造dom树然后再次进行渲染,这就是回流。
回流必将引起重绘,但重绘不一定引起回流
什么时候引起回流
1、添加或者删除可见的DOM元素;
2、元素位置改变——display、float、position、overflow等等;
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;
5、页面渲染初始化;
6、浏览器窗口尺寸改变——resize事件发生时;
说说你对SPA单页面的理解,它的优缺点分别是什么?
- SPA是什么
- SPA( single page application )仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。
- 一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转
- 而页面的变化是利用路由机制实现 HTML 内容的变换,避免页面的重新加载。
- 优点
- 用户体验好,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染,这样相对减轻了服务器的压力
- 前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理
- 缺点
- 初次加载耗时多
- 不能使用浏览器的前进后退功能,由于单页应用在一个页面中显示所有的内容,所以,无法前进后退
- 不利于搜索引擎(SEO)检索:由于所有的内容都在一个页面中动态替换显示,所以不利于搜索引擎 。
vue中组件的data为什么是一个函数?而new Vue 实例里,data 可以直接是一个对象
Vue组件其实就是一个Vue实例。JS中的实例是通过构造函数来创建的,每个构造函数可以new出很多个实例,那么每个实例都会继承原型上的方法或属性。
Vue的data数据其实是Vue原型上的属性,数据存在于内存当中。Vue为了保证每个实例(组件)上的data数据的独立性,规定了必须使用函数,而不是对象。
因为使用对象的话,每个实例(组件)上使用的data数据是相互影响的。对象是对于内存地址的引用,直接定义对象的话,组件之间都会使用这个对象,这样会造成组件之间数据相互影响。
使用函数后,使用的是data()函数,data()函数中的this指向的是当前实例(组件)本身,每个实例(组件)之间的数据就不会相互影响了。
组件的data使用函数也是为了组件的复用,而 new Vue 的实例,是不会被复用的。