0.New 的执行过程大致如下:
创建一个对象
将对象的 _ proto_ 指向 构造函数的 prototype
将这个对象作为构造函数的 this
返回该对象
1.请说一下vue的生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
2.vue是如何实现双向绑定的?
vue.js 则是采用数据劫持的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调
主要步骤:
1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
3.什么是 Promise
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
Promise对象有以下两个特点。
(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。
4.ES6新增的数组方法
https://blog.csdn.net/wbiokr/article/details/65939582
JS如何判断是否是数组?(除了通过isArray判断)
//通过Object.prototype.toString.call()判断
Object.prototype.toString().call() //可以获取到对象的不同类型,例如
let a = [1,2,3]
Object.prototype.toString.call(a) === '[object Array]';//true
//它强大的地方在于不仅仅可以检验是否为数组,比如是否是一个函数,是否是数字等等
//检验是否是函数
let a = function () {};
Object.prototype.toString.call(a) === '[object Function]';//true
//检验是否是数字
let b = 1;
Object.prototype.toString.call(a) === '[object Number]';//true
//甚至对于多全局环境时, Object.prototype.toString().call()也能符合预期处理判断。
5.cookie,localStorage和sessionStorage三者之间的区别
cookie数据始终在同源的http请求中携带,即cookie在浏览器和服务间来回传递。而localStorage和sessionStorage不会自动把数据发给服务器,仅在本地保存
数据的生命期:cookie可设置失效时间,默认是浏览器关闭。localStorage 始终有效,除非被清除。sessionStorage 仅仅在当前会话下有效,关闭页面或浏览器后被清除
6.什么是原型链?
Javascript是面向对象的,每个实例对象( object )都有一个私有属性(称之为 proto )指向它的构造函数的原型对象(prototype )。该原型对象也有一个自己的原型对象( proto ) ,层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。
7.说说你对this的理解
- this是一个关键字,它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。
- 作为纯粹的函数调用this指向全局对象
- 作为对象的方法调用this指向调用对象
- 作为构造函数被调用this指向新的对象(new会改变this指向)
- apply调用this指向apply方法的第一个参数
8.get跟post的区别
- get存储内容小,不能超过2kb,有限。文件上传只能有post。
- get 不安全显示在地址栏
- get 效率高,因为post需要加密和解密的过程,get不需要。
9.请说出你关于闭包函数的理解以及闭包函数带来的影响
闭包函数通常情况下是指函数里面再一次的嵌套另外的一个函数这种形式,而处于函数内部的函数可以获取外部函数的变量的值。
使用闭包函数会带来变量存储到内存,不会被释放 ,以及this指向的改变
和内存泄漏的问题等等。
10.onload跟ready的区别
1.$(document).ready()
执行时机:等DOM树加载完毕后就能执行
2.window.onload
执行时机:等网页中所有的资源加载完毕后(包括图片、flash、音频、视频),才能执行
11.'data-'属性的作用是什么?如何获取‘data-’属性的值?
data-属性是h5中用来自定义属性,通过dataset属性获取。
不是所有浏览器都支持,不支持用getAttribute
12.image和canvas在处理图片的时候有什么区别?
image是通过对象的形式描述图片的
canvas是通过专门的API讲图片绘制在画布上的
13.JS中的"=="转换规则
- number类型与string类型比较,string会转换为number类型
- null和undefined类型比较始终相等
- 布尔类型与其它任何类型进行比较,布尔类型将会转换为number类型
- number类型或string类型与object类型进行比较,number或者string类型都会转换为object类型
14. 回流跟重绘的区别
html 加载时发生了什么
在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等。
浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体
DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree,但区别很大,因为render tree能识别样式,render tree中每个NODE都有自己的style,而且render tree不包含隐藏的节点(比如display:none的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到 render tree中。我自己简单的理解就是DOM Tree和我们写的CSS结合在一起之后,渲染出了render tree。
什么是回流
当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建render tree。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。
什么是重绘
当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。
区别:
他们的区别很大:
回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如:添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变——边距、填充、边框、宽度和高度,内容改变
15.了解nodejs吗?请简要描述
nodejs是一款基于Chrome V8 引擎的Javascript运行环境。Nodejs使用了事件驱动、非阻塞式I/O的模型,使其轻量又高效。
16. 单页面应用的优缺点(SPA)
单页面的优点:
1,用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小
2,前后端分离
单页面缺点:
1,不利于seo
3,初次加载时耗时多
3,页面复杂度提高很多
17. v-show v-if 的区别
相同点:v-show和v-if都能控制元素的显示和隐藏。
不同点:
实现本质方法不同
v-show本质就是通过设置css中的display设置为none,控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素
18.vue中data为什么必须是个函数?
vue中data必须是函数是为了保证组件的独立性和可复用性,data是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变
19.为什么避免 v-if 和 v-for 用在一起
因为v-for的优先级比v-if的优先级高,所以每次渲染时都会先循环再进行条件判断,而又因为v-if会根据渲染条件为ture或false来决定渲染与否的,所以如果将v-if 和 v-for 用在一起会特别消耗性能