CSS3中有哪些新特性
- 新增各种CSS选择器 (: not(.input):所有 class 不是“input”的节点)
- 圆角 (border-radius:8px)
- 多列布局 (multi-column layout)
- 阴影和反射 (Shadoweflect)
- 文字特效 (text-shadow)
- 文字渲染 (Text-decoration)
- 线性渐变 (gradient)
- 旋转 (transform)
- 增加了旋转,缩放,定位,倾斜,动画,多背景
vue双向数据绑定的原理?响应式原理
Vue的响应式原理 核心是通过 ES5 的 Object.defindeProperty 进行数据劫持 然后利用 get 和 set 方法进行数据的获取和设置 这时的data中声明的属性都将被添加到 get 和 set 中 当读取* data*中的数据中 自动调用 get 方法 当修改数据时 或者数据发生改变时 自动调用 set 方法 去侦听检测数据的变化 同时会通知 观察者 Wacher 观察者 Wacher 自动重新触发 render 当前组件 (子组件不会重新渲染) 生成新的虚拟 DOM 树 Vue的框架会遍历并对比新旧虚拟DOM树上面的每个节点的差别 并记录下来 最后加载操作 将所有记录下来的节点 局部修改到真实的DOM树上
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体步骤:
第一步:需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和
getter 这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的 update() 方法,并触发Compile中绑定的回调,则功成身退。
第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
说一下Vue的生命周期
Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。
v-if 和v-show有什么区别?
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建,操作的实际上是dom元素的创建或销毁。
v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换它操作的是display:none/block属性。
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
async await 是什么?它有哪些作用?
async await 是es7里面的新语法、它的作用就是 async 用于申明一个 function 是异步的,而 await 用
于等待一个异步方法执行完成。它可以很好的替代promise 中的then
async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。当函数执行的时候,一旦遇
到 await 就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
什么是原型链?
每一个实例对象上有一个proto属性,指向的构造函数的原型对象,构造函数的原型
对象也是一个对象,也有proto属性,这样一层一层往上找的过程就形成了原型链。
什么是闭包?手写一个闭包函数? 闭包有哪些优缺点?
闭包(closure)指有权访问另一个函数作用域中变量的函数。简单理解就是 ,一个作用
域可以访问另外一个函数内部的局部变量.
作用:延长变量作用域、在函数的外部可以访问函数内部的局部变量,容易造成内层泄露,因为闭包中的局部变量永远不会被回收
组件中的data为什么要定义成一个函数而不是一个对象?
每个组件都是 Vue 的实例。组件共享 data 属性,当 data 的值是同一个引用类型的值时,改变其中一个会影响其他
常见的盒子垂直居中的方法有哪些请举例3种?
利用子绝父相定位的方式来实现
利用Css3的transform,
flex
this 的指向有哪些?
1、普通函数中的this指向window
2、定时器中的this指向window
3、箭头函数没有this,它的this指向取决于外部环境、
4、事件中的this指向事件的调用者
黑马程序员5、 构造函数中this和原型对象中的this,都是指向构造函数new 出来实例对象
6、类 class中的this 指向由constructor构造器new出来的实例对象
7、自调用函数中的this 指向window
什么是递归,递归有哪些优点或缺点?
递归:如果一个函数在内部可以调用其本身,那么这个函数就是递归函数。简单理解:函
数内部自己调用自己, 这个函数就是递归函数
优点:结构清晰、可读性强
缺点:效率低、调用栈可能会溢出,其实每一次函数调用会在内存栈中分配空间,而每个进程的栈的容
量是有限的,当调用的层次太多时,就会超出栈的容量,从而导致栈溢出。->性能
什么是深拷贝、什么是浅拷贝
请写至少三种数组去重的方法?(原生* js***)**
请写出至少两种常见的数组排序的方法(原生* js***)**
知道lodash吗?它有哪些常见的API?
http的请求方式有哪些?
get、post、put、delete等
清除浮动的方法有哪些
为什么要清除浮动,因为浮动的盒子脱离标准流,如果父盒子没有设置高度的话,下面的盒子就会撑上
来。
1.额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐)
2.父级添加overflow属性(父元素添加overflow:hidden)(不推荐)
3.使用after伪元素清除浮动(推荐使用)
4.使用before和after双伪元素清除浮动
常见的布局方法有哪些?他们的优缺点是什么?
图片懒加载是怎么实现的
vue中computed*和watch的区别是什么?
vue中是怎么实现父向子、子向父、兄弟之间的传值的?
父向子传值主要通过的是props属性来传值,props只读
子向父传值 $emit
兄弟组件传值 事件总线
什么vuex ,谈谈你对它的理解?
数据类型的判断有哪些方法,他们的优缺点及区别是什么
知道symbol吗
ES6 引入新的原始数据类型Symbol,表示独一无二的值
请描述一下ES6中的class类?
es6中的class可以把它看成是es5中构造函数的语法糖,它简化了构造函数的写法, 类的共有属性放到
constructor 里面
\1. 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
- 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
\3. constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自
动生成这个函数
\4. 多个函数方法之间不需要添加逗号分隔
\5. 生成实例 new 不能省略
\6. 语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function
\1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
\2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近
原则)
\3. 如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用 父类的构造函
数,super 必须在子类this之前调用
\7. 时刻注意this的指向问题,类里面的共有的属性和方法一定要加this使用.
\1. constructor中的this指向的是new出来的实例对象
\2. 自定义的方法,一般也指向的new出来的实例对象
\3. 绑定事件之后this指向的就是触发事件的事件源
\4. 在 ES6 中类没有变量提升,所以必须先定义类,才能
箭头函数有哪些特征,请简单描述一下它
移动端有哪些问题都是怎样解决的
post和get请求有哪些区别
GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符
POST:一般用于修改服务器上的资源,对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量
的值,也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
什么是同源策略?
所谓同源策略是浏览器的一种安全机制,来限制不同源的网站不能通信。同源就是域名、协议、端口一
致。
http状态码分别代表什么意思?
js 的数据类型有哪些?
js的数据类型分为基本数据类型(string、number、boolean、null、undefined、Object其中 Symbol 和 BigInt 是ES6 中新增的数据类型:)和复杂数
据类型(symbol )
基本数据类型的特点:直接存储在栈中的数据
复杂数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里
call 、apply、bind三者的异同*
共同点 : 都可以改变this指向; 不同点: call 和 apply 会调用函数, 并且改变函数内部this指向. call 和
apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递 bind 不会调用函数, 可以改变函
数内部this指向. 应用场景
\1. call 经常做继承.
\2. apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
\3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向
防抖和节流
防抖作用:对在短时间内多次触发事件的回调函数,只执行最后一次,或者只在最开始时执行。
以用户拖拽改变窗口大小,触发resize事件为例,在这过程中窗口的大小一致在改变,所以如果我们在resize事件中绑定回调函数,这个函数将会在拖拽的过程一直触发,如果回调函数过于复杂难免不会造成页面卡顿,而且这种情况在多数情况下也是无意义的,还会造成资源的大量浪费。
代码逻辑:
-
在resize事件上绑定处理函数,这时debounce函数会立即调用,实际上绑定的函数时debounce函数内部返回的函数。
-
每一次事件被触发,都会清除当前的timer定时器然后重新设置,到时间调用。
-
只有在最后一次触发resize事件,才能在delay时间后执行。
节流作用:类似于防抖,不过节流是在一段时间之内只允许该函数执行一次
定时器实现
时间戳实现
以上两重情况都是用于高频触发事件,根据不同场景选择合适的用法。对于有停顿的高频触发事件建议选择防抖,然而对于高频触发并且连续的事件,选择节流。
MVVM 和 MVC 区别是什么?哪些场景适合?