uniapp+vue面试题（持续更新中~）

开发中遇到的坑（uniapp）

百度引入静态图片资源不支持绝对路径。只能用相对路径。
不同小程序的登录可能不兼容，要使用小程序平台自己的登录方法（uni.login）
编辑器打正式包发布有时会出现bug，但本地运行没有问题，重新打包之后解决
图片大于40kb小程序无法显示本地图片，只能另寻方法。
小程序无法通过 document 获取 DOM 节点信息（只能用uni.createSelectorQuery()）
uniapp中使用 uni.chooseImage选择调用相机拍照的图片，会被保存在系统相册中（官方给的回答是：此功能调用的是系统拍照模块，所以会保存到系统相册中。暂不支持不保存到系统相册，除非订制使用uni原生插件实现）
uniapp小程序项目，不支持用调用本地资源照片来作为背景图使用（需要使用http调用）

js原型和原型链是：

原型，所有的函数默认都有一个“prototype”这样公有且不可枚举的属性，它指向的对象就是原型。
原型链，当访问对象的属性或方法时，首先对象会从自身去找，找不到就会往原型中去找，也就是它构造函数的“prototype”中，如果原型中找不到，即构造函数中也没有该属性，就会往原型后面的原型上去找，这样就形成了链式的结构，称为原型链。

跨域和同源策略

1、JSONP，主要依赖的是script标签不受同源策略影响，src指向某一个接口的地址，同步需要传递callback回调函数名字，这样当接口调用成功后，本地创建的全局回调函数就会执行，并且接收到数据。不使用img标签的原因是因为img标签无法执行js语句

2、CORS，依赖服务端对前端的请求头信息进行放行，不做限制。

3、代理访问，前端访问不存在跨域问题的代理服务器，代理服务器再去访问目标服务器（服务器之间没有跨域限制）

Redux
redux是一个专门做状态管理的js库（不是react插件库）

它可以用在react，angular,vue等项目中，但基本与react配合使用（某个组件的状态，需要让其他组件可以随时拿到（共享），一个组件需要改变另一个组件的状态（通信））

和vuex类似，就相当于一个项目里的存放数据的store。资源状态共享，在vue的项目里一般都使用vuex

Vue生命周期

创建阶段

beforeCreate

created

挂载阶段

beforeMount

mounted

销毁阶段

beforeDestroy

destroyed

更新

beforeUpdate

Updated

激活

activated

deactivated

map和forEach的区别

这两个都是数组的方法，也都能起到遍历数组的作用，区别就是map·可以返回一个新数组，新数组中的每一个元素，都可以在遍历数组的过程中，根据当前数组的每一个元素来进行创建。

跨域问题含义及解决办法
浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。

JSONP：利用同源策略对 script 标签不受限制,不过只支持GET请求

CORS：实现 CORS 通信的关键是后端，服务端设置 Access-Control-Allow-Origin 就可以开启，备受推崇的跨域解决方案，比 JSONP 简单许多

Node中间件代理或nginx反向代理：主要是通过同源策略对服务器不加限制

vue-cli代理跨域：devServer

sass和 scss的区别

scss只是sass的一个语言版本，.scss文件的特点是层级靠{}来区分，.sass文件的特点的层级靠缩进来区分

vue中组件模板为什么只有一个根元素

Vue3中已经优化了这个问题，组件的模板内部可以有多个根元素，这是因为vue对模板编译的语法做了优化，之前2.0的时候组件在编译模板的时候会以最外面的根元素作为虚拟DOM的根结点进行编译，Vue3中以最外层的组件模板的template标签作为根元素进行编译。

线程和进程的区别

一个应用程序可能会开启多个进程，进程之间数据不共享，一个进程内部可以开启多个线程，线程之间的数据可以共享的，所以多线程的情况下，往往要考虑的是线程间的执行顺序问题。

什么是虚拟DOM

现代的框架为了减少真实DOM的操作，提高网页的性能，创造出来的一种DOM渲染机制，就是虚拟dom机制。

前端的渲染的流程就变成了，先通过逻辑根据模板去生成虚拟dom结构，这是一段用于表现真实DOM渲染情况的JS对象，然后将其根据规则渲染成真实DOM在页面上。

{ tag: '', attrs: { }, content: '...' }

当数据发生变化的时候，会根据当前的虚拟dom结构生成一个新的虚拟dom结构（注意，每次生成的都是完整的虚拟dom树结构，不过不需要担心创建新的虚拟dom结构的成本，因为在创建的过程中还是回大量复用的），然后将两个虚拟dom树进行对比，然后根据规则对需要更新的部分进行更新渲染。

这样就大量的减少了真实DOM的操作，因为在更新、对比的过程中进行了很多的合并操作。

简述浏览器的渲染过程，重绘和重排在渲染过程中的哪一部分？

基本流程包括：解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树重绘：元素的视觉表现属性被改变即触发重绘，如visibility、opacity ，不会影响到 dom 结构。改变某个元素的背景色、文字颜色、边框颜色等等

不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。重排/回流：就是渲染树的一部分必须要更新，并且节点的尺寸发生了变化。重排也会触发重绘。

常见情况：

1) DOM 操作,添加或者删除可见的DOM元素等

2) 元素位置改变

3) 修改 width、display 等 CSS 属性

4) 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变

5) 浏览器窗口变化（滚动或缩放）

6) 页面渲染初始化

注意：重排(回流)必将引起重绘，而重绘不一定会引起回流。 display:none会触发reflow，而visibility:hidden只会触发repaint，因为没有发现位置变化。

localstorage 与 cookie 的区别是什么？

存储大小：

cookie：一般不超过4K（因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识）

localStorage：5M或者更大数据有效期

存储时间：

cookie：一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了时间，cookie就会存放在硬盘里，过期才失效

localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除，因此用作持久数据应用场景

cookie：判断用户是否登录过网站，以便实现下次自动登录或记住密码；保存事件信息等

localStorage：常用于长期登录（判断用户是否已登录），适合长期保存在本地的数据

简述 ES6 的新特性

...、箭头函数、promise、async/await、let和const、set集合、导入improt 导出export default、smybol新的基本类型

vw和百分比有什么区别？
百分比有继承关系，继承至父级；vw只和设备的宽度有关系；

行内元素有哪些？块级元素有哪些？空(void)元素有哪些？行内与块级元素的区别？
行内元素有：a b span img strong select input;
块级元素有：div h1 h2 h3 h4 h5 ul ol li dt dd p;

行内元素：设置宽高无效；可以设置水平方向的margin和padding属性，不能设置垂直方向的margin和padding；不会自动换行；
块级元素：可以设置宽高；设置margin和padding都有效；可以自动换行；多个块状，默认排列从上到下

空元素：即没有内容的html元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签；常见的有：br hr img input link meta。鲜见的有：area base col colgroup param

如何让谷歌浏览器支持小字体

// 利用缩放来让字体变小，字体为12px的时候就小不了了。

.small-font{transform: scale(0.5); -webkit-transform:scale(0.5);}

内存中的堆和栈

栈：先进后出，自动分配释放

堆：先进先出，手动释放，容易内存泄漏基本数据类型：null、undefined、String、Number、Boolean、Symbol(ES6) 基本数据类型可以直接访问

按值进行分配，存放在**栈内存**中的简单数据段

引用型：OBject，存放在**堆内存**中，实际栈保存的是一个指针，这个指针指向另一个位置（**堆内存**）

防抖与节流

函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
应用场景：文本输入的验证；限制鼠标连击触发；

function debounce(fn, delay) {

    let timer;

    return function () {

        let args = arguments;

        if (timer) {clearTimeout(timer);}

        timer = setTimeout(()=> {fn.apply(this, args); }, delay);

    };

}

函数节流：每隔一段时间，只执行一次函数。
应用场景：滚动加载，加载更多或滚到底部监听。搜索联想功能。

function throttle(fn, delay) {

    let timer;

    return function () {

        let _this = this;

        let args = arguments;

        if (timer) {return;}

        timer = setTimeout(function () {

            fn.apply(_this, args);

            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假， throttle触发可以进入计时器

        }, delay)

    }

}

什么是闭包，什么是立即执行函数？

闭包：定义在一个函数内部的函数（方法里面返回方法）。

闭包的使用场景：settimeout、回调、函数防抖、封装私有变量

闭包存在的意义是什么？(1) 延长变量的生命周期；(2) 创建私有环境

立即执行函数：声明一个函数，并马上调用这个匿名函数就叫做立即执行函数；也可以说立即执行函数是一种语法，让你的函数在定义以后立即执行；

立即执行函数的作用：1.不必为函数命名，避免了污染全局变量。2.立即执行函数内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。3.封装变量。

箭头函数和普通函数有什么区别?
        (1). 箭头函数更加简洁；
        (2). 箭头函数不会创建自己的this，所以它没有自己的this，它只会在自己作用域的上一层继承this，所以箭头函数中的this指向在它定义时就确认了，之后不会再改变，所以箭头函数的this值永远不会改变；
        (3). call()、apply()、bind()等方法不能改变箭头函数this的的指向；
        (4). 箭头函数不能作为构造函数使用；
        (5). 箭头函数没有自己的arguments；
        (6). 箭头函数没有prototype(原型)，原型是undefined；

get请求传参长度的误区
HTTP协议从未规定GET/POST的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。
(1) HTTP协议未规定GET和POST的长度限制
(2) GET的最大长度显示是因为浏览器和web服务器限制了URL的长度
(3) 不同的浏览器和WEB服务器，限制的最大长度不一样
(4) 要支持IE，则最大长度为2083byte，若只支持Chrome，则最大长度为8182byte

Vuex介绍

vuex是专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储，管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

state 数据存贮（this.$store.state获取）

getter state的计算属性（）

mutation 更改state中状态的逻辑同步操作（this.$store.commit）

action 提交mutation 异步操作（通过this.$store.dispatch来执行）

model 模块化

this.$store.commit(‘user/xxx’)

this.$store.dispatch(‘user/xxx’)

DOM操作与BOM操作
DOM操作含义：例如：document.getElementById 就是dom操作
DOM事件模型和事件流
        DOM事件模型分为捕获和冒泡。一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。
        （1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段；
        （2）目标阶段：真正的目标节点正在处理事件的阶段；
        （3）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。
如何阻止冒泡？
        通过 event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。

事件代理(事件委托)：由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理。
事件代理优点：使代码简洁；减少浏览器的内存占用；

BOM操作
BOM（浏览器对象模型）是浏览器本身的一些信息的设置和获取，例如获取浏览器的宽度、高度，设置让浏览器跳转到哪个地址。

例如：window.screen对象：包含有关用户屏幕的信息
        window.location对象：用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面
        window.history对象：浏览历史的前进后退等
        window.navigator对象：常常用来获取浏览器信息、是否移动端访问等等

New操作符做了什么事情?
(1) 创建了一个新对象；
(2) 将对象与构造函数的原型链连接起来；
(3) 将构造函数中的this绑定到新建的对象上；
(4) 根据构造函数返回类型做判断，如果是值类型，返回创建的对象；如果是引用类型，返回这个引用类型的对象；

宏队列和微队列
宏队列，macrotask，也叫tasks。例如：setTimeout、setInterval、DOM事件、AJAX请求

微队列，microtask，也叫jobs。例如：Promise、async/await

微任务 > DOM渲染 > 宏任务

在地址栏里输入一个地址回车会发生那些事情？
        (1) 解析URL
        (2) 缓存判断
        (3) DNS解析
        (4) 获取MAC地址
        (5) TCP三次握手
        (6) HTTPS握手
        (7) 返回数据
        (8) 页面渲染
        (9) TCP四次挥手

常见的检测数据类型的几种方式?
        (1) typeof 其中数组、对象、null都会被判断为Object，其他判断都正确
        (2) instanceof 只能判断引用数据类型,不能判断基本数据类型
        (3) constructor 它有2个作用一是判断数据的类型，二是对象实例通过constructor对象访问它的构造函数。需要注意的事情是如果创建一个对象来改变它的原型,constructor就不能来判断数据类型了
        (4) Object.prototype.toString.call() 使用 object 对象的原型方法 tostring 来判断数据类型

instanceof和typeof的区别：
instanceof：返回值为布尔值。用于判断一个变量是否属于某个对象的实例。

typeof：返回值是一个字符串，用来说明变量的数据类型。一般只能返回如下几个结果： number, boolean, string, function, object, undefined。

javascript 的 typeof 返回哪些数据类型（至少六个）检测类型如下：

string、 number、 boolean 、undefined 、object 、function 、symbol（ES6之后新增的类型）

将类(伪)数组转成数组

const args = Array.from(arguments);
const args = [...arguments];
const args = [].slice.call(arguments);
const args = Array.prototype.slice.call(arguments);

。。。

说一下数组如何去重,你有几种方法?

let arr = [1,1,"1","1",true,true,"true",{},{},"{}",null,null,undefined,undefined]

方法1 Array.from()和Set

let uniqueOne = Array.from(new Set(arr))

/解析： Set是es6新增的数据结构，似于数组，但它的一大特性就是所有元素都是唯一的，没有重复的值，我们一般称为集合

Array.from()就是将一个类数组对象或者可遍历对象转换成一个真正的数组，也是ES6的新增方法

方法2 用forEach和indexOf

let uniqueThree = arr => {

let brr = []

arr.forEach(item => {

if(brr.indexOf(item) === -1)

brr.push(item)

}

方法3 利用map.has和map.set去重

let list = ['你是最棒的2', 8, 8, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8, '你是最棒的2',]

let newList3 = [];

let map = new Map()

list.forEach((item) => {

if (!map.has(item)) {

map.set(item,ture)

newList3.push(item)

}

})

console.log('newList3', newList3);}

// 如果map.has指定的item不存在，那么就设置key和value 这个item就是当前map里面不存在的key,把这个item添加到新数组

// 如果下次出现重复的item，那么map.has(item等于ture 取反 !map.has(item) 不执行

方法4 直接用for循环去重

说一下HTTP和HTTPS协议的区别?
        1、HTTPS协议需要CA证书,费用较高;而HTTP协议不需要
        2、HTTP协议是超文本传输协议,信息是明文传输的,HTTPS则是具有安全性的SSL加密传输协议;
        3、使用不同的连接方式,端口也不同,HTTP协议端口是80,HTTPS协议端口是443;
        4、HTTP协议连接很简单,是无状态的;HTTPS协议是具有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTP更加安全

判断数组的方式有哪些？

object.prototype.toString.call()
通过原型链判断：obj._proto_== Array.prototype
Es6: Array.isArray(obj)
obj instanceof Array5.Array.prototype.isPrototypeOf(obj)

如何判断一个对象是空对象？

使用JSON自带的.stringify万法来判断：

if(Json.stringify(obj)=='{}'){console.log('空对象')}

使用ES6新增的方法Object.keys()来判断：

if(Object.keys(Obj).length<0){console.log('空对象')}

基本数据类型

ES5的5种：Null，undefined，Boolean，Number，String

ES6新增：Symbol表示独一无二的值

ES10新增：BigInt 表示任意大的整数

一种引用数据类型：（本质上是由一组无序的键值对组成）

引用数据类型: Object。包含Object、Array、 function、Date、RegExp。

注意：JavaScript不支持创建任何自定义类型的数据，也就是说JavaScript中所有值的类型都是上面8中之一。

Split和join的区别

Split是将字符串按照指定字符切割成数组，join是将数组装换成字符串

IE标准下，有哪些兼容性的写法

Var ev = ev || window.event

Document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement || ev.target

时间委托是什么

利用时间冒泡的原理，将所触发的事件让让其父元素代替执行（ev.stopPropagation();）

1. 可以大量节省内存占用，减少事件注册2. 可以实现当新增子对象时，无需再对其进行事件绑定

如何阻止默认事件

return false 或者 ev.prevent Default();

innerHTML 与 innerText的作用与区别？

作用：都可以获取或者设置元素的内容
区别：innerHTML可以解析内容中的html标签，innerText不能解析内容中的html标签

什么是标识符？

在JS中，可以自定义命名的东西都属性标识符；
比如变量名，函数名，参数名都是标识符

DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系

e.getAttribute：获取的是标签上属性，可以通过e.setAttribute(propName, propValue)设置标签上属性

e.propName：获取的是元素对象上属性

offsetWidth/offsetHeight,clientWidth/clientHeight,scrollWidth/scrollHeight 的区别?

offsetWidth/offsetHeight 返回值包含 content + padding + border + 包含滚动条，效果与 e.getBoundingClientRect()相同

clientWidth/clientHeight 返回值只包含 content + padding，如果有滚动条，也不包含滚动条

scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸

检测浏览器版本版本有哪些方式？

根据 navigator.userAgent // UA.toLowerCase().indexOf('chrome')

如何判断变量为NaN

        通过isNaN()判断
        isNaN(NaN) // 返回true
        isNaN(1000) // 返回false
        isNaN('小明') // 返回true（判断前会转换成number类型）
        isNaN('101') // 返回false

target 和 currentTarget 区别

        都是事件对象上的属性
        event.target：返回触发事件的元素
        event.currentTarget：返回绑定事件的元素(相当于事件中this)

prototype 和 proto 的关系是什么

prototype: 所有函数都会有一个prototype属性, 它就是函数的原型对象

proto: 所有实例对象上都会有一个proto属性, 它等同于函数的原型对象

原型链：因为所有实例对象都原型对象，原型对象也个对象，所以它也自己原型对象(这样形成原型链)

常用的数组方法(至少七个)

1）Array.push()：此方法是在数组的后面添加新加元素，此方法改变了数组的长度：

2）Array.pop()：此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度：

3） Array.shift()：此方法在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度：

4） Array.unshift()：此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度：

5）Array.isArray()：判断一个对象是不是数组，返回的是布尔值

6） Array.concat()：此方法是一个可以将多个数组拼接成一个数组：

7）Array.toString()：把数组作为字符串返回

8） Array.join()：以指定字符拼接成字符串，然后返回

9） Array.splice：(开始位置，删除的个数，元素)

10）Array.map()：此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组

11）Array.forEach()：此方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和 map 方法区分

12）Array.filter()：此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回

13）Array.every()：此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回 true，否则为 false：

14）Array.some()：此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回 true，若所有元素都不满足判断条件，则返回 false：

15）Array.reduce()：此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型：

常用的字符串方法（至少七个）

split(sep，limit)：将字符串分割为字符数组，limit 为从头开始执行分割的最大数量

indexOf(str):返回 str 在父串中第一次出现的位置，若没有则返回-1

lastIndexOf(str):返回 str 在父串中最后一次出现的位置，若没有则返回-1

substr(start，length)：从字符索引 start 的位置开始，返回长度为 length 的子串

substring(from,to)：返回字符索引在 from 和 to（不含）之间的子串

slice(start,end)：返回字符索引在 start 和 end（不含）之间的子串

toLowerCase()：将字符串转换为小写

toUpperCase()：将字符串转换为大写

replace(str1,str2):str1 也可以为正则表达式，用 str2 替换 str1

concat(str1,str2,...):连接多个字符串，返回连接后的字符串的副本

match(regex):搜索字符串，并返回正则表达式的所有匹配

charAt(index):返回指定索引处的字符串

charCodeAt(index):返回指定索引处的字符的 Unicode 的值

fromCharCode():将 Unicode 值转换成实际的字符串

search(regex):基于正则表达式搜索字符串，并返回第一个匹配的位置

valueOf()：返回原始字符串值

trim(): 去首尾空格

new操作符具体做了什么？

在内存创建一个新对象，把构造函数中this指向新建的对象，会在新对象上添加一个__proto__属性,指向函数的原型对象prototype
判断函数返回值,如果值是引用类型就直接返回值；否则返回this(创建的新对象)

说下什么是IIFE函数

IIFE(立即调用函数表达式)是一个在定义时就会立即执行的函数。

浅拷贝与深拷贝有何区别？如何实现？

浅拷贝：拷贝的是原对象的内存地址

深拷贝：在内存中把原对象复制一份

浅拷贝的实现方式有：

（1）直接变量赋值

（2）Object.assign()；但目标对象只有一层的时候，是深拷贝；

（3）扩展运算符(...)；目标对象只有一层的时候，是深拷贝；

深拷贝就是在拷贝数据的时候，将数据的所有引用结构都拷贝一份。

深拷贝的实现方式有：

（1）结合使用JSON.parse()和JSON.stringify()方法。

（2）手写遍历递归赋值；

字符串截取方法substr、 substring、 slice三者的区别

substr(n,m)：截取的是字符串中索引为n开始的，并且截取m位

substring(n,m)：从索引为n的位置开始截取，截取到索引为m的位置但是不包含索引为m这一项

slice(n,m)：和substring一样，但是他可以支持负数索引

说说你对闭包的理解

闭包有三个特性：

函数嵌套函数
函数内部可以引用外部的参数和变量，参数和变量不会被垃圾回收机制回收
会永远留驻在内存中，使用闭包主要是为了设计私有的方法和变量。

优点：是可以避免全局变量的污染，

缺点：是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

JS严格模式的使用与作用

在代码前面使用"use strict"就可以开启严格模式;

作用：消除 Javascript 语法的一些不合理、不严谨之处，减少一些怪异行为;消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；为未来新版本的 Javascript 做好铺垫。

浏览器inline-block 元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

<input> 、<img> 、<button> 、<texterea> 、<label>。

var let 在 for 循环中的区别

var不存在块级作用域，所以在for循环时，每次循环var定义变量i的值，都会被后一次循环覆盖;
let存在块级作用域，每一次循环都是一个独立的域，let定义变量i的值，就不会被后一次循环覆盖

Vue路由

routes : 数组。路由匹配规则

router ：对象。路由对象

$router ：对象。用于跳转路由和传递参数

$route ：对象。用于接收路由跳转参数

Vue的最大优势是什么?

比较轻量，中国人自己写的框架，文档易读（这里比较轻松，拿出平时和朋友聊天的语气）
双向数据绑定,
数据驱动视图,
组件化开发
数据和视图分离
单页面应用可以实现页面数据局部刷新

MVVM和MVC区别是什么?

MVC ：传统的设计模式。

MVVC： vue所使用的设计模式

MVVM，一种软件架构模式，决定了写代码的思想和层次

设计模式：一套广泛被使用的开发方式

M ： model 模型（就是数据的意思）

V ： view视图（页面）

C ：controller控制器（在这里写js业务逻辑，把数据M 渲染到视图 V）

M： model数据模型 (data里定义)

V： view视图（页面标签）

VM： ViewModel视图模型 (vue.js源码)

MVVM通过数据双向绑定让数据自动地双向同步不再需要操作DOM

V （修改视图） -> M（数据自动同步）

M（修改数据） -> V （视图自动同步）

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。(代码分层, 架构设计)

1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)

Vue常用修饰符有哪些?

.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.once: 只执行一次这个事件

.enter:监听键盘enter键

说出至少4个Vue指令及作用

v-on 给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在methods里面

v-bind 动态绑定作用：及时对页面的数据进行更改, 可以简写成:分号

v-slot: 缩写为#, 组件插槽

v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签

v-show 显示内容

v-if 显示与隐藏

v-else 必须和v-if连用不能单独使用否则报错

v-text 解析文本

v-html 解析html标签

Vue中有时候数组会更新页面，有时候不更新，这是为什么?

因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()

这些方法会触发数组改变, v-for会监测到并更新页面

push()、pop()、shift()、unshift()、splice()、sort()、reverse()

不会触发v-for更新的数组方法

slice()、filter()、concat()

侦听器和计算属性区别

(1)计算属性有缓存机制,侦听器没有

(2)计算属性不支持异步操作, 侦听器支持异步操作

(3)计算属性是一个额外新增的属性，侦听器只能侦听data中的属性

(4)计算属性有返回值return,侦听器不需要return

(5)计算属性可以监听多个数据变化(计算属性内部用到的数据变化了，就会执行计算属性方法),

侦听器只能侦听一个数据的变化。

方法（method）：需要主动调用触发，不会缓存

计算属性（computed）：监听多个属性：只要计算属性内部数据变化就会触发，有缓存机制

侦听器（watch）：监听一个属性，支持异步，不会缓存

路由之间是怎么跳转的？有哪些方式?

<router-link to="需要跳转到页面的路径">
this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面
this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面
this.$router.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

vue-router怎么配置路由（路由配置六个流程）

1.引入组件

2.配置路由path和组件, 和生成路由对象routes

3.创建路由对象router

4.把路由对象挂载到new Vue()

5.页面使用<router-view></router-view> 承载路由

6.<router-link to="要跳转的路径"></router-link> 设置路由导航(声明式导航方式/编程式跳转)

vue-router的钩子函数都有哪些（导航守卫）

关于vue-router中的钩子函数主要分为3类

全局钩子函数beforeEach（全局前置守卫，所有路由生效）

beforeEach函数有三个参数,分别是:
to:router即将进入的路由对象
from:当前导航即将离开的路由

next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed （确认的）否则为false,终止导航。

单独路由独享组件（只对这个路由生效）

beforeEnter,

3 组件内钩子

beforeRouterEnter，（渲染路由组件前）
beforeRouterUpdate,（路由改变）
beforeRouterLeave（路由离开）

Vue的路由实现模式：hash模式和history模式

1、路径不同：hash有#, history没有#

2、工作模式不同

hash : 修改当前页面hash,不需要服务器额外配置。在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

history: 会给服务器发送请求，需要服务器配置。history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

请说出路由配置项常用的属性及作用

path : 跳转路径
component : 路径相对于的组件
name:命名路由
children:子路由的配置参数(路由嵌套)
props:路由解耦
redirect : 重定向路由

$route和$router的区别?

routes : 数组。路由匹配规则
router ：对象。路由对象
$router ：对象。用于跳转路由和传递参数
$route ：对象。用于接收路由跳转参数

跟keep-alive有关的生命周期是哪些？

生命周期函数：activated 与 deactivated。

activated：

在在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。第一次进入缓存路由/组件时调用，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用，并且给因为组件被缓存了，再次进入缓存路由、组件时，不会触发这些钩子函数，beforeCreate created beforeMount mounted 都不会触发

deactivated钩子

组件被停用（离开路由）时调用。使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了，这个钩子可以看作beforeDestroy的替代，如果你缓存了组件，要在组件销毁的的时候做一些事情，可以放在这个钩子里，组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)

Vue 组件 data 为什么必须是函数

因为组件是需要在多个地方使用的
如果data是一个对象，对象是引用类型。一旦某一个地方修改，就会全部修改
data是一个函数，每一次复用组件的时候就会从这个函数返回一个新的对象。这样组件在复用的时候就可以做到数据互不干扰。

Vue 的 nextTick 的原理是什么?

nextTick 的原理是 vue 通过异步队列控制 DOM 更新，nextTick底层是promise，所以是微任务。

nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。

v-slot插槽与作用域插槽

1.插槽作用：父组件传递 html结构给子组件

2.具名插槽作用：父组件传递多个html结构给子组件

3.作用域插槽作用：父组件给子组件传递插槽时，可以使用子组件内部的数据

vue路由作用与原理

路由作用：实现单页面应用

原理：监听location的hash值

vue-router怎么配置路由（路由配置六个流程）

1.引入组件

2.配置路由path和组件, 和生成路由对象routes

3.创建路由对象router

4.把路由对象挂载到new Vue()

5.页面使用<router-view></router-view> 承载路由

6.<router-link to="要跳转的路径"></router-link> 设置路由导航(声明式导航方式/编程式跳转)

vuex中action工作流程

1.组件给actions发送消息

2.actions异步请求数据

3.actions将请求到的数据提交给mutations

4.mutations同步更新state中的数据

说一下你在vue中踩过的坑

1、操作data中的数据，发现没有响应式

原因：数组中有很多方法，有的会改变数组（例如pop push）,有的不会改变数组（例如slice, filter）

解决方案：通过Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的

2、在created操作dom的时候，是报错的，获取不到dom，这个时候实例vue实例没有挂载

解决方案：Vue.nextTick(回调函数进行获取

多窗口之间sessionStorage不能共享状态吗?

多窗口之间sessionStorage不可以共享状态！！！但是在某些特定场景下新开的页面会复制之前页面的sessionStorage！！

window.open("同源页面")这种方式新开的页面会复制之前的sessionStorage，通过a标签新开的页面同样也会。（只有在本页面中以新页签或窗口打开的同源页面会‘临时共享’之前页面的sessionStorage）

说说call、apply、bind之间的区别及使用方法

一、作用

call、apply、bind作用是改变函数执行时的上下文，简而言之就是改变函数运行时的this指向
call、apply、bind是Function.prototype下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。

apply：

apply方法也是改变this的指向，立即执行

apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入

apply([thisObj，[argArray]])

call：

call 方法改变this的指向, 立即执行函数，第一个参数是表示要绑定的对象，如果调用时不传参，比如call() call(null) call(undefined) 这三种的 this 都指向window。第二个参数传入的是一个参数列表

call(thisObj，[arg1, arg2, argN])

bind：

bind() 第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)。但与以上方法不同的是，它不是一个立即执行的方法，返回一个函数

小结：

如果不需要关心具体有多少参数被传入函数，选用apply()
如果确定函数可接收多少个参数，并且想一目了然表达形参和实参的对应关系，用call()
如果我们想要将来再调用方法，不需立即得到函数返回结果，则使用 bind()