v-model的原理？
v-model本质上就是语法糖，即利用v-model绑定数据后，其实就是既绑定了数据，又添加了一个input事件监听
• 双向数据绑定
o VM 改变 V随之改变
o V改变， VM也随之改变
• v-model只用于表单
o 理由： v-model默认绑定value属性
• 技巧： 看到表单直接 v-model
v-if和v-show的区别？
相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。
vue组件通信
父子组件通信：
• 父组件将自己的数据同 v-bind 绑定在 子组件身上
• 子组件通过 props属性接收
子父组件通信：子父组件通信
• 是通过自定义事件
o 事件的发布
通过绑定元素身上实现
o 事件的订阅
通过this.$emit触发
非父子组件通信：
ref链 和 bus事件总线
非常规手段进行组件通信 【 不推荐 】
多组件状态共享 【 vuex 】
重绘和回流
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元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变
继承的方式
1.借助构造函数实现继承
原理：通过call()函数修改 this 指向，从而实现将父类属性挂载到子类实例中
2.借助原型链实现继承（最通用的方式）
原理：将子类的prototype属性赋值为父类实例对象，则子类的_proto_属性继承父类
call、apply、bind三者之间的区别
Call:
当call方法执行的时候，内部处理了一些事情
1.首先把要操作的函数中的this关键字变为call方法第一个传递的实参
2.把call方法第二个及之后的实参获取到
3.把要操作的函数执行，并且把第二个以后传递进来的实参传递给函数
Apply:
apply把需要传递给fn的参数放到一个数组（或者类数组）中传递进去，虽然写的是一个数组，但是也相当于给fn一个个的传递
Bind：
bind：语法和call一模一样，区别在于立即执行还是等待执行，bind不兼容IE6~8
深拷贝和浅拷贝
深拷贝和浅拷贝的区别
1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”
1.直接遍历
2. slice()
3. concat()
4.ES6的Object.assign
5.ES6扩展运算符：
6.JSON.parse(JSON.stringify(XXXX))
7.递归
8.immutable
闭包
它是出现在JS中的特有的一种函数结构（一种函数嵌套用法）
三个特征：
函数嵌套函数
内部函数使用了外层函数的局部变量
内层函数被返回到外部在外部调用
闭包的作用
隔离作用域避免全局污染
保护具有共享意义的变量 为其提供相关的操作接口（function）
闭包的缺点：
闭包储存的变量一直储存在内存中不被释放
大量使用闭包浪费资源 占据内存空间（栈溢出）（递归循环）
解决副作用方案：
• 变量使用结束后删除（var a = 1）
- a = null
- var obj = { a: 1} 最快最好的 解决办法就是在代码运行完之后，对象设置为空，从而清楚缓存的变量。
本地缓存和cookie的区别
sessionStorage 和 localStorage \ cookie 的区别：
- 存在时间
- 存储量大小
- 5M(sessionStorage 和 localStorage)
- 3.8K-4.2K
- 使用：
- 内置方法 getItem setItem clear removeItem （sessionStorage 和 localStorage）
- 内置事件： storage（sessionStorage 和 localStorage）
- session：session是网站用户登陆的会话 session是存储在服务器上的，并且存活时间较短 session主要作用于大型网站，银行，金融，支付类等 session需要占用大量的服务器的资源 session的应用范围：会话劫持
-
cookie：cookie是网站用户登陆的凭据（浏览器的记住密码的功能就是通过与浏览器中保存的cookie进行验证后进行登录的） cookie是存储在本地的，并且cookie存活时间有长有短 cookie主要作用于小型网站 cookie的拓展手法有：cookie盗取，cookie修改，cookie欺骗 cookie的应用范围：越权漏洞，cookie伪造登陆等 cookie的安全性没有session高，但cookie不需要占用服务器的资源
vue数据驱动的原理
vuejs在实例化的过程中，会对实例化对象选项中的data 选项进行遍历，遍历其所有属性并使用Object.defineProperty 把这些属性全部转为 getter/setter。
同时每一个实例对象都有一个watcher实例对象，他会在模板编译的过程中,用getter去访问data的属性，watcher此时就会把用到的data属性记为依赖，这样就建立了视图与数据之间的联系。
当之后我们渲染视图的数据依赖发生改变（即数据的setter被调用）的时候，watcher会对比前后两个的数值是否发生变化，然后确定是否通知视图进行重新渲染这样就实现了所谓的数据对于视图的驱动。
删除节点
removeChild() 方法删除指定节点
vue路由
vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？
• hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。 #/home
• history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home
• abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【 这个模式不常用 】
• hash/history 常用于浏览器端，abstract用于服务端
es6新特性
1.不一样的变量声明：const和let
2.模板字符串
3.箭头函数（Arrow Functions）
4. 函数的参数默认值
5.Spread / Rest 操作符 即 …
6.二进制和八进制字面量
7.对象和数组解构
8.对象超类
9.for…of 和 for…in
10.ES6中的类 即class语法
promise的理解
ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。
promise是为解决异步处理回调金字塔问题而产生的
Promise的特点
1、Promise对象的状态不受外界影响
1）pending 初始状态
2）fulfilled 成功状态
3）rejected 失败状态
Promise 有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态
2、Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending变成fulfilled或者由pending变成rejected
Promise的缺点
1）无法取消Promise,一旦新建它就会立即执行，无法中途取消
2）如果不设置回调函数，Promise内部抛出的错误，不会反映到外部
3）当处于pending状态时，无法得知目前进展到哪一个阶段，是刚刚开始还是即将完成
Promise在哪存放成功回调序列和失败回调序列？
1）onResolvedCallbacks 成功后要执行的回调序列 是一个数组
2）onRejectedCallbacks 失败后要执行的回调序列 是一个数组
以上两个数组存放在Promise 创建实例时给Promise这个类传的函数中，默认都是空数组。
每次实例then的时候 传入 onFulfilled 成功回调 onRejected 失败回调，如果此时的状态是pending 则将onFulfilled和onRejected push到对应的成功回调序列数组和失败回调序列数组中，如果此时的状态是fulfilled 则onFulfilled立即执行，如果此时的状态是rejected则onRejected立即执行
上述序列中的回调函数执行的时候 是有顺序的，即按照顺序依次执行
垃圾回收机制原理
解决内存的泄露，垃圾回收机制会定期（周期性）找出那些不再用到的内存（变量），然后释放其内存。
现在各大浏览器通常采用的垃圾回收机制有两种方法：标记清除，引用计数。
兼容问题有哪些
- 获取滚动距离
document.documentElement.scrollTop ()
document.body.scrollTop() ==> 兼容IE - 获取非行间样式
getcomputedStyle() 参数1：当前对象 参数2：伪类选择器，通常不会使用，用false代替
currentStyle() 【语法】：对象.current[attr] - 事件中兼容性问题
var e = e || event； - 找到事件源
e.target || e.srcElement ==> 例如点击事件 ，则获取的是点击位置标签名(大写) - 获取按下的键盘码
e.keyCode || e.which - 阻止事件冒泡
e.stopPropagation() || e.cancelBubble - 阻止浏览器默认行为(例如点击右键出来菜单栏)
e.preventDefault() || e.returnValue = false - DOM2级监听事件兼容
addEventListener removeEventListener
attachEvent detachEvent ===> IE兼容 -
创建ajax对象 var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP")
三次握手和四次挥手
媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
BOM对象有哪些
1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
2、document对象，文档对象；
3、location对象，浏览器当前URL信息；
4、navigator对象，浏览器本身信息；
5、screen对象，客户端屏幕信息；
6、history对象，浏览器访问历史信息；
路由钩子函数
• 监听整个项目的路由变化情况 全局的前置守卫router.beforeEach(fn)
监听某个路由的变化情况 路由的独享守卫const router = new VueRouter()直接定义
• 监听的路由组件的路由变化情况 组件内的导航守卫beforeRouteEnter((to,from,next)=>{})
Vuex
Vuex称为Vue的状态管理工具，也是多组件状态共享的工具
Vuex相当于是Vue的一个集中式的存储仓库
什么时候用： 打算开发中大型应用
集中式数据管理, 一处修改，多处使用
• Vuex的核心组成部分有三个，分别为： actions 、 state 、 mutations
o actions表示动作的创建者，它的作用是创建动作，然后发送动作， 用于用户交互、后端数据交互
距离： 一个用户点击了登陆按钮
o mutations 表示动作的出发者，它的作用是用来修改数据 -更新视图
o state它是数据的存储者，它的作用是定义数据【 状态 】
• 后端数据交互写在actions中
• vuex调试工具主要调试的mutations
• vuex是流程化执行的，符合单向数据流思维
**短路逻辑
== 和 ===的区别
原型和原型链
原型是JS中的对象，用于保存函数实例的公有属性。
原型链是指原型、对象、函数之间的关系链。（个人理解）
vue的key的作用**
需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们。
vue的计算属性
computed 是Vue中的一个选项
计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是它把新的数据缓存下来了，当其他的数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。
扫一扫
844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
